rollup 采用 es6 原生的模塊機(jī)制進(jìn)行模塊的打包構(gòu)建，rollup 更著眼于未來，對(duì) commonjs 模塊機(jī)制不提供內(nèi)置的支持，是一款更輕量的打包工具。rollup 比較適合打包 js 的 sdk 或者封裝的框架等，例如，vue 源碼就是 rollup 打包的。而 webpack 比較適合打包一些應(yīng)用，例如 SPA 或者同構(gòu)項(xiàng)目等等。
創(chuàng)建項(xiàng)目
目錄結(jié)構(gòu)是這樣的：
hey-rollup/├── dist│ ├── bundle-name.js│ └── bundle-name.min.js├── example│ ├── dist│ │ └── example.js│ ├── index.html│ └── index.js├── package-lock.json├── package.json├── rollup.config.js├── src│ └── index.js└── test └── index.js
你可以在你的終端中執(zhí)行下面的命令來安裝此項(xiàng)目
# cd /path/to/your/projectsgit clone https://github.com/daixwu/hey-rollup.git
安裝 Rollup
通過下面的命令安裝Rollup:
npm install --save-dev rollup
創(chuàng)建配置文件
在 hey-rollup 文件夾中創(chuàng)建一個(gè)新文件 rollup.config.js。之后在文件中添加下面的內(nèi)容：
export default { input: "src/main.js", output: { file: "dist/js/main.min.js", format: "umd", name: 'bundle-name' }};下面是每一個(gè)配置選項(xiàng)都做了些什么：
搭配 babel 7
rollup 的模塊機(jī)制是 ES6 Modules，但并不會(huì)對(duì) es6 其他的語法進(jìn)行編譯。因此如果要使用 es6 的語法進(jìn)行開發(fā)，還需要使用 babel 來幫助我們將代碼編譯成 es5。
這種強(qiáng)需求，rollup 當(dāng)然提供了解決方案。
安裝模塊
rollup-plugin-babel 將 rollup 和 babel 進(jìn)行了完美結(jié)合。
npm install --save-dev rollup-plugin-babel@latest
創(chuàng)建 .babelrc
{ "presets": [ [ "@babel/preset-env", { "modules": false } ] ]}更新 rollup.config.js
import babel from "rollup-plugin-babel";export default { plugins: [ babel({ exclude: 'node_modules/**', }), ],};為了避免轉(zhuǎn)譯第三方腳本，我們需要設(shè)置一個(gè) exclude 的配置選項(xiàng)來忽略掉 node_modules 目錄
babel 7 必要模塊
npm install --save-dev @babel/corenpm install --save-dev @babel/preset-env
ESLint 檢查
在你的代碼中使用 linter 無疑是十分好的決定，因?yàn)樗鼤?huì)強(qiáng)制執(zhí)行一致的編碼規(guī)范來幫助你捕捉像是漏掉了括弧這種棘手的 bug。
在這個(gè)項(xiàng)目中，我們將會(huì)使用 ESLint。
安裝模塊
為了使用 ESLint，我們將要安裝 ESLint Rollup plugin
npm install --save-dev rollup-plugin-eslint
生成一個(gè) .eslintrc.json
為了確保我們只獲取我們想要的錯(cuò)誤，我們需要首先配置 ESLint。這里可以通過下面的代碼來自動(dòng)生成大多數(shù)配置：
./node_modules/.bin/eslint --init
更新 rollup.config.js
接下來，import ESLint 插件并將它添加到 Rollup 配置中：
import eslint from 'rollup-plugin-eslint';export default { plugins: [ eslint({ exclude: [ throwOnError: true, throwOnWarning: true, include: ['src/**'], exclude: ['node_modules/**'] ] }), ],};eslint插件有兩個(gè)屬性需要說明：throwOnError 和 throwOnWarning 設(shè)置為 true 時(shí)，如果在 eslint 的檢查過程中發(fā)現(xiàn)了 error 或warning，就會(huì)拋出異常，阻止打包繼續(xù)執(zhí)行（如果設(shè)置為false，就只會(huì)輸出eslint檢測(cè)結(jié)果，而不會(huì)停止打包）
兼容 commonjs
npm 生態(tài)已經(jīng)繁榮了多年，commonjs 規(guī)范作為 npm 的包規(guī)范，大量的 npm 包都是基于 commonjs 規(guī)范來開發(fā)的，因此在完美支持 es6 模塊規(guī)范之前，我們?nèi)耘f需要兼容 commonjs 模塊規(guī)范。
rollup 提供了插件rollup-plugin-commonjs ，以便于在 rollup 中引用 commonjs 規(guī)范的包。該插件的作用是將 commonjs 模塊轉(zhuǎn)成 es6 模塊。
rollup-plugin-commonjs 通常與 rollup-plugin-node-resolve 一同使用，后者用來解析依賴的模塊路徑。
安裝模塊
npm install --save-dev rollup-plugin-commonjs rollup-plugin-node-resolve
更新 rollup.config.js
import babel from 'rollup-plugin-babel';import resolve from 'rollup-plugin-node-resolve';import commonjs from 'rollup-plugin-commonjs';export default { plugins: [ resolve({ jsnext: true, main: true, browser: true, }), commonjs(), babel({ exclude: 'node_modules/**', }), ],};注意： jsnext 表示將原來的 node 模塊轉(zhuǎn)化成 ES6 模塊，main 和 browser 則決定了要將第三方模塊內(nèi)的哪些代碼打包到最終文件中。
替代環(huán)境變量
安裝模塊
rollup-plugin-replace 本質(zhì)上是一個(gè)用來查找和替換的工具。它可以做很多事，但對(duì)我們來說只需要找到目前的環(huán)境變量并用實(shí)際值來替代就可以了。（例如：在 bundle 中出現(xiàn)的所有 ENV 將被 "production" 替換）
npm install --save-dev rollup-plugin-replace
更新 rollup.config.js
配置很簡(jiǎn)單：我們可以添加一個(gè) key:value 的配對(duì)表，key 值是準(zhǔn)備被替換的鍵值，而 value 是將要被替換的值。
import replace from "rollup-plugin-replace";export default { plugins: [ replace({ ENV: JSON.stringify(process.env.NODE_ENV || "development") }) ]};在我們的配置中找到每一個(gè) ENV 并用 process.env.NODE_ENV 去替換，SON.stringify 用來確保值是雙引號(hào)的，不像 ENV 這樣。
壓縮 bundle
添加 UglifyJS 可以通過移除注上釋、縮短變量名、重整代碼來極大程度的減少 bundle 的體積大小 —— 這樣在一定程度降低了代碼的可讀性，但是在網(wǎng)絡(luò)通信上變得更有效率。
安裝插件
用下面的命令來安裝rollup-plugin-uglify ：
npm install --save-dev rollup-plugin-uglify
更新 rollup.config.js
接下來，讓我們?cè)?Rollup 配置中添加 Uglify 。然而，為了在開發(fā)中使代碼更具可讀性，讓我們來設(shè)置只在生產(chǎn)環(huán)境中壓縮混淆代碼：
import uglify from "rollup-plugin-uglify";export default { plugins: [ process.env.NODE_ENV === "production" && uglify() ]};這里使用了短路計(jì)算策略，只有在 NODE_ENV 設(shè)置為 production 時(shí)加載 uglify()。
完整配置
最后附上我的 rollup.config.js 配置
import resolve from 'rollup-plugin-node-resolve';import commonjs from 'rollup-plugin-commonjs';import { eslint } from 'rollup-plugin-eslint';import babel from 'rollup-plugin-babel';import replace from 'rollup-plugin-replace';import { uglify } from 'rollup-plugin-uglify';const packages = require('./package.json');const ENV = process.env.NODE_ENV;const paths = { input: { root: ENV === 'example' ? 'example/index.js' : 'src/index.js', }, output: { root: ENV === 'example' ? 'example/dist/' : 'dist/', },};const fileNames = { development: `${packages.name}.js`, example: `example.js`, production: `${packages.name}.min.js`};const fileName = fileNames[ENV];export default { input: `${paths.input.root}`, output: { file: `${paths.output.root}${fileName}`, format: 'umd', name: 'bundle-name' }, plugins: [ resolve(), commonjs(), eslint({ include: ['src/**'], exclude: ['node_modules/**'] }), babel({ exclude: 'node_modules/**', runtimeHelpers: true, }), replace({ exclude: 'node_modules/**', ENV: JSON.stringify(process.env.NODE_ENV), }), (ENV === 'production' && uglify()), ],};以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
