bit-react-compiler-in-depth

没想到,2019年居然还有第二篇。

Bit 定义了一个 Env 的概念,来做构这个事情。例如 https://github.com/teambit/envs 所说,他支持 React JS、React TS、Vue、Angular 等等框架的构建方案。

他把测试环节,也纳入了 Env 里面,专门有一个 bit.envs/testers/mocha 是专门干自动化测试的事情。

bit.envs/compilers/react

这里面的东西还是挺简单的,就是把 .js 和 .jsx 两个后缀的文件,走了一下 Babel。

Babel 的配置如下

而 Babel 相关的代码,则在下面两个文件中

这里面没有什么特殊的东西,主要实现内置 babel 和合并 .babelrc 的方案。

非 JS 的东西去哪了?

可以非常明确的看到,react 的编译环境,既没有 webpack、也没有 rollup,仅仅是 JS 相关的走 Babel。

而非 JS 相关的,Bit 则做了一个 ComponentObject 的东西来处理(有点点像 url-loader,支持 base64 和字符串两种形式)。

Bit 暂不支持 CRA 中的 SVG to JSX 的方案

由于 Bit 的非 JS 部分,是 Bit 自己实现的,而其 React 的官方 Demo,却是用的 CRA。

所以会出现部分涉及 SVG 相关的组件,在 Demo 中运行正常,但打包成 npm 后却无法正常使用。

例如下面这种 CRA 的 SVG 案例就会出问题

如果真要用到 SVG to JSX 这种怎么办呢?我们有个同事直接用 dangerouslySetInnerHTML 来实现,也挺好的

由于 ComponentObject 的存在,这里的 svg 会变成一个字符串。

Bit 组件支持 tree-shaking 吗?

Bit 的 Env 文档里面写了 ESM 相关的内容,但实际 Babel 确实用的 CJS,不清楚 CJS 要怎么做 tree-shaking。

不过 Bit 的组件提倡一个组件一个文件,且组件通过 export default 来暴露,并没有多个 export 的内容,这里看上去组件代码又不可能存在需要 tree-shaking 的死代码。

这部分还需要在研究下,知道的也欢迎告诉我。