Rollup基础篇

基础知识

• 特性
  
  • 前端模块打包工具，可以让bundle文件最小化，避免引入冗余模块代码，有效减少文件请求大小。
• 编译
  
  • 在 Rollup 编译模块的过程中，通过 Tree-shacking 的方式来剔除各模块中最终未被引用到的方法，通过仅保留被调用到的代码块来缩减 bundle 的大小。
• Tree-shaking 的作用
  
  • 会抽取引用到的模块内容，将它们置于同一个作用域下，进而直接用变量名就可以访问各个模块的接口；而不像 webpack 这样每个模块外还要包一层函数定义，再通过合并进去的 define/require 相互调用。当然这种方法需要 ES2015 的解构赋值语法来配合，多亏了它，Rollup 才能有效地对模块内容进行可靠的静态分析。
• 使用
  
  • npm i rollup
  • rollup src/main.ts -o rel/bundle.js -f cjs
    
    • rollup 入口文件 -o 输出文件 -f cjs
    • cjs : commonJs
    • amd : AMD
    • es6 : ES6(ES2015)
    • Global : iife
    • UMD : umd

• 配置文件

  • 根目录创建 rollup.config.js
  • 配置文件内容：

  “`
  
  import resolve from ‘rollup-plugin-node-resolve’
  import commonjs from ‘rollup-plugin-commonjs’
  import uglify from ‘rollup-plugin-uglify’
  import angularOptimizer from ‘rollup-plugin-angular-optimizer’
  import babel from ‘rollup-plugin-babel’

  export default {
  entry: ‘src/main.js’, //入口
  format: ‘cjs’, //规范
  dest: ‘rel/bundle.js’, // 输出文件
  plugins:[babel(), resolve(), angularOptimizer(), commonjs(), uglify()], //使用的插件
  };
  “`

  • 执行 rollup -c
    
    • 如果你的配置文件另有其名（例如“rollup.config.dev.js”），在后面加上配置文件名即可：rollup -c rollup.config.dev.js

• 配置中的插件【plugins】

  • babel: rollup 需要独立写个文件，可以写在src下

    • 确保安装了 rollup-plugin-babel 和 babel 预设 babel-preset-es2015-rollup
      
      • npm i rollup-plugin-babel babel-preset-es2015-rollup
    • .babelrc ：

    {  "presets": ["es2015-rollup"]}

  • resolve
    
    • rollup-plugin-node-resolve
  • commonjs
    
    • rollup-plugin-commonjs
  • uglify 压缩混淆文件
    
    • rollup-plugin-uglify
  • optimizer
    
    • rollup-plugin-angular-optimizer
• 如果想要在模块中来被调用执行，可将配置文件修改为：

var rollup = require( 'rollup' );var babel = require('rollup-plugin-babel');rollup.rollup({    entry: 'src/main.js',    plugins: [ babel() ]}).then( function ( bundle ) {    bundle.write({        format: 'umd',        moduleName: 'main', //umd或iife模式下，若入口文件含 export，必须加上该属性        dest: 'rel/bundle.js'，        sourceMap:true   //利于调试    });});

之后用node直接执行： node rollup.config.dev.js
- 注意 “rollup.rollup()”返回一个带着 bundle 作为 resolve 回调参数的 Promise 对象，我们常规直接使用语法糖 bundle.write 来打包输出文件
- sourceMap:为了方便调试编译后的文件
- 这样编译后，rollup 会自动生成一个 rel/bundle.js.map 关联到 rel/bundle.js 中。也可以将其直接内联在 bundle 里而不是独立生成一个 map 文件： sourceMap: ‘inline’

参考博客
官方文档