Rollup

ESModule打包器

自动开启TreeShaking

yarn add rollup --dev
yarn rollup  // 启动会有帮助信息
yarn rollup ./src/index.js --format iife  // 打包结果会输出到控制台
yarn rollup ./src/index.js --format iife --file dist/bundle.js  // 输出文件

// rollup.config.js
// yarn rollup --config rollup.config.js
module.exports = {
  input: 'src/index',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  }
}

1.使用插件

yarn add rollup-plugin-json --dev

import json from 'roolup-plugin-json'

module.exports = {
  input: 'src/index',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    json()
  ]
}
// yarn rollup --config

2.rollup加载npm

就可以使用import了

// yarn add rollup-plugin-node-resolve
import json from 'rollup-plugin-json'
import resolve from 'rollup-plugin-node-resolve'

module.exports = {
  input: 'src/index',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    json(),
    resolve()
  ]
}

3.rollup加载CommonJS

可以导入module.exports

// yarn add rollup-plugin-commonjs
import commonjs from ' rollup-plugin-commonjs'
plugins: [
  commonjs()
]

4.rollup代码拆分

输出格式不能是iife (amd )

output: {
  // file: 'dist/bundle.js',
  // format: 'iife'
  dir: 'dist',   // 输出多个文件
  format: 'amd'
}

import('./logger').then(({ log }) => {
  log('code splitting~')
})

5.rollup多入口打包

会自动代码拆分，输出格式不能是iife

// input: ['src/index.js', 'src/album.js'],
  input: {
    foo: 'src/index.js',
    bar: 'src/album.js'
  },
  output: {
    dir: 'dist',
    format: 'amd'
  }

<!-- 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库

应用程序：webpack

库/框架: rollup