前端工程化（四）

Rollup

Rollup 仅仅是一个 ESM 打包器
初衷就是只提供一个高效的 ESModule 打包器
构建出结构扁平，性能出众的类库

rollup 快速上手

$ yarn add rollup -D // 自动提供cli程序
$ yarn rollup ./src/index.js --format iife --file dist/bundle.js

Rollup 打包的结果简洁清晰，就是将各个模块的代码按照引入的顺序拼接在一起，默认开启 Tree Shaking

配置文件

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

$ yarn add rollup --config // 必须手动告诉rollup 使用 配置文件

插件使用
rollUp 自身只是对代码打包。只识别 ESModule 的导入导出
如果要实现其他需求，需要使用对应的插件完成，插件是 Rollup 唯一的扩展方式

import json from 'rollup-plugin-json';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife', // 指定输出格式为自执行函数
  },
  plugins: [json()], // 使用rollup-plugin-json插件将JSON文件转化为js文件
};

加载 npm 模块

  import resolve from 'rollup-plugin-node-resolve';
  export default {
    input: 'src/index.js',
    output: {
      file: 'dist/bundle.js',
      format: 'iife',
    },
    plugins: [resolve()],
  };

// 导入模块成员
import _ from 'lodash-es'; // 如果不安装rollup-plugin-node-resolve，rollup无法识别node_modules下的lodash-es模块。需要注意的是。我们安装的是lodash的ESModele模块才能被正确打包
import { log } from './logger';
log(_.camelCase('hello world'));

rollup 加载 CommonJS

  import commonjs from 'rollup-plugin-commonjs';
  export default {
    input: 'src/index.js',
    output: {
      file: 'dist/bundle.js',
      format: 'iife',
    },
    plugins: [commonjs()],
  };

分包

export default {
  input: 'src/index.js',
  output: {
    dir: 'dist', // 当有多个文件输出时，应该配置dir参数
    format: 'amd', // 因为自执行函数的规范无法分包，这里改为AMD规范输出,浏览器无法识别ADM规范，所以还应该在html中引入require.js
  },
};

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

多入口打包
配置多入口会将多入口中的公共部分自动单独提取成一个公共 js 文件

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

Rollup 选用原则
让专业的工具做专业的事情、Webpack 大而全、Rollup 小而美
优点：
- 输出结果更加扁平
- 自动移除未引用代码
- 打包结果依然可读
缺点:
- 加载非 ES module 的第三方模块需要配置插件
- 模块最终被打包到一个函数中，无法实现 HMR
- 代码拆分必须要依赖 AMD 库

经验法则：库/框架开发使用 Rollup,应用程序的开发使用 Webpack

目前 React/vue 一些库/框架中都是使用 Rollup 打包,而并非 webpack
。当然 webpack 也可以用在库或者框架的开发中，以上的经验法则只是为了体现术业有专攻。

Parcel
一个傻瓜式的前端应用打包器
我们只需要执行一行命令，剩下的工作在 Parcal 内部帮我们完成

$ yarn add parcel-bundler -D
$ yarn parcel src/index.html // 自动开启一个本地服务器。类似于webpack dev server 官方建议使用html文件作为打包入口
$ yarn parcel build src/index.html // 打包使用

特点：

零配置(核心特点)
支持自动刷新，HML 模块热跟新。
自动安装依赖
支持加载其他模快资源，同样零配置
支持动态导入/分包
支持 sourceMap
默认开启多进程构建，构建速度快，wabpack 中也可以使用 happypack 实现
所有资源文件打包自动压缩。自动分离 css 文件

最后编辑于：2020.07.21 00:02:07