如果自定义组件导出默认class和其他变量，则在页面中引用并使用该组件的变量，会导致组件样式完全丢失

cnxz48662

项目背景：Taro-cli生成项目, 使用typescript + less + 默认模版

问题描述：在一个自定义组件中，export一个class和一个普通object。在页面中import这个组件的class和普通object，如果普通object未被使用，则一切正常；如果普通object被使用（如console.log)，则组件的样式完全丢失。

事例代码：

// 组件文件 test-comp/index.tsx 和 test-comp/index.less

// index.tsx
import './index.less'

export const MyObj = { name: 'abc' }

export default class TestComp extends Component {
  render() {
    return (<View className='test-comp'>Test Component</View>)
  }
}

// index.less
.test-comp {
  width: 100%;
  height: 200px;
  background-color: green;
}

// 页面文件 index/index.tsx

// index.tsx
import TestComp, { MyObj } from '@/components/test-comp'

// IMPORTANT !!!
// 这一句将导致TestComp样式完全不工作
// 如果不使用MyObj则样式正常工作
console.log(MyObj) 

export default class Index extends Component {
  render() {
    return (<TestComp />)
  }
}

重现步骤：

下载头条开发者工具
npm run dev:tt
导入dist目录
如果执行 console.log(MyObj)则样式丢失（需要重新npm run dev:tt并重启开发者工具才能重现）
如果注释 console.log(MyObj)则样式正常

初步调查结果:

发现两种场景下 test-comp 编译结果差别巨大，使用了 MyObj 的情况下，编译出来的 test-comp 没有引入相应的index.less。不使用 MyObj 则一切正常