rollup为什么使用rollup Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂

为什么使用rollup

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。
rollup生成代码只是把我们的代码转码成目标js并无其他,同时如果需要,他可以同时帮我们生成支持umd/commonjs/es的js代码,而webpack的繁琐和打包后的文件体积问题就不太使用简单的js库开发了。vue/react/angular都在用他作为打包工具

rollup配置

rollup可以使用命令行方式打包或者使用配置文件。配置文件基础配置如下：

// rollup.config.js
export default {
  // 核心选项
  input,     // 必须
  external,//告诉rollup不要将此配置包含的包打包，而作为外部依赖
  plugins,//各种插件使用的配置

  // 额外选项
  onwarn,

  // danger zone
  acorn,
  context,
  moduleContext,
  legacy

  output: {  // 必须 (如果要输出多个，可以是一个数组)
    // 核心选项
    file,    // 必须 打包后的存放文件
    format,  // 输出格式 amd es6 iife umd cjs
    name,//当format为iife和umd时必须提供，将作为全局变量挂在window(浏览器环境)下：window.A=...
    globals,//告诉rollup 一些全局变量

    // 额外选项
    paths,
    banner,
    footer,
    intro,
    outro,
    sourcemap,//生成bundle.map.js文件，方便调试
    sourcemapFile,
    interop,

    // 高危选项
    exports,
    amd,
    indent
    strict
  },
};

rollup插件

commonjs

插件：@rollup/plugin-commonjs

rollup默认支持的是esm,若要能对使用cjs格式的文件也进行导入打包，可以使用这个插件

文件导入定位方式

插件： @rollup/plugin-node-resolve

rollup的导入文件定位使用的是esm，与commonjs有一定的差异,如下，如果没有安装此插件，是不会找到'./answer/index.js'文件的。

import a from './answer'

在 @rollup/plugin-node-resolve 插件的帮助下，才能成功命中：'./answer/index.js' 文件。

配置babel(babel7)

插件：@babel/core"，"@babel/preset-env"，"rollup-plugin-babel",@babel/polyfill

//rollup.config.js
export default {
    /....
    plugins: {
        babel({
            exclude: 'node_modules/**',
        }),
    ]
};

//.babelrc
{
  "presets": [
    [
      "@babel/env",
      {
        "modules": false,
        "useBuiltIns": "usage"
      }
    ]
  ]
}

配置babel插件用于 Rollup 和 Babel 之间的无缝集成,可以通过 Babel 的能力将你所写的 es6/es7 代码编译转换为 es5 的，以适用那些更古老的浏览器。

const sleep = (timestamp) => {
  return new Promise((resolve) => {
    setTimeout(() => { resolve() }, timestamp)  })
}

export const printAnswer = async () => {
  await sleep(3000)
  console.log('I am awake')
}

使用@rollup/plugin-babel会将es6中的async,await语法等编译成兼容性更强的代码。

配置别名

插件：@rollup/plugin-alias

使用这个插件，你可以在引入文件时，使用一个 别名 来代替那些固定的路径。例如，本来使用正常路径导入的文件：

import home from './src/home'

使用此插件后，你可以使用别名来导入：

import home from '@/home'

报错发出“嘟嘟”声

插件： @rollup/plugin-beep

使用 @rollup/plugin-beep 插件，构建（执行命令 yarn build-beep）报错时发出“嘟嘟”声。

全局变量引入问题

插件： @rollup/plugin-inject

你可以将一些模块定义为“全局变量”，在项目中使用时无需再写 import 语句。实际在构建时，此组件会发现它们并自动在文件中补全 import 语句。

如下代码：

export const printAnswer = () => {
  console.log(_.includes([1,2,3], 1))
}

使用此插件进行打包之后：

import _ from 'lodash';

const printAnswer = () => {
  console.log(_.includes([1,2,3], 1));
};

export { printAnswer };

可见打包的产物中自动引入的所需的lodash模块。

多入口文件出口合并

插件： @rollup/plugin-multi-entry

此插件多个入口的文件，可以打包到一个 bundle 之中。

//a.js:
export const printHello = () => {
  console.log('hello')
}

//b.js
export const printHello = () => {
  console.log('hello')
}

//rollup.config.js
export default {
  input: [path.resolve(__dirname, './a.js'), path.resolve(__dirname, './b.js')],
  output: {
    dir: path.resolve(__dirname, 'out'),
    format: 'esm'
  },
};

不使用此插件，会打包为a.js 和 b.js 两个文件
使用@rollup/plugin-multi-entry插件，会打包进一个bundle之中。

打包时替换目标字符串

插件：@rollup/plugin-replace

在打包时替换文件中的目标字符串。

打包后自动执行

插件： @rollup/plugin-run

此插件作用是一旦你的 bundle 被构建，它就会在 nodejs 中运行。