Rollup

esm的打包器，更为小巧，不支持类似HRM高级特性。
提供一个充分利用ESM各项特性的高效打包器。

1. 使用Rollup, Rollup自动支持Tree-Sharking

rollup.config.js也是运行在node环境中， 但是Rollup会直接处理这个配置文件， 所以配置文件里面可以是esm语法

yarn add rollup --dev
// 输入文件：./src/index.js 
// 输出格式：--format iife（浏览器格式：自执行函数格式）
// 输出文件：--file dist/bunlde.js
yarn rollup ./src/index.js --format iife --file dist/bunlde.js

// 配置文件 rollup.config.js
// 默认不走config，需要指定 --config
// 命令 rollup --config
// 命令 rollup --config ./rollup.config.js
export default {
  input:  "./src/index.js",
  output: {
    file: "dist/bundle.js",
    format: "iife"
  }
}

2. 插件， 插件是Rollup唯一的扩展方式

// 处理json文件
import json from "rollup-plugin-json"
// 加载npm模块, 默认不会找到路径
import resolve from "rollup-plugin-node-resolve"
// 加载commonJS模块
import commonjs from "rollup-plugin-commonjs"

export default {
  input:  "./src/index.js",
  output: {
    file: "dist/bundle.js",
    format: "amd"
  },
  plugins:[
    json(),
    resolve(),
    commonjs()
  ]
}

3. 代码拆分

export default {
  input: "./src/index.js",
  output: {
    // 拆分需要输出多个文件， 这里指定是文件目录
    dir: "dist",
    // 模块打包只能commonJS或者AMD格式, 为什么不能esm？
    format: "amd" 
  }
}

import("./logger.js").then(({log}) => {})

4. 多入口文件打包

export default {
  //input: ["a.js", "b.js"]
  input: {
    index:  "index.js",
    foo: "foo.js"
  },
  output: {
    dir: "dist",
    format: "amd", // 打包完后，浏览器环境依赖require.js等实现amd规范的库
  }
}
 
// index.html
  <!-- AMD 标准格式的输出 bundle 不能直接引用 -->
  <!-- <script src="foo.js"></script> -->
  <!-- 需要 Require.js 这样的库 -->
  <script src="https://unpkg.com/requirejs@2.3.6/require.js" data-main="foo.js"></script>

• 优点
  适合开发框架和类库
  输出的结果更扁平，执行效率更高
  自动移除未引用代码
  打包结果依然完全可读
• 缺点
  加载非esm第三方模块比较复杂
  模块最终被打包到一个函数中，无法实现HMR
  浏览器环境中，代码拆分依赖AMD库