esModule 打包器

• cpnm i rollup
• rollup ./src/index.js --format iife --file dist/bound.js
• 配置文件 rollup.config.js
• rollup --conifg使用配置文件打包
• 自动开启了tree-shaking,没有用到的模块不会打包
• 采用配置文件运行 npx rollup --config

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  }
}

插件

import json from 'rollup-plugin-json'

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    json()
  ]
}

第三方模块

• rollup-plugin-node-resolve 来支持对第三方npm模块，只能处理esModule模块

import json from 'rollup-plugin-json'
import resolve from 'rollup-plugin-node-resolve'

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

加载commonJs模块

• rollup-plugin-commonjs 来支持commonJs模块

import json from 'rollup-plugin-json'
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'

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

代码拆分

• 使用es动态导入，rollup会自动分包， --format不能使用iife，因为这个模式是把所有模块放到一个函数中，采用amd方式打包 ,同时配置输出要采用dir文件夹输出方式

import('./logger').then(({ log }) => {
  log('code splitting~')
})
//config.js
export default {
  input: 'src/index.js',
  output: {
    // file: 'dist/bundle.js',
    // format: 'iife'
    dir: 'dist',
    format: 'amd'
  }
}

多入口打包

• amd方式打包的文件页面需要用require.js去解析，通过script data-main指定入口文件

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

对比webpack

1. 优点

• 输出结果更扁平
• 自动移除未引用代码
• 打包结果可读

2. 缺点

• 加载非es第三方模块复杂
• 模块最终打包到一个函数，无法实现HMR模块热替换
• 浏览器环境代码拆分依赖AMD库（require.js）
  开发应用采用webpack
  开发js框架或者库 采用rollup

parcel

• 零配置打包器
• 支持热替换
• 自动安装依赖
• 支持动态导入拆分代码
• cnpm i parcel-bundler
• npx parcel src/*.html 进行开发环境运行
• npx parcel build src/*.html 生成环境打包

if (module.hot) {
  module.hot.accept(() => {
    console.log('hmr')
  })
}