乐趣区

关于javascript:Rollup-适合框架和类库使用的模块打包器

jiezi

目录

  • Rollup 概述

    • Rollup vs Webpack
  • 疾速上手
  • 配置文件

  • 插件

    • rollup-plugin-json
    • rollup-plugin-node-resolve（加载 npm 模块）
    • rollup-plugin-commonjs

  • Code Splitting（代码拆分）

    • Dynamic Imports（动静导入）

  • 多入口打包

    • amd 输入格局要留神什么？
  • 指令参数参考大全

这篇文章目前旨在简略理解 Rollup 是什么并且如何上手操作，之后会再进行深入分析。

Rollup 概述

  • rollup.js 中文网、rollup.js 官网

Rollup仅仅是一款 JavaScript 模块打包器，也称为ESM 打包器，并没有像 webpack 那样有很多其余额定的性能，它能够将我的项目中散落的细小模块打包成整块的代码，能够让他们更好的运行在 浏览器环境 or Node.js 环境，目前Vue2.0 源码应用的打包器就是Rollup。

Rollup vs Webpack

Rollup与 Webpack 作用相似，然而 Rollup 更为玲珑，webpack能够在前端开发中实现前端工程化的绝大多数性能，而 Rollup 仅仅是一款 ESM 打包器，并没有其余额定的性能。

Rollup中并不反对相似 HMR 这种高级个性。然而 Rollup 诞生的目标并不是要与 webpack 全面竞争，其初衷只是提供一个高效的 ES Modules 的打包器，充分利用 ESM 的各项个性构建出构造比拟扁平，性能比拟出众的类库。

疾速上手

  1. 下载模板 Rollup-firstdemo-temp
  2. 装置模块npm i rollup -g
  3. 在命令行中执行 rollup ./src/index.js --format iife --file dist/bundle.js 能够看到在输入目录中有了一个文件夹，外面的文件输入的文件很洁净整洁，并且没有援用的模块并没有打包进去（自带Tree-shaking）
  • --format —— 指定输入文件打包格局，例如：iife是自调用函数
  • --file —— 输入文件，前面跟打印门路，不写会打印到控制台

配置文件

创立名称为 rollup.config.js 文件，同样运行在 node.js 环境中，因为 Rollup 会独自解决这个文件，所以咱们能够间接应用ES Module。

  1. 在文件中编辑
// rollup.config.js
// 这个文件中会导出一个配置对象
export default {
  // input 是打包入口文件门路
  input: 'src/index.js',
  // 输入配置
  output: {、// 输入门路及文件名
    file: 'dist/bundle.js',
    // 输入格局
    format: 'iife'
  }
}
  1. 应用命令行要增加 --config 说要应用配置文件rollup --config，默认是不应用配置文件的。
  2. rollup --config <filename>前面能够指定配置文件的名称，默认是rollup.config.js，也能够本人指定别的文件名。

插件

如果要加载其余类型的资源文件，或者是导入 CommonJS 模块，或者编译 ES6 新个性，Rollup同样反对应用插件的形式扩大。

插件是 Rollup 惟一扩大路径 ，这个与webpack 有所不同，webpack有 plugins、module、optimization 三种路径。

rollup-plugin-json

rollup-plugin-json是一个导入 JSON 文件的插件。

  1. 装置插件 npm i rollup-plugin-josn --save-dev
  2. 在 rollup-plugin.js 中配置插件
// 默认导出是一个插件函数
import json from 'rollup-plugin-json'
export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    // 是调用后果放在数组中，而不是函数放进去
    json()]
}
  1. 在 src/index.js 中调用，打包之后能够看到 json 外面的变量曾经打包进来了。
// 导入模块成员
import {log} from './logger'
import {name, version} from '../package.json'

log(name) // var name = "first";
log(version) // var version = "1.0.0";

rollup-plugin-node-resolve（加载 npm 模块）

rollup默认只能依照门路的形式加载本地模块，对于第三方模块并不能想 webpack 一样通过名称导入，所以须要通过插件解决。

  1. 装置插件 npm i rollup-plugin-node-resolve --save-dev
  2. 在 rollup-plugin.js 中配置插件
// 默认导出是一个插件函数
import json from 'rollup-plugin-json'
import resolve from 'rollup-plugin-node-resolve'
export default {
  ...
  plugins: [
    // 是调用后果放在数组中，而不是函数放进去
    json(),
    resolve()]
}
  1. 筹备一个第三方模块进行装置npm i lodash-es
  2. 在 src/index.js 中调用，能够看到 lodash-es 的相干代码也导入进去了
// 导入模块成员，这里能够应用 node 名称来导入而不是门路
import _ from 'lodash-es'
import {log} from './logger'

log(_.camelCase('hello world'))

PS:
这里应用 lodash 的ES Modules版本而不是其余版本的起因是因为 rollup 默认只能解决 ES Modules 模块，如果要援用其余版本咱们须要做额定的解决。

rollup-plugin-commonjs

加载 CommonJS 模块，目前还是有大量的 npm 模块应用 CommonJS 的形式导入成员，为了兼容就有了这个官网插件。

  1. 装置插件npm i rollup-plugin-commonjs --save-dev
  2. 在 rollup-plugin.js 中配置插件
import commonjs from 'rollup-plugin-commonjs'
export default {
  ...
  plugins: [commonjs()
  ]
}
  1. 在 src 中新建文件cjs.module.js，编写文件
module.exports = {foo: bar}
  1. 在 src/index.js 中引入，能够看到变量曾经打包进去。
// 导入模块成员
import {log} from './logger'
import cjs from './cjs.module'

log(cjs)

/* var cjs_module = {foo: bar};
*/

Code Splitting（代码拆分）

Dynamic Imports（动静导入）

动静导入，rollup外部会主动解决代码分包，
代码拆分

  1. 在 src/index.js 中引入
// import 函数返回一个 promise 对象
// then 办法参数是 module，因为模块导出的成员都会放在 module 对象中，所以能够通过解构的形式提取 log
import('./logger').then(({log}) => {log('code splitting~')
})
  1. 批改 roll.config.js 中output外面的配置
export default {
  // input 是打包入口文件门路
  input: 'src/index.js',
  // 输入配置
  output: {
    // 输入目录名称
    dir: 'dist',
    // 输入格局
    format: 'amd'
  }
}

不批改配置文件间接运行 rollup --config 会报错

UMD 和 iife 是不反对代码拆分形式格局，因为自执行函数会把所有的模块都放到一个函数中，并没有像 webpack 一样有一些疏导代码，所以没有方法做到代码拆分

如果要应用代码拆分，就须要应用 AMD or CommonJS 等形式。在浏览器中只能应用 AMD 的形式，所以这里改用输入格局为AMD

况且咱们拆分代码输入不同的文件，file属性只是针对一个文件，所以咱们须要改用 dir 去指定文件夹名称，不然还是会报错

  1. 运行代码 rollup --config 能够看到 dist 文件夹外面有两个拆分打包的文件。

多入口打包

rollup反对多入口打包，对于不同文件的公共局部也会主动提取到单个文件中作为独立的bundle.js

  1. 模板中将多入口打包的代码开启，能够看到 album 和index都援用了 fetch.js 和logger.js的代码，咱们对 rollup.config.js 进行批改
export default {
  // 这里 input 要改成数组模式或者对象模式，对象模式能够批改打包的文件名，键对应的就是打包的文件名
  // input: ['src/index.js', 'src/album.js'],
  input: {
    indexjs: 'src/index.js',
    albumjs: 'src/album.js'
  },
  // 输入配置要改成拆分包的配置，认为多入口打包默认会执行打包拆分的个性。所以输入格局要改成 amd
  output: {
    dir: 'dist',
    format: 'amd'
  }
}
  1. 命令行执行 rollup --config 能够看到dist 外面生成了三个文件，其中两个文件打包和一个公共模块的打包，外面蕴含了 logger 和fetch模块

amd 输入格局要留神什么？

对于 amd 输入格局的打包文件是不能间接援用到页面上，必须通过实现 AMD 规范的库去加载。

尝试应用一下

  1. 在 dist 上面生成一个 HTML 文件，尝试引入requirejs
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
 <!--requirejs 的 cdn 地址，data-main 是入口文件的名称 -->
  <script src="https://unpkg.com/requirejs@2.3.6/bin/r.js" data-main="albumjs.js"></script>
</body>
</html>
  1. 浏览器关上能够看到内容失常引入，控制台也失常工作。

指令参数参考大全

  • --format —— 指定输入文件打包格局，例如：iife是自调用函数
  • --file —— 输入文件，前面跟打印门路，不写会打印到控制台
  • --config —— 指定应用配置文件，前面能够加指定配置文件的名称，rollup --config <filename>，默认是rollup.config.js。
退出移动版