rollup 采用 es6 原生的模塊機制進行模塊的打包構(gòu)建，rollup 更著眼于未來，對 commonjs 模塊機制不提供內(nèi)置的支持，是一款更輕量的打包工具。rollup 比較適合打包 js 的 sdk 或者封裝的框架等，例如，vue 源碼就是 rollup 打包的。而 webpack 比較適合打包一些應用，例如 SPA 或者同構(gòu)項目等等。

創(chuà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í)行下面的命令來安裝此項目

# cd /path/to/your/projects
git clone https://github.com/daixwu/hey-rollup.git

安裝 Rollup

通過下面的命令安裝Rollup:

npm install --save-dev rollup

創(chuàng)建配置文件

在 hey-rollup 文件夾中創(chuàng)建一個新文件 rollup.config.js。之后在文件中添加下面的內(nèi)容：

export default {
 input: "src/main.js",
 output: {
  file: "dist/js/main.min.js",
  format: "umd",
  name: 'bundle-name'
 }
};

下面是每一個配置選項都做了些什么：

input —— 要打包的文件
output.file —— 輸出的文件 (如果沒有這個參數(shù)，則直接輸出到控制臺)
output.format —— Rollup 輸出的文件類型 (amd, cjs, es, iife, umd)
- amd – 異步模塊定義，用于像 RequireJS 這樣的模塊加載器
- cjs – CommonJS，適用于 Node 和 Browserify/Webpack
- es – 將軟件包保存為 ES 模塊文件
- iife – 一個自動執(zhí)行的功能，適合作為 <script> 標簽。（如果要為應用程序創(chuàng)建一個捆綁包，您可能想要使用它，因為它會使文件大小變小。）
umd – 通用模塊定義，以 amd，cjs 和 iife 為一體
output.name --生成包名稱，代表你的 iife/umd 包，同一頁上的其他腳本可以訪問它（iife/umd 沒有 name 會報錯的）

搭配 babel 7

rollup 的模塊機制是 ES6 Modules，但并不會對 es6 其他的語法進行編譯。因此如果要使用 es6 的語法進行開發(fā)，還需要使用 babel 來幫助我們將代碼編譯成 es5。

這種強需求，rollup 當然提供了解決方案。

安裝模塊

rollup-plugin-babel 將 rollup 和 babel 進行了完美結(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è)置一個 exclude 的配置選項來忽略掉 node_modules 目錄

babel 7 必要模塊

npm install --save-dev @babel/core

npm install --save-dev @babel/preset-env

ESLint 檢查

在你的代碼中使用 linter 無疑是十分好的決定，因為它會強制執(zhí)行一致的編碼規(guī)范來幫助你捕捉像是漏掉了括弧這種棘手的 bug。

在這個項目中，我們將會使用 ESLint。

安裝模塊

為了使用 ESLint，我們將要安裝 ESLint Rollup plugin

npm install --save-dev rollup-plugin-eslint

生成一個 .eslintrc.json

為了確保我們只獲取我們想要的錯誤，我們需要首先配置 ESLint。這里可以通過下面的代碼來自動生成大多數(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插件有兩個屬性需要說明：throwOnError 和 throwOnWarning 設(shè)置為 true 時，如果在 eslint 的檢查過程中發(fā)現(xiàn)了 error 或warning，就會拋出異常，阻止打包繼續(xù)執(zhí)行（如果設(shè)置為false，就只會輸出eslint檢測結(jié)果，而不會停止打包）

兼容 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ì)上是一個用來查找和替換的工具。它可以做很多事，但對我們來說只需要找到目前的環(huán)境變量并用實際值來替代就可以了。（例如：在 bundle 中出現(xiàn)的所有 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 的體積大小 —— 這樣在一定程度降低了代碼的可讀性，但是在網(wǎng)絡通信上變得更有效率。

安裝插件

用下面的命令來安裝rollup-plugin-uglify ：

npm install --save-dev rollup-plugin-uglify

更新 rollup.config.js

接下來，讓我們在 Rollup 配置中添加 Uglify 。然而，為了在開發(fā)中使代碼更具可讀性，讓我們來設(shè)置只在生產(chǎn)環(huán)境中壓縮混淆代碼：

import uglify from "rollup-plugin-uglify";

export default {
 plugins: [
  process.env.NODE_ENV === "production" && uglify()
 ]
};

這里使用了短路計算策略，只有在 NODE_ENV 設(shè)置為 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()),
  ],
};

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: