Rollup模块打包器

Rollup

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码。

Rollup优劣

• Rollup优势：

  • 输出结果更加扁平，执行效率自然更高
  • 自动移除未引用代码
  • 打包结果依然完全可读

• Rollup缺陷：

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

如果正在开发应用程序，需要引用第三方模块、需要使用HMR提升开发效率，应用大时需要使用分包，这些需求Rollup在满足上都会有欠缺；而在开发一个框架或类库，很少依赖第三方模块，像React/Vue都在使用Rollup作为模块打包器。

Webpack大而全，Rollup小而美

插件

• rollup-plugin-node-resolve，可以告诉 Rollup 如何查找外部模块
• rollup-plugin-commonjs，将 CommonJS 转换成 ES2015 模块的
• rollup-plugin-json，令 Rollup 从 JSON 文件中读取数据
• rollup-plugin-uglify，压缩js代码
• rollup-watch，监听文件变化
• rollup-plugin-serve，开启本地服务
• rollup-plugin-livereload，实时刷新页面

rollup.config配置

import json from 'rollup-plugin-json'
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import babel from 'rollup-plugin-babel'
import serve from 'rollup-plugin-serve'
import {
    
     uglify } from 'rollup-plugin-uglify'

const isProd = process.env.NODE_ENV === 'production'

export default {
    
    
  input: 'src/main.js',
  output: {
    
    
    name: 'bundle',
    // file: 'dist/bundle.js',
    dir: 'dist',
    format: 'iife', // 支持的多种输出格式(有amd, cjs, es, iife 和 umd)
  },
  plugins: [
    resolve({
    
    
      jsnext: true,  // 该属性是指定将Node包转换为ES2015模块
      // main 和 browser 属性将使插件决定将那些文件应用到bundle中
      main: true,  // Default: true 
      browser: true // Default: false
    }),
    json(),
    commonjs(),
    babel({
    
    
      exclude: 'node_modules/**'
    }),
    serve({
    
    
      open: false,
      contentBase: './',
      historyApiFallback: true,
      host: 'localhost',
      port: 10005
    }),
    (isProd && uglify()),
  ]
}

项目