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