Molecule 在构建工具中的选择
我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。
本文作者：修能
朝闻道，夕死可矣
何为 Molecule？
轻量级的 Web IDE UI 框架——Molecule
我们开源了一个轻量的 Web IDE UI 框架
Molecule实现数栈至简前端开发新体验
前言
构建通常指的是把源代码转换成发布到线上的可执行 JavaScrip、CSS、HTML 代码。在前端发展的过程中，源代码的模块体系在不断的更新，最终产物也在不断的更新。而随之也使得构建工具也在不断更新换代。
而目前来看，基于前端的细化领域下，针对不同领域下的构建工具也日新月异。来看看 Molecule 该如何选择构建工具呢？
Molecule 的需求
首先，我们需要分析 Molecule 对构建工具的需求有什么？
老版本的问题
- 本地开发和 build 的构建工具不同，不得不增加 web 命令来执行一个预览的任务，确保 build 后的产物没问题。
- 慢，由于使用 tsc 作为编译，所以编译较慢。
- 部分变量无法复用，导致重复定义。
代码编译
由于 Molecule 的代码是用 ESM 的模块书写，且 Molecule 面向的是 Web 应用。通常来说面向 Web 应用的依赖库是需要提供 ESM 的代码实现 tree shaking 的作用的。
所以我们这里需要把 ESM 书写的 Molecule 代码通过构建工具编译成 ESM。
思考：为什么要把 ESM 代码编译成 ESM？
- 将 TypeScript 编译成 JavaScript
- 将高级语法编译成低级语法
除此之外，由于我们考虑到 Node.js 后续发展以 Pure ESM 为主，且 Molecule 针对 CommonJS 的场景较少，故我们不考虑输出 CommonJS 的产物。
类型
需要支持输出类型。
样式
Molecule 中使用 BEM 作为类名规范，通常情况下使得需要在 Sass 中和 JavaScript 中都定义相同变量名。而类 Sass-in-JS 使得我们可以从 Sass 中导出变量名，在 JS 文件中使用。
这就使得构建工具不仅要支持 Sass 的编译，同时还需要支持插件，允许我们做 Sass-in-JS 的需求。
其他
其他相关文件，例如 JSON，PNG 等文件需要支持拷贝至相关指定目录。
调研构建工具
Webpack
Webpack 是目前构建工具中的老大哥了，作为顶级老牌构建工具，几乎所有场景都能适用。
缺点也仅仅是冗余代码较多，配置项太多，体积较大等。
Rollup
作为面向 JS 类库而出现的构建工具。其和 Webpack 相比，在打包后产生的冗余代码少，体积较小，功能专注。缺点仅仅是不支持 HMR。
Vite
直接排除
Parcel
Parcel 目前看作是面向 Web 应用的零配置，高速度的 Webpack。其有一个致命的弱点是，自定义插件支持不如 Webpack。这会让我们无法实现 Sass-in-JS。
2.0 可能有所改善，我不清楚。不予评价
swc
swc 在某种程度上，是 babel 和 tsc 的竞品，属于比较底层的构建工具。和 esbuild 同类型，只是 esbuild 基于 Go，swc 基于 Rust。
esbuild
extremely fast JavaScript Compiler
babel
很好，就是慢
tsc
很好，就是更慢。有一个优点，只有 tsc 能支持输出类型。
方案实施
由于大多数的构建工具都是 bundler，并不符合 Molecule 的定位。故采取的方案是 esbuild + Sass + tsc 的方案。
esbuild 取其作为 Compiler 的部分，Sass 取其编译 SCSS 文件的部分，tsc 负责编译出类型文件。
tsx 相关文件输出
transformCtx = await esbuild.context({
entryPoints,
bundle: false,
format: 'esm',
outdir: dist,
jsx: 'automatic',
plugins: [
{
name: 'alias',
setup(build) {
build.onLoad({ filter: /.*/ }, async (args) => {
const source = await fs.promises.readFile(args.path, 'utf8');
const contents = sassLoader(alias(source, args.path));
return {
contents,
loader: args.path.endsWith('.tsx') ? 'tsx' : 'ts',
};
});
},
},
],
});
await transformCtx.watch();
做两件事
- 别名重定位
- 将文件中的样式文件改为 css
样式文件输出
/**
*
* @param {string} entry
*/
async function _transform(entry) {
const res = await sass.compileAsync(entry);
const regex = /^:export {(\n|.)+}$/m;
const target = entry.replace(/src\//, 'esm/').replace(/.scss/, '.css');
const dirname = path.dirname(target);
if (!fs.existsSync(dirname)) {
fs.mkdirSync(dirname, { recursive: true });
}
const css = res.css.replace(regex, '');
fs.writeFileSync(target, css);
if (regex.test(res.css)) {
const exportModules = res.css.match(regex)[0];
fs.writeFileSync(
path.join(dirname, styleVariablesFileName),
exportModules
.replace(':export', 'export default')
.replace(/: .*;/gm, (substring) => {
const stringLiteral = /(?<="|')\S+(?="|')/g;
if (!stringLiteral.test(substring)) {
const startIdx = substring.indexOf(':');
const endIdx = substring.indexOf(';');
return `:"${substring.substring(startIdx + 1, endIdx).trim()}",`;
} else {
return substring.replace(';', ',');
}
})
);
}
}
做两件事
- 把
:export干掉 - 把
:export的内容放到当前目录下的style__variables.js的目录中
类型文件输出
类型文件异步输出，防止阻塞
async function transformTyping() {
typingCtx = spawn('tsc && (concurrently "tsc -w" "tsc-alias -w")', {
stdio: 'inherit',
shell: true,
});
}
其他文件输出
/**
*
* @param {string} filePath
*/
function _copyFile(filePath) {
const dest = filePath.replace(/src\//, 'esm/');
const dirname = path.dirname(dest);
if (!fs.existsSync(dirname)) {
fs.mkdirSync(dirname, { recursive: true });
}
fs.createReadStream(filePath, 'utf-8').pipe(fs.createWriteStream(dest));
}
遗留问题
- 增量编译的问题
- 代码压缩
欢迎大家就以上问题留言讨论！
最后
欢迎关注【袋鼠云数栈UED团队】~
袋鼠云数栈UED团队持续为广大开发者分享技术成果，相继参与开源了欢迎star
