rollup学习整理-2-插件详解

Rollup 学习整理 2 插件详解

plugins 插件

1. rollup-plugin-node-resolve

帮助 Rollup 查找外部模块，然后安装，相关配置

    import resolve from 'rollup-plugin-node-resolve';
    
    export default {
        ...
        plugins: [
            resolve({
              module: true, // ES6模块尽可能使用 ‘module’字段
              jsnext: true,
              main: true 
            }),
        ],
    }

2. rollup-plugin-commonjs

rollup-plugin-node-resolve 插件可以解决 ES6模块的查找导入，但是npm中的大多数包都是以CommonJS模块的形式出现的，所以需要使用这个插件将CommonJS模块转换为 ES2015 供 Rollup 处理

    import resolve from 'rollup-plugin-node-resolve';
    import commonjs from 'rollup-plugin-commonjs';
    
    export default {
        ...
        plugins: [
            resolve(),
            commonjs({
              include: 'node_modules/**', // 包括
              exclude: [],  // 排除
            }),
        ],
    }

3. rollup-plugin-babel

通过这个插件可以方便的使用 javascript 的新特性，配置上稍微麻烦一些，如下

安装相应插件（包括配置babel 需要的插件）

    sudo npm install --save-dev 
                babel-core
                babel-plugin-external-helpers
                babel-plugin-transform-runtime
                babel-preset-env
                babel-preset-stage-2
                babel-register
                rollup-plugin-babel

rollup.config.js 中配置 babel

    plugins: [
        resolve(),
        commonjs(),
        babel({
            exclude: 'node_modules/**', // 排除引入的库
            runtimeHelpers: true // 配置runtime，不设置会报错
        }), 
    ],

创建 .babelrc babel配置文件

    {
      "presets": [
        ["env", {
          "modules": false,
          "targets": {
            "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
          }
        }],
        "stage-2"
      ],
      "plugins": ["transform-runtime", "external-helpers"],
      "env": {
        "test": {
          "presets": ["env", "stage-2"],
          "plugins": ["istanbul"]
        }
      }
    }

4. rollup-plugin-uglify

压缩 js 代码

    import uglify from 'rollup-plugin-uglify';
        plugins: [
        resolve(),
        commonjs(),
        babel({
            exclude: 'node_modules/**',
            runtimeHelpers: true
        }),
        uglify(),   
    ],

5. rollup-plugin-eslint

代码检查

import eslint from 'rollup-plugin-eslint';
    plugins: [
        resolve(),
        commonjs(),
        eslint({
            include: ['src/**/*.js'] // 需要检查的部分
        }),
        babel({
            exclude: 'node_modules/**',
            runtimeHelpers: true
        }),
        uglify(),   
    ],

另外，需要创建 .eslintrc 文件配置 eslint 规则

6. rollup-plugin-replace

变量替换，可以将动态设置的变量提取出来在配置文件中设置

    import replace from 'rollup-plugin-replace';
    plugins: [
        resolve(),
        commonjs(),
        replace({
            include: 'src/maths.js', // 指定可以使用变量的文件路径
            exclude: 'node_modules/**',
              ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
              HOST: JSON.stringify('http://111/111')
        })
    ],

在 src/maths.js文件中即可使用 ENV HOST

7. rollup-plugin-sass

注意： sass 文件转化已经使用另外一个插件代替 查看插件8-- rollup-plugin-postcss

提取 样式文件

    import sass from 'rollup-plugin-sass';
    export default {
        plugins: [
            resolve(),
            commonjs(),
            sass({
                output: './dist/css/bundle.css'
            }),
            babel({
                exclude: 'node_modules/**',
                runtimeHelpers: true
            }), 
        ],
    }

8. rollup-plugin-postcss 实现 postcss, autoprefixer, cssnano

2018.04.03 修改

提取样式文件（sass 或者 less 等）添加浏览器前缀 以及压缩

# 注意如果要使用 .sass .scss 类型样式，需要先安装 node-sass
# .less 要安装 yarn add --dev less
sudo yarn add --dev node-sass

# 然后安装
sudo yarn add --dev rollup-plugin-postcss autoprefixer cssnano

    import postcss from 'rollup-plugin-postcss';
    import autoprefixer from 'autoprefixer';
    import cssnano from 'cssnano';
       
    plugins: [
        resolve(),
        commonjs(),
        postcss({
            plugins: [autoprefixer, cssnano],
            extract: 'dist/css/bundle.css' // 输出路径
        }),
        babel({
            exclude: 'node_modules/**',
            runtimeHelpers: true
        }), 
    ]

9. rollup-watch

监听文件变化的插件

    sudo npm install --save-dev rollup-watch

然后在 package.json 中设置 scripts属性即可

    "build": "rollup -c",
    "dev": "rollup -c -w"

10. rollup-plugin-serve

开启本地服务

    import serve from 'rollup-plugin-serve'
    plugins: [
        resolve(),
        commonjs(),
        babel({
            exclude: 'node_modules/**',
            runtimeHelpers: true
        }),
        (process.env.NODE_ENV === 'production' && uglify()),
        replace({
            exclude: 'node_modules/**',
              ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
              HOST: JSON.stringify('http://111/111')
        }),
        serve({
            open: true, // 是否打开浏览器
            contentBase: './', // 入口HTML 文件位置
            historyApiFallback: true, // Set to true to return index.html instead of 404
            host: 'localhost',
            port: 10001,
        })
    ]

11. rollup-plugin-livereload

实时刷新页面，配合 rollup-plugin-serve 使用

    import livereload from 'rollup-plugin-livereload';

    plugins: [
        resolve(),
        commonjs(),
        serve({
            open: true,
            contentBase: './',
            historyApiFallback: true,
            host: 'localhost',
            port: 10001,
        }),
        livereload()
    ]

相关文章

1. rollup学习整理-1-api详解
2. rollup学习整理-2-插件详解