rollup插件

rollup插件

1.rollup-plugin-buble插件

rollup.js打包的过程中进行代码编译，将ES6+代码编译成ES2015标准
npm i -D rollup-plugin-buble

配置文件里引入

import buble from 'rollup-plugin-buble'
export default {
  input: ...,
  output: ...,
  plugins: [
    buble()//使用resolve
  ]
}

2. rollup-plugin-alias插件

alias插件提供了为模块起别名的功能
npm i -D rollup-plugin-alias
配置文件里引入

import alias from 'rollup-plugin-alias'
export default {
  input: ...,
  output: ...,
  plugins: [
    alias({
      resolve: ['.jsx', '.js'],
      entries: {
        something: '../../../something',
        'somelibrary-1.0.0': './mylocallibrary-1.5.0',
      }
    })
  ]
}

3.rollup-plugin-flow-no-whitespace插件

flow插件用于在rollup.js打包过程中清除flow类型检查部分的代码
npm i -D rollup-plugin-flow-no-whitespace

import flow from 'rollup-plugin-flow-no-whitespace'
export default {
  input: ...,
  output: ...,
  plugins: [
   flow()//使用flow
  ]
}

4.rollup-plugin-replace插件

replace插件的用途是在打包时动态替换代码中的内容
npm i -D rollup-plugin-replace

import replace from 'rollup-plugin-replace'
export default {
  input: ...,
  output: ...,
  plugins: [
  replace({
      __SAM__: true //将__SAM__替换为true
    }),
  ]
}

5.rollup-plugin-terser插件

rollup.js打包过程中实现代码压缩
npm i -D rollup-plugin-terser

import { terser } from 'rollup-plugin-terser'
export default {
  input: ...,
  output: ...,
  plugins: [
  terser({
      output: {
        ascii_only: true // 仅输出ascii字符
      },
      compress: {
        pure_funcs: ['console.log'] // 去掉console.log函数
      }
    }),
  ]
}

6.intro和outro配置

打包配置
intro：在打包好的文件的块的内部(wrapper内部)的最顶部插入一段内容
outro：在打包好的文件的块的内部(wrapper内部)的最底部插入一段内容
banner：在打包好的文件的块的外部(wrapper外部)的最顶部插入一段内容
footer：在打包好的文件的块的外部(wrapper外部)的最底部插入一段内容

export default {
  input: ...,
  output: ...,
  plugins: [
    {
      intro: '// this is a intro comment',
      outro: '// this is a outro comment'
    }
  ]
}