溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
rollup 采用 es6 原生的模塊機制進行模塊的打包構建，rollup 更著眼于未來，對 commonjs 模塊機制不提供內置的支持，是一款更輕量的打包工具。rollup 比較適合打包 js 的 sdk 或者封裝的框架等，例如，vue 源碼就是 rollup 打包的。而 webpack 比較適合打包一些應用，例如 SPA 或者同構項目等等。
創建項目
目錄結構是這樣的：
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
你可以在你的終端中執行下面的命令來安裝此項目
# cd /path/to/your/projects git clone https://github.com/daixwu/hey-rollup.git
安裝 Rollup
通過下面的命令安裝Rollup:
npm install --save-dev rollup
創建配置文件
在 hey-rollup 文件夾中創建一個新文件 rollup.config.js。之后在文件中添加下面的內容：
export default {
input: "src/main.js",
output: {
file: "dist/js/main.min.js",
format: "umd",
name: 'bundle-name'
}
};
下面是每一個配置選項都做了些什么：
搭配 babel 7
rollup 的模塊機制是 ES6 Modules，但并不會對 es6 其他的語法進行編譯。因此如果要使用 es6 的語法進行開發，還需要使用 babel 來幫助我們將代碼編譯成 es5。
這種強需求，rollup 當然提供了解決方案。
安裝模塊
rollup-plugin-babel 將 rollup 和 babel 進行了完美結合。
npm install --save-dev rollup-plugin-babel@latest
創建 .babelrc
{
"presets": [
[
"@babel/preset-env",
{
"modules": false
}
]
]
}
更新 rollup.config.js
import babel from "rollup-plugin-babel";
export default {
plugins: [
babel({
exclude: 'node_modules/**',
}),
],
};
為了避免轉譯第三方腳本，我們需要設置一個 exclude 的配置選項來忽略掉 node_modules 目錄
babel 7 必要模塊
npm install --save-dev @babel/core npm install --save-dev @babel/preset-env
ESLint 檢查
在你的代碼中使用 linter 無疑是十分好的決定，因為它會強制執行一致的編碼規范來幫助你捕捉像是漏掉了括弧這種棘手的 bug。
在這個項目中，我們將會使用 ESLint。
安裝模塊
為了使用 ESLint，我們將要安裝 ESLint Rollup plugin
npm install --save-dev rollup-plugin-eslint
生成一個 .eslintrc.json
為了確保我們只獲取我們想要的錯誤，我們需要首先配置 ESLint。這里可以通過下面的代碼來自動生成大多數配置：
./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插件有兩個屬性需要說明：throwOnError 和 throwOnWarning 設置為 true 時，如果在 eslint 的檢查過程中發現了 error 或warning，就會拋出異常，阻止打包繼續執行（如果設置為false，就只會輸出eslint檢測結果，而不會停止打包）
兼容 commonjs
npm 生態已經繁榮了多年，commonjs 規范作為 npm 的包規范，大量的 npm 包都是基于 commonjs 規范來開發的，因此在完美支持 es6 模塊規范之前，我們仍舊需要兼容 commonjs 模塊規范。
rollup 提供了插件rollup-plugin-commonjs ，以便于在 rollup 中引用 commonjs 規范的包。該插件的作用是將 commonjs 模塊轉成 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 模塊轉化成 ES6 模塊，main 和 browser 則決定了要將第三方模塊內的哪些代碼打包到最終文件中。
替代環境變量
安裝模塊
rollup-plugin-replace 本質上是一個用來查找和替換的工具。它可以做很多事，但對我們來說只需要找到目前的環境變量并用實際值來替代就可以了。（例如：在 bundle 中出現的所有 ENV 將被 "production" 替換）
npm install --save-dev rollup-plugin-replace
更新 rollup.config.js
配置很簡單：我們可以添加一個 key:value 的配對表，key 值是準備被替換的鍵值，而 value 是將要被替換的值。
import replace from "rollup-plugin-replace";
export default {
plugins: [
replace({
ENV: JSON.stringify(process.env.NODE_ENV || "development")
})
]
};
在我們的配置中找到每一個 ENV 并用 process.env.NODE_ENV 去替換，SON.stringify 用來確保值是雙引號的，不像 ENV 這樣。
壓縮 bundle
添加 UglifyJS 可以通過移除注上釋、縮短變量名、重整代碼來極大程度的減少 bundle 的體積大小 —— 這樣在一定程度降低了代碼的可讀性，但是在網絡通信上變得更有效率。
安裝插件
用下面的命令來安裝rollup-plugin-uglify ：
npm install --save-dev rollup-plugin-uglify
更新 rollup.config.js
接下來，讓我們在 Rollup 配置中添加 Uglify 。然而，為了在開發中使代碼更具可讀性，讓我們來設置只在生產環境中壓縮混淆代碼：
import uglify from "rollup-plugin-uglify";
export default {
plugins: [
process.env.NODE_ENV === "production" && uglify()
]
};
這里使用了短路計算策略，只有在 NODE_ENV 設置為 production 時加載 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()),
],
};
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
