前端工程化之Rollup構(gòu)建工具
本文轉(zhuǎn)載自微信公眾號「DYBOY」，作者DYBOY。轉(zhuǎn)載本文請聯(lián)系DYBOY公眾號。
隨著互聯(lián)網(wǎng)行業(yè)的發(fā)展，前端應(yīng)用也逐漸變得復(fù)雜，所以自然而然地前端工程化開發(fā)是必然道路，百家爭名的時代，涌現(xiàn)了許多優(yōu)秀的構(gòu)建工具，今天想從學(xué)習(xí)的角度，和大家分享一下筆者的學(xué)習(xí)方法和思路。
筆者個人觀點看來，想要完全掌握前端工程化，那么就得對行業(yè)現(xiàn)有的構(gòu)建工具、流程管理、服務(wù)管理有一個全面以及深入的認(rèn)識，無論是前端還是后端開發(fā)者，我們通過任意編程語言編寫軟件應(yīng)用，這是基本能力，但作為工程師，我想那就是得具有工程化的能力，我們應(yīng)該在開發(fā)工程中能夠具有把控全局的能力，有業(yè)務(wù)上的視野，也得有技術(shù)上的沉淀，應(yīng)該時刻思考，從程序設(shè)計、流程設(shè)計、方案設(shè)計上盡可能得去逼近符合業(yè)務(wù)場景的最佳實踐。
一、什么是Rollup
Rollup 是一個 JavaScript 模塊打包器，可以將小塊代碼編譯成大塊復(fù)雜的代碼，例如 library 或應(yīng)用程序 —— Rollup文檔
可以理解為，Rollup是一款集成式的代碼打包、應(yīng)用構(gòu)建工具。
二、為什么要使用構(gòu)建工具
如前文所述，前端工程化是作為工程師的必要能力，工程化并非一個人就能搞定的，我們需要站在前人/巨人的肩膀看世界。
隨著行業(yè)的發(fā)展，涌現(xiàn)了一些獲得行業(yè)認(rèn)可(可以認(rèn)為是最佳實踐)的構(gòu)建工具，這些構(gòu)建工具將一些項目管理和編程開發(fā)的行業(yè)最佳實踐集成到了一個“腳手架”工具中。如此，便有利于其他團(tuán)隊快速構(gòu)建出高效、高質(zhì)量的工程化項目。
構(gòu)建工具能做的事：
- 處理兼容性
- 混淆、壓縮代碼
- Tree Shaking
- 轉(zhuǎn)譯
- 單元測試
- 打包應(yīng)用
三、上手Rollup
Rollup是一個我認(rèn)為還比較簡單的構(gòu)建工具，此處先不去討論其深層次的構(gòu)建實現(xiàn)細(xì)節(jié)，先看看如何上手使用。
其實關(guān)于Rollup的使用還是比較推薦大家閱讀官方文檔：https://rollupjs.org/guide/
「3.1 安裝」
全局安裝roolup
- yarn add rollup -g
「3.2 簡單使用」
使用rollup打包構(gòu)建有兩種方式，直接在命令行下需要手打構(gòu)建必須的參數(shù)，當(dāng)然我們是做工程，那么就得考慮如何盡可能減少團(tuán)隊成員的上手成本。
為此，Rollup提供了通過文件化配置方式，預(yù)設(shè)所需的參數(shù)，同時通過更改配置文件的參數(shù)，可以自由地實現(xiàn)我們自定義的需求。
這里大家可能會想到寫一個CLI，工欲善其事必先利其器，咱先認(rèn)識工具才能造工具，就先不扯遠(yuǎn)了。
3.2.1 創(chuàng)建配置文件
在項目的根目錄或其他你滿意的位置創(chuàng)建一個 rollup.config.js 文件，其內(nèi)容主要如下：
- export default {
- input: "./src/index.js",
- output: {
- file: "./dist/bundle.js",
- format: "esm",
- name: "RollupLearn",
- },
- }
3.2.2 添加快捷命令
為了簡單，另外再在package.json中配置快捷命令：
- "scripts": {
- "building": "rollup -c -w",
- },
這樣就可以直接在命令行下通過執(zhí)行：yarn building，就創(chuàng)建了一個實時監(jiān)聽文件變化就自動重新構(gòu)建打包的開發(fā)環(huán)境。
3.2.3 rollup.config.js配置常用參數(shù)解讀
官方羅列了rollup的配置參數(shù)如下：
- export default {
- // 核心選項
- input, // 必須，打包的入口文件，常見index.js
- external,
- plugins, // 常用：數(shù)組中配置一些打包的插件，例如babel等
- // 額外選項
- onwarn,
- // danger zone
- acorn,
- context,
- moduleContext,
- legacy
- output: { // 必須 (如果要輸出多個，可以是一個數(shù)組)
- // 核心選項
- file, // 必須，生成的打包文件名&路徑
- format, // 必須，打包構(gòu)建的目標(biāo)模塊標(biāo)準(zhǔn)，有cjs、amd、umd、esm、iife等
- name,
- globals,
- // 額外選項
- paths,
- banner,
- footer,
- intro,
- outro,
- sourcemap, // 常用，生成sourcemap文件
- sourcemapFile,
- interop,
- // 高危選項
- exports,
- amd,
- indent
- strict
- },
- };
簡單講一下幾個常用的功能設(shè)置
(1)輸入(input -i / --input)
String 這個包的入口點 (例如：你的 main.js 或者 app.js 或者 index.js)
(2)文件(file -o / --output.file)
String 要寫入的文件。也可用于生成 sourcemaps，如果適用
(3)格式(format -f / --output.format)
String 生成包的格式。下列之一:
- amd – 異步模塊定義，用于像RequireJS這樣的模塊加載器
- cjs – CommonJS，適用于 Node 和 Browserify/Webpack
- esm – 將軟件包保存為 ES 模塊文件，在現(xiàn)代瀏覽器中可以通過
- amd – 異步模塊定義，用于像RequireJS這樣的模塊加載器
- cjs – CommonJS，適用于 Node 和 Browserify/Webpack
- esm – 將軟件包保存為 ES 模塊文件，在現(xiàn)代瀏覽器中可以通過 <script type=module> 標(biāo)簽引入
- iife – 一個自動執(zhí)行的功能，適合作為<script>標(biāo)簽。（如果要為應(yīng)用程序創(chuàng)建一個捆綁包，您可能想要使用它，因為它會使文件大小變小。）
- umd – 通用模塊定義，以amd，cjs 和 iife 為一體
- system - SystemJS 加載器格式
（4）生成包名稱(name -n/--name)
String 變量名，代表你的 iife/umd 包，同一頁上的其他腳本可以訪問它。
（5）插件(plugins)
插件對象 數(shù)組 Array (或一個插件對象)。記住要調(diào)用導(dǎo)入的插件函數(shù)(即 commonjs(), 而不是 commonjs).
（6）sourcemap -m / --sourcemap
如果 true，將創(chuàng)建一個單獨的sourcemap文件。如果 inline，sourcemap將作為數(shù)據(jù)URI附加到生成的output文件中。
（7）sourcemapFile
String生成的包的位置。如果這是一個絕對路徑，sourcemap中的所有源代碼路徑都將相對于它。 map.file屬性是sourcemapFile的基本名稱(basename)，因為sourcemap的位置被假定為與bundle相鄰
如果指定 output，sourcemapFile 不是必需的，在這種情況下，將通過給bundle輸出文件添加 “.map” 后綴來推斷輸出文件名。
（8）treeshake
是否應(yīng)用 tree-shaking。建議您省略此選項（默認(rèn)為treeshake：true）
筆者認(rèn)為，當(dāng)你需要的再去自行查閱官方文檔，關(guān)于這些參數(shù)的詳細(xì)介紹可參考：https://rollupjs.org/guide/en/#big-list-of-options ，將會是解決問題的最快途徑。
四、增強打包能力
通過上述的一些Rollup本身提供的工具，很容易發(fā)現(xiàn)，比如代碼壓縮、代碼混淆、兼容性處理等能力并不具備，但Rollup提供了plugins這項配置字段，它允許我們使用三方庫來增加rollup的構(gòu)建能力。
在一個項目中，常見需要考慮的問題有：
- 代碼壓縮、代碼混淆
- 兼容性處理
- TypeScript、Less、Sass等轉(zhuǎn)譯處理
- Tree Shaking（Rollup默認(rèn)支持并啟用）
- 通用化（支持打包轉(zhuǎn)譯為umd、cjs、esm等格式的package）
官方提供了一個權(quán)威的三方插件參考列表：https://github.com/rollup/awesome ，因此有什么想要增強能力的需要，可以現(xiàn)在該列表中檢索
「4.1 代碼壓縮」
推薦使用：rollup-plugin-terser
安裝：
- yarn add rollup-plugin-terser -D
該插件提供了代碼壓縮，以及是否保留代碼注釋多行展示，一般情況下我們都是全壓縮，并去除代碼注釋，代碼注釋在生產(chǎn)環(huán)境并沒什么用。
所以默認(rèn)配置 terser() 即可。
「4.2 本地http服務(wù)」
推薦使用：rollup-plugin-serve
安裝：
- yarn add rollup-plugin-serve -D
一般配置：
- import serve from "rollup-plugin-serve";
- serve({
- open: true, // 運行時自動打開瀏覽器
- headers: {
- "Access-Control-Allow-Origin": "*", // 本地服務(wù)允許跨域
- },
- contentBase: ['public'], // 本地服務(wù)的運行文件根目錄
- port: 5000, // 設(shè)置網(wǎng)絡(luò)服務(wù)監(jiān)聽端口
- }),
「4.3 清空生成目錄文件」
每次編譯，如果我們有一些歷史文件，可能會使得我們的生產(chǎn)目錄越來越混亂，因此需要在每次編譯之前清空
推薦使用插件：rollup-plugin-clear
一般使用方法：
- import clear from "rollup-plugin-clear";
- clear({
- targets: ["dist"], // 項目打包編譯生成的目錄
- watch: true, // 實時監(jiān)聽文件變化
- }),
「4.4 ESlint 代碼格式檢查」
ESLint 是在 ECMAScript/JavaScript 代碼中識別和報告模式匹配的工具，它的目標(biāo)是保證代碼的一致性和避免錯誤
通過ESlint可以盡可能地規(guī)范團(tuán)隊開發(fā)的代碼風(fēng)格以及通過靜態(tài)檢查提升代碼質(zhì)量。算是一個代碼質(zhì)量的管理工具吧！
因為ESlint本身涉及到的配置也比較多，在后續(xù)會整理或者大家參閱官方文檔：https://eslint.org/docs/user-guide/getting-started
4.4.1 安裝
- yarn add eslint -D
4.4.2 初始化
- yarn run eslint --init
執(zhí)行這條命令后，會回答一些問題，然后默認(rèn)配置好一個初始化的ESlint規(guī)則的配置文件
初始化完成后，在根目錄創(chuàng)建了一個ESlint的配置文件：.eslintrc.json：
- {
- "env": {
- "browser": true,
- "es2021": true
- },
- "extends": [
- "standard"
- ],
- "parserOptions": {
- "ecmaVersion": 12,
- "sourceType": "module"
- },
- "rules": {
- }
- }
此時，大家在編碼開發(fā)的時候就會提示一些不符合規(guī)范的語法，同時在VScode中可以提供fix的快捷菜單。
有些配置文件，生成目錄的文件是不需要Eslint檢查，因此可以在項目根目錄新建一個 .eslintignore 文件，例如：
- /dist/
- /public/
- /rollup.config.js
當(dāng)然ESlint的規(guī)則也是比較多的，需要根據(jù)自己團(tuán)隊的成員以及項目本身情況來決定ESlint規(guī)則的復(fù)雜度。
更多的配置規(guī)則可以參閱：https://eslint.org/docs/rules/
4.4.3 配置Rollup支持ESlint
雖然在編碼過程中檢查代碼是否符合ESlint定制的規(guī)則，但是我們?nèi)阅軌蛲ㄟ^Rollup打包成功，因為rollup中并未感知ESlint的規(guī)則，所以就得在Rollup的配置文件中配置相關(guān)設(shè)置。
需要安裝：rollup-plugin-eslint
- yarn add rollup-plugin-eslint -D
配置：
- import { eslint } from "rollup-plugin-eslint";
- eslint(); // 這里沒傳入配置參數(shù)，會自動加載文件根目錄的 `.eslintrc.json` 配置文件。
4.4.4 VScode配置
一般大家使用的都是VScode編寫前端項目，所以在團(tuán)隊項目中，還可以配置一個VScode的工作區(qū)配置，大家協(xié)同辦公時候就能夠很好地統(tǒng)一一些行為，例如ESlint的在保存代碼的時候自動修復(fù)以及自動格式化，盡量減少不統(tǒng)一帶來的風(fēng)險。
給團(tuán)隊的開發(fā)提效的收益也是非常明顯的，當(dāng)然一定要根據(jù)情況配置合適的代碼規(guī)范約束。
「4.5 CSS預(yù)處理器插件」
常見的CSS預(yù)處理插件有：SCSS、SASS、LESS。
以Less處理器為例子，我們需要安裝：rollup-plugin-less
- yarn add rollup-plugin-less -D
使用例子：
- import { rollup } from 'rollup';
- import less from 'rollup-plugin-less';
- rollup({
- entry: 'main.js',
- plugins: [
- less()
- ]
- });
就可以在打包編譯時候?qū)ess文件轉(zhuǎn)譯為CSS。
「4.6 更多插件」
其實還有很多的插件，其用法如上部分羅列的插件，可見Rollup的使用及上手成本還是相對比較低的，其Tree-shaking是一大亮點，react框架就是用rollup打包的，Rollup小而美，是團(tuán)隊項目用作構(gòu)建工具的一個不錯選擇！
筆者暫時也無法給到一個最佳實踐的Rollup插件配置，工程項目都是較為復(fù)雜的，剩下的就需要大家根據(jù)項目以及團(tuán)隊本身情況去思考和制定。
五、總結(jié)
Rollup打包工具的基本使用就差不多了，通過嘗試可以發(fā)現(xiàn)，Rollup的配置等是非常簡單的，改變了開發(fā)者的工作形式，以及提升了工作（編碼）效率
“自然者，物見其然，不知所以然；同焉皆得，不知所以得”。作為前端工程師，我們不僅是要會用，還要明白構(gòu)建的整個過程，這有助于我們在編碼、架構(gòu)設(shè)計上能夠更加合理，或者說更“自然”。
