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

项目

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 黑客帝国 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值