我們是袋鼠雲數棧 UED 團隊，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。 本文作者：修能 朝聞道，夕死可矣 何為 Molecule？ 輕量級的 Web IDE UI 框架——Molecule 我們開源了一個輕量的 Web IDE UI 框架 ...
我們是袋鼠雲數棧 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
- 大數據分散式任務調度系統——Taier
- 輕量級的 Web IDE UI 框架——Molecule
- 針對大數據領域的 SQL Parser 項目——dt-sql-parser
- 袋鼠雲數棧前端團隊代碼評審工程實踐文檔——code-review-practices
- 一個速度更快、配置更靈活、使用更簡單的模塊打包器——ko
