什么是Rollup

rollup.js是Javascript的ES模塊打包器，我們熟知的Vue、React等諸多知名框架或類庫都通過rollup.js進行打包。與Webpack偏向于應(yīng)用打包的定位不同，rollup.js更專注于Javascript類庫打包（雖然rollup.js也可以提供資源打包，但顯然這不是它的強項）。在我們學(xué)習(xí)Vue和React等框架源碼或者自己編寫Javascript類庫時，rollup.js是一條必經(jīng)之路。

Rollup 的好處

• Tree Shaking: 自動移除未使用的代碼, 輸出更小的文件
• Scope Hoisting: 所有模塊構(gòu)建在一個函數(shù)內(nèi), 執(zhí)行效率更高
• Config 文件支持通過 ESM 模塊格式書寫
• 可以一次輸出多種格式:IIFE, AMD, CJS, UMD, ESM
• Development 與 production 版本: .js, .min.js
• 文檔精簡

基礎(chǔ)插件

• rollup-plugin-alias: 提供 modules 名稱的 alias 和 reslove 功能.
• rollup-plugin-babel: 提供 Babel 能力, 需要安裝和配置 Babel (這部分知識不在本文涉及)
• rollup-plugin-eslint: 提供 ESLint 能力, 需要安裝和配置 ESLint (這部分知識不在本文涉及)
• rollup-plugin-node-resolve: 解析 node_modules 中的模塊
• rollup-plugin-commonjs: 轉(zhuǎn)換 CJS -> ESM, 通常配合上面一個插件使用
• rollup-plugin-replace: 類比 Webpack 的 DefinePlugin , 可在源碼中通過 process.env.NODE_ENV 用于構(gòu)建區(qū)分 Development 與 Production 環(huán)境.
• rollup-plugin-filesize: 顯示 bundle 文件大小
• rollup-plugin-uglify: 壓縮 bundle 文件
• rollup-plugin-serve: 類比 webpack-dev-server, 提供靜態(tài)服務(wù)器能力

安裝和使用

安裝

npm i rollup -g

配置 script 命令

{
    "clean": "rimraf dist",
    "start": "yarn run clean && cross-env NODE_ENV=development rollup -w -c scripts/rollup.config.dev.js",
    "build": "yarn run clean && cross-env NODE_ENV=production rollup -c scripts/rollup.config.prod.js",
}

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()),
    ],
};

rollup vs webpack

webpack 的特點

誕生于2012年，目前Javascript社區(qū)使用得比較多的構(gòu)建工具。它的出現(xiàn)，解決了當(dāng)時的構(gòu)建工具不能處理的問題——構(gòu)建復(fù)雜的單頁面應(yīng)用(SPA)。它是一個強力的模塊打包器。 所謂包(bundle)就是一個 JavaScript 文件，它把一堆資源(assets)合并在一起，以便它們可以在同一個文件請求中發(fā)回給客戶端。 包中可以包含 JavaScript、CSS 樣式、HTML 以及很多其它類型的文件。

1. 代碼分割
2. loader 加載器
3. 智能解析
4. 插件系統(tǒng)

rollup

Rollup是下一代JavaScript模塊打包工具。開發(fā)者可以在你的應(yīng)用或庫中使用ES2015模塊，然后高效地將它們打包成一個單一文件用于瀏覽器和Node.js使用。 Rollup最令人激動的地方，就是能讓打包文件體積很小。這么說很難理解，更詳細(xì)的解釋：相比其他JavaScript打包工具，Rollup總能打出更小，更快的包。因為Rollup基于ES2015模塊，比Webpack和Browserify使用的CommonJS模塊機制更高效。這也讓Rollup從模塊中刪除無用的代碼，即tree-shaking變得更容易。

1. 自動tree-shaking
2. 支持的打包模式多

總結(jié)

webpack對于代碼分割和靜態(tài)資源導(dǎo)入有先天優(yōu)勢，支持熱模塊替換，rollup 不支持。但是 rollup 對于代碼的 tree-shaking 和 es6模塊有算法優(yōu)勢的支持。
開發(fā)應(yīng)用用 webpack 開發(fā)庫的時候 rollup