rollup常用插件

@rollup/plugin-commonjs 插件

一个Rollup插件，用于将CommonJS模块转换为ES6，这样它们就可以包含在Rollup包中

安装

npm install @rollup/plugin-commonjs --save-dev

使用方法

// rollup.config.js

import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [commonjs()]
};

@rollup/plugin-node-resolve 插件

使用 "node 解析算法" 来定位模块，用于使用 node_modules 中的第三方模块。

安装

npm install @rollup/plugin-node-resolve --save-dev

使用方法

// rollup.config.js
import { babel } from '@rollup/plugin-babel';

const config = {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'es'
  },
  plugins: [babel({ babelHelpers: 'bundled' })]
};

export default config;

@rollup/plugin-babel 插件

一个 Rollup 插件，用于 Rollup 和 Babel 之间的无缝集成。

安装

npm install @rollup/plugin-babel --save-dev

使用方法

// rollup.config.js
import { babel } from '@rollup/plugin-babel';

const config = {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'es'
  },
  plugins: [babel({ babelHelpers: 'bundled', exclude: 'node_modules/**' })]
};

export default config;

@rollup/plugin-alias 插件

一个Rollup插件，用于在捆绑包时定义别名。

安装

npm install @rollup/plugin-alias --save-dev
# or
yarn add -D @rollup/plugin-alias

使用方法

import alias from '@rollup/plugin-alias';

module.exports = {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [
    alias({
      entries: [
        { find: 'utils', replacement: '../../../utils' },
        { find: 'batman-1.0.0', replacement: './joker-1.5.0' }
      ]
    })
  ]
};

@rollup/plugin-beep 插件

通过CLI或API调用rollup。如果构建产生任何错误，插件将向stderr写入一个“beep”字符，在大多数系统上都应该可以听到。

安装

npm install @rollup/plugin-beep --save-dev

使用方法

const beep = require('@rollup/plugin-beep');

module.exports = {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [beep()]
};

@rollup/plugin-run 插件

一个Rollup插件，一旦你的包构建好，它就会在Node中运行。 与使用nodemon相比，使用这个插件可以更快地得到结果。

安装

npm install @rollup/plugin-run --save-dev

使用方法

import run from '@rollup/plugin-run';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/index.js',
    format: 'cjs'
  },
  plugins: [run()]
};

@rollup/plugin-strip 插件

Rollup插件，用于删除调试器语句和assert等函数。从您的代码中Equal和console.log。

安装

npm install @rollup/plugin-strip --save-dev

使用方法

import strip from '@rollup/plugin-strip';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [
    strip({
      labels: ['unittest']
    })
  ]
};

@rollup/plugin-url 插件

一个 Rollup 插件，将文件导入为 data-URIs 或 esm 格式。

安装

npm install @rollup/plugin-url --save-dev

使用方法

import url from '@rollup/plugin-url';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [url()]
};

@rollup/plugin-json 插件

一个Rollup插件，将.json文件转换为ES6模块。

安装

npm install @rollup/plugin-json --save-dev

使用方法

import json from '@rollup/plugin-json';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [json()]
};

@rollup/plugin-terser 插件

一个Rollup插件，用terser生成一个缩小的bundle。

安装

npm install @rollup/plugin-terser --save-dev

使用方法

import terser from '@rollup/plugin-terser';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [
     terser({
     //指示插件使用特定数量的cpu线程。
      maxWorkers: 4
    })]
};

@rollup/plugin-terser 插件

一个Rollup插件，支持打包vue组件。

安装

npm i rollup-plugin-vue

使用方法

const options = {
include: string | RegExp | (string | RegExp)[]
  exclude: string | RegExp | (string | RegExp)[]
 
  // use 'node' if compiling for SSR
  target: 'node' | 'browser'
 
  // if true, will attach __file to component even in production.
  // defaults to false.
  exposeFilename: boolean
 
  // if true, handle preprocessors directly instead of delegating to other
  // rollup plugins
  // defaults to false.
  preprocessStyles?: boolean
  cssModulesOptions?: {
    // https://github.com/css-modules/postcss-modules#usage
  }
 
  // these are simply passed on to @vue/compiler-sfc
  compiler
  compilerOptions
  transformAssetUrls
  preprocessCustomRequire
}
import vuePlugin from 'rollup-plugin-vue'
 
export default {
  plugins: [
    vuePlugin(options)
  ]
}

@rollup/plugin-json 插件

一个Rollup插件，将.json文件转换为ES6模块。

安装

npm install @rollup/plugin-json --save-dev

使用方法

import json from '@rollup/plugin-json';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [json()]
};

rollup-plugin-postcss 插件

Rollup和PostCSS之间的无缝集成。

安装

yarn add postcss rollup-plugin-postcss --dev

使用方法

// rollup.config.js
import postcss from 'rollup-plugin-postcss'

export default {
  plugins: [
    postcss({
      plugins: []
    })
  ]
}

如果想使用Sass/Stylus/Less，需要安装额外的插件

• For Sass install node-sass: yarn add node-sass --dev
• For Stylus Install stylus: yarn add stylus --dev
• For Less Install less: yarn add less --dev
• That's it, you can now import .styl .scss .sass .less files in your library.