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