美文网首页
Rollup常用配置

Rollup常用配置

作者: 风之化身呀 | 来源:发表于2018-01-15 00:07 被阅读2937次

    0、前言

    rollup也是一款打包工具,比webpack要轻量许多,用于弥补gulp的无tree-shaking是很好的选择,最大的用途是打包生产一个库文件,比如sdk.js之类。虽然webpack也可以做到,但是webpack较重,打包后的文件有部分webpack内部代码,如__webpack__require之类的函数定义,给人一种不干净的感觉。而rollup打出来的包就很干净,没有其他冗余代码。

    1、使用方式

    首先安装rollup

    npm i rollup
    

    再看rollup的几种调用形式

    • 命令行运行
    rollup src/main.js -o rel/bundle.js  -f cjs //将main.js(es5)编译输出至bundle.js(commonjs)
    
    • 配置文件形式
    //新建一个rollup.config.js 
    export default {
      entry: 'src/main.js',
      format: 'cjs',
      dest: 'rel/bundle.js' // 输出文件
    };
    

    然后执行

    rollup -c   //当你的配置文件另有其名(dev),执行 rollup -c rollup.config.dev.js
    
    • 模块形式(方便配合gulp等其他工具)
      如将rollup.config.js 写出这样
    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'
        });
    });
    

    就可用node rollup.config.dev.js 直接执行

    2、配置项

    • input
      入口文件地址
    • output
    output:{
        file:'bundle.js', // 输出文件
        format: 'cjs,  //  五种输出格式:amd /  es6 / iife / umd / cjs
        name:'A',  //当format为iife和umd时必须提供,将作为全局变量挂在window(浏览器环境)下:window.A=...
        sourcemap:true  //生成bundle.map.js文件,方便调试
    }
    
    • plugins
      最常用的就是babel插件了,比较不爽的是,babel 的预设不像 webpack 可以直接写在配置文件里,而还是得独立写个“src/.babelrc”(注意我们可以写在 src 下,而不是非得放在项目根目录下),还得确保装了插件:npm i rollup-plugin-babel
    // import babel from 'rollup-plugin-babel';
    plugins:[babel()]
    
    // .babelrc        npm i -D babel-preset-env babel-plugin-external-helpers
    {
      "presets": [
        ["env", {
          "modules": false
        }]
      ],
      "plugins": ["external-helpers"]     //只引入一次babel的helper函数
    }
    
    • external
    external:['lodash'] //告诉rollup不要将此lodash打包,而作为外部依赖
    
    • global
    global:{
        'jquery':'$'              //告诉rollup 全局变量$即是jquery
    }
    

    3、注意点

    • rollup无法识别node_modules中的包,需要安装插件npm install --save-dev rollup-plugin-node-resolve,然后在plugins中使用:
    import resolve from 'rollup-plugin-node-resolve';
    export default {
      input: 'src/main.js',
      output: {
        file: 'bundle.js'
        format: 'cjs'
      },
      plugins: [ resolve() ]
    };
    
    • node_modules中的包大部分都是commonjs格式的,要在rollup中使用必须先转为ES6语法,为此需要安装插件 rollup-plugin-commonjs

    4、附一份react-redux开源项目的rollup配置文件

    import nodeResolve from 'rollup-plugin-node-resolve'     // 帮助寻找node_modules里的包
    import babel from 'rollup-plugin-babel'                             // rollup 的 babel 插件,ES6转ES5
    import replace from 'rollup-plugin-replace'                       // 替换待打包文件里的一些变量,如 process在浏览器端是不存在的,需要被替换
    import commonjs from 'rollup-plugin-commonjs'              // 将非ES6语法的包转为ES6可用
    import uglify from 'rollup-plugin-uglify'                              // 压缩包
    
    const env = process.env.NODE_ENV
    
    const config = {
      input: 'src/index.js',
      external: ['react', 'redux'],                           // 告诉rollup,不打包react,redux;将其视为外部依赖
      output: { 
        format: 'umd',                  // 输出 UMD格式,各种模块规范通用
        name: 'ReactRedux',         // 打包后的全局变量,如浏览器端 window.ReactRedux 
        globals: {
          react: 'React',                                         // 这跟external 是配套使用的,指明global.React即是外部依赖react
          redux: 'Redux'
        }
      },
      plugins: [
        nodeResolve(),
        babel({
          exclude: '**/node_modules/**'
        }),
        replace({
          'process.env.NODE_ENV': JSON.stringify(env)
        }),
        commonjs()
      ]
    }
    
    if (env === 'production') {
      config.plugins.push(
        uglify({
          compress: {
            pure_getters: true,
            unsafe: true,
            unsafe_comps: true,
            warnings: false
          }
        })
      )
    }
    
    export default config
    

    相关文章

      网友评论

          本文标题:Rollup常用配置

          本文链接:https://www.haomeiwen.com/subject/dhiloxtx.html