Rollup打包工具

Rollup打包工具

• 小巧
• 仅仅是ESM打包器

优点：

• 输出结果更加扁平
• 自动移除未引用代码
• 打包结果依然可以完全可读

很多知名框架/ 库都在使用Rollup

缺点：

• 加载非ESM的第三方模块比较复杂
• 模块最终都被打包到一个函数中，无法实现HMR
• 浏览器环境中，代码拆分功能依赖AMD库

配置文件

rollup.config.js

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

使用插件—唯一扩展途径

• rollup-plugin-json

  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()
      ]
  }
  

  • rollup-plugin-node-resolve 应用此插件可加载npm模块

支持代码拆分，按需加载，动态导入