大前端

主题

rollup开发软件包 ​

1. rollup是什么？ ​

Rollup 是一个 JavaScript 模块打包工具，可以将多个小的代码片段编译为完整的库和应用。与传统的 CommonJS 和 AMD 这一类非标准化的解决方案不同，Rollup 使用的是 ES6 版本 Javascript 中的模块标准。新的 ES 模块可以让你自由、无缝地按需使用你最喜爱的库中那些有用的单个函数。这一特性在未来将随处可用，但 Rollup 让你现在就可以，想用就用。

2. rollup与webpack的区别 ​

Rollup与Webpack作用非常类似，不过Rollup更为小巧。 webpack结合插件可以完成前端工程化的绝大多数工作，而Rollup仅仅是一款ESM打包器，没有其他功能，例如Rollup中并不支持类似HMR这种高级特性。 Rollup并不是要与Webpack全面竞争，而是提供一个充分利用ESM各项特性的高效打包器。 Rollup自带tree shaking

3. 快速上手 ​

1. 安装 ​

全局安装 ​

shell
$ npm install -g rollup

项目安装 ​

shell
$ npm install -D rollup

2. 使用 ​

命令行使用 ​

shell
$ rollup ./main.js --file ./bundle.js --format iife

参数说明 ​

./main.js 入口文件 -c或--config 使用本地配置文件，后面可跟配置文件地址 --file banble.js 输出文件的位置和文件名， 没有--file参数会默认输出到控制台（stdout） --format iife 以什么规范进行输出，有六种值分别是umd,amd,cjs,es,system,iife，注意iife和umd模式需要指定name属性

  • umd统一模块化方式,兼容多种环境，例如浏览器和node
  • cjscommonjs模块化规范，适用node
  • esESmodule模块化规范，适用开发环境的
  • iife立即执行函数，适用浏览器
  • amd 和 system基本废弃了，可以不考虑

4. rollup.config.js ​

一个简单的配置文件

js
// 插件可以让 Rollup 查找到外部模块
import { nodeResolve } from '@rollup/plugin-node-resolve';
// babel用于翻译高级语法
import babel from '@rollup/plugin-babel';
// js代码压缩
import terser from "@rollup/plugin-terser";
import { main } from './package.json'
export default {
    input: './src/index.js', // 入口
    output: { // 出口
        file: main, // 文件名以及输出位置
        format: 'umd', // 以什么规范输出
        name: 'asyncPool' // iife和umd必须指定
    },
    plugins: [ // 插件
        nodeResolve(),
        babel({ babelHelpers: 'bundled' }),
        terser()
    ]
}

5. rollup常用插件 ​

@rollup/plugin-node-resolve 插件可以让 Rollup 查找到外部模块。首先来安装它 @rollup/plugin-commonjs 让rollup可以引入commonjs模块的包（此插件应该在其他插件之前使用，这是为了防止其他插件进行的更改破坏了 CommonJS 检测。）