Rollup使用記錄

rollup也是一款打包工具，比webpack要輕量許多，用於彌補gulp的無tree-shaking(這個技術能夠移除沒有使用的代碼)是很好的選擇，最大的用途是打包生產一個庫文件，好比sdk.js之類。雖然webpack也能夠作到，可是webpack較重，打包後的文件有部分webpack內部代碼，如__webpack__require之類的函數定義，給人一種不乾淨的感受。而rollup打出來的包就很乾淨，沒有其餘冗餘代碼。

鯨魚 注
我用它打包過：

• 單個d3圖形包

使用方式

經常使用插件

rollup-plugin-alias: 提供modules名稱的 alias 和reslove 功能

rollup-plugin-babel: 提供babel能力

rollup-plugin-eslint: 提供eslint能力

rollup-plugin-url

rollup-plugin-postcss

postcss-preset-env

import postcss from 'rollup-plugin-postcss'
import postcssPresetEnv from 'postcss-preset-env'
export default {
  plugins: [
    postcss({
      extract: './dist/ide_canvas.css',
      modules: true,
      // sourceMap: true,
      plugins: [
        postcssPresetEnv({
          stage: 0,
          features: {
            'nesting-rules': true
          }
        })
      ]
    }),
  ]
}

rollup-plugin-node-resolve: 解析 node_modules 中的模塊

rollup-plugin-commonjs: 轉換 CJS -> ESM, 一般配合上面一個插件使用

rollup-plugin-serve: 類比 webpack-dev-server, 提供靜態服務器能力

import serve from 'rollup-plugin-serve'
export default { 
  plugins: [
    serve({
      open: true,
      contentBase: './'
    })
  ]
}

rollup-plugin-filesize: 顯示 bundle 文件大小

rollup-plugin-uglify: 壓縮 bundle 文件

rollup-plugin-replace: 類比 Webpack 的 DefinePlugin , 可在源碼中經過 process.env.NODE_ENV 用於構建區分 Development 與 Production 環境.

rollup-plugin-butternut: 也是壓縮文件

rollup-plugin-typescript:

import typescript from 'rollup-plugin-typescript'
export default {
  plugins: [
    typescript({
      target: 'ESNext'
    })
  ]  
}

// tsconfig.json

{
  "compilerOptions": {
    "outDir": "lib",
    "module": "es2015",
    "target": "es5",
    "noEmitOnError": true,
    "lib": ["es2015", "dom"]
    // "noImplicitAny": true
    // "strict": true
    // "strictFunctionTypes": true
  },
  "include": ["./src/*.ts"]
  // "include": ["./types/*.ts"]
}

經過插件導入commonjs模塊

須要兩個插件共用

• rollup-plugin-commonjs
• rollup-plugin-node-resolve

// rollup.config.js
import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';

export default {
  input: 'main.js',
  output: {
    file: 'bundle.js',
    format: 'iife'
  },
  plugins: [
    nodeResolve({
      jsnext: true,
      main: true
    }),

    commonjs({
      // non-CommonJS modules will be ignored, but you can also
      // specifically include/exclude files
      include: 'node_modules/**',  // Default: undefined
      exclude: [ 'node_modules/foo/**', 'node_modules/bar/**' ],  // Default: undefined
      // these values can also be regular expressions
      // include: /node_modules/

      // search for files other than .js files (must already
      // be transpiled by a previous plugin!)
      extensions: [ '.js', '.coffee' ],  // Default: [ '.js' ]

      // if true then uses of `global` won't be dealt with by this plugin
      ignoreGlobal: false,  // Default: false

      // if false then skip sourceMap generation for CommonJS modules
      sourceMap: false,  // Default: true

      // explicitly specify unresolvable named exports
      // (see below for more details)
      namedExports: { './module.js': ['foo', 'bar' ] },  // Default: undefined

      // sometimes you have to leave require statements
      // unconverted. Pass an array containing the IDs
      // or a `id => boolean` function. Only use this
      // option if you know what you're doing!
      ignore: [ 'conditional-runtime-dependency' ]
    })
  ]
};

現實項目示例能夠戳 vue源碼這裏

而後在配置的plugins裏面使用

腳手架

roller-cli

參考

實例參考
Rollup經常使用配置
rollup.js 文檔
github
Rollup.js 實戰學習筆記
使用Rollup打包構建libary