核心概念

同Webpack一样，Rollup也有以下几大核心概念：

• input：入口文件，类比于Webpack的entry，它指明了库文件入口位置。
• output：输出位置，它指明了打包后的输出信息，包括：输出目录、打包文件名、输出格式等。
• plugins：插件，Rollup在构建过程中，插件可提供一些辅助功能，例如：alias别名解析、Babel进行ES6转义等。
• external：当库依赖于其它第三方库时，我们不需要把这些第三方库一起打包，而是应该把依赖写在external里面。

Rollup同样适合使用配置文件的做法来配置打包的选项，一个配置案例如下：

// rollup.config.js
import json from '@rollup/plugin-json'
import terser from '@rollup/plugin-terser'

export default {
  input: 'src/main.js',
  output: [
    { file: 'dist/vue.js', format: 'umd', name: 'Vue' },
    { file: 'dist/vue.common.js', format: 'cjs', name: 'Vue' },
    { file: 'dist/vue.esm.js', format: 'es', name: 'Vue' }
  ],
  plugins: [
    json(),
    terser()
  ],
  external: ['lodash'],
}

常用输出构建格式说明：

• umd：此选项构建出来的库文件是一个通用模式，可以通过不同的方式去使用：script标签引入、CommonJs规范引入和RequireJs规范引入等。
• cjs: 此选项构建出来的库文件主要为CommonJs规范，可在Node环境中使用。
• es：此版本构建出来的库文件主要为ES Module规范，可在支持ES Module，也就是import/export的环境中使用。