Rollup.js: 开源JS库的打包利器

2020-12-10 18:04:29 阅读：244 来源： 互联网

标签：__ plugin Rollup require rollup js webpack JS

前言

Rollup 是一个 JavaScript 模块打包器，说到模块打包器，自然就会想到 webpack。webpack 是一个现代 JavaScript 应用程序的静态模块打包器，那么在 webpack 已经成为前端构建主流的今天，为什么还要用 Rollup 呢？

Rollup 中文文档中介绍到，它可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。可以看到它的应用场景之一，就是打包 JS 库。自己写个 JS 库，在我们开发工作中和开源项目中还是比较常见的。可谓是生命不息，造轮子不止。如果还没写过，那就赶紧来提升下自己的技(逼)术(格)吧。

对比 webpack

用过 webpack 的都知道，它可以将所有的静态资源，导入到应用程序中，也是因为它强大的功能，所以打包 bundle 文件时，会产生很多冗余的代码，在大型的应用中，这点冗余代码就会显得微不足道，但是在一个小小的库中，就会显得比较明显了。比如这么一个类：

class People{
    constructor(){
        this.name  = 'linxin'
    }
    getName(){ return this.name; }
}
export default People;

经过 webpack 打包之后，变成下面这样（案例移除了具体内容），多出了很多方法，这显然不是我们想要的。

/******/ (function(modules) { // webpackBootstrap
/******/     var installedModules = {};
/******/     function __webpack_require__(moduleId) { **** }
/******/     __webpack_require__.m = modules;
/******/     __webpack_require__.c = installedModules;
/******/     __webpack_require__.d = function(exports, name, getter) { *** };
/******/     __webpack_require__.r = function(exports) { *** };
/******/     __webpack_require__.t = function(value, mode) { *** };
/******/     __webpack_require__.n = function(module) { *** };
/******/     __webpack_require__.o = function(object, property) { *** };
/******/     __webpack_require__.p = "";
/******/     return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/******/ ([ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__);
class People{
    constructor(){
        this.name  = 'linxin'
    }
    getName(){
        return this.name;
    }
}
/* harmony default export */ __webpack_exports__["default"] = (People); }) ]);

而 Rollup 打包之后的代码跟源码基本一致，作为一个 JS 库，我们还是希望简洁一点，代码量少点。毕竟实现相同的功能，谁都不想去引入一个更繁重的库吧。

特性

ES模块

Rollup 使用 ES6 的模块标准，而不像 CommonJS 和 AMD，虽然也叫模块化，其实只是一种临时的解决方案。Rollup 的模块可以使我们开发时可以独立的开发每个小模块，代码小而简单，更加方便测试每个小模块，在构建时才打包成一个完成的 JS 库。

Tree-shaking

tree shaking 指的是移除 JavaScript 上下文中的未引用代码，它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export。静态结构的 import 就好像是变量引用一样，不需要执行代码，在编译时就可以确定它是否有引用到，如果没引用，就不把该段代码打包进来。比如用到了一个第三方库的一个功能，但我肯定不要把它完整的库都打包进来，我只需要打包用到的代码即可，这时候 tree shaking 就可以发挥出它的作用了。

应用

开发一个 JS 库，我需要 Rollup 能为我提供些常用的功能：

支持 ES6 转 ES5
代码压缩
ESLint
支持 Typescript

基本配置

Rollup 使用一个 rollup.config.js 文件进行配置。

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

配置跟其他工具基本一致，从入口文件 index.js 打包后输出文件 bundle.js。format 是生成包的格式，可选有 amd,cjs,es,iife,umd，umd 是通用模块定义，打包后可以通过 <script> 标签引入，也可以通过 import 等方式引入，作为一个 JS 库要适用各个场景，应选择 umd 。

babel

Rollup 通过插件在打包的关键过程中更改行为，babel的插件就是 rollup-plugin-babel，需要先安装相关依赖

npm i rollup-plugin-babel@latest @babel/core @babel/preset-env -D

新建 .babelrc 文件，配置 babel

{
    "presets": ["@babel/preset-env"]
}

代码压缩

npm i rollup-plugin-uglify -D

因为 rollup-plugin-uglify 无法压缩 ES6 的语法，所以必须先用 babel 转。如果想直接压缩 ES6 的语法，可换成 rollup-plugin-terser

ESLint

开发一个 JS 库，不能乱七八糟，随心所欲的写代码，必须规范起来，当别人为你的开源库做贡献时，也必须遵循你的开发规范。安装 ESLint 插件

npm i rollup-plugin-eslint -D

然后初始化生成一个 ESLint 配置文件 ./node_modules/.bin/eslint --init

那么最终的 rollup.config.js 配置文件如下：

import babel from 'rollup-plugin-babel';
import { uglify } from 'rollup-plugin-uglify';
import { eslint } from "rollup-plugin-eslint";
export default {
    input: './index.js',
    output: {
        file: 'dist/bundle.js',
        name: 'People',
        format: 'umd'
    },
    plugins: [
        eslint({
            fix: true,
              exclude: 'node_modules/**'
        }),
        babel({
          exclude: 'node_modules/**'
        }),
        uglify()
    ]
};

TypeScript

如果使用 TypeScript 进行开发，则需要安装 rollup-plugin-typescript2 插件和相关依赖

npm i rollup-plugin-typescript2 typescript -D

然后初始化生成一个 tsconfig.js 配置文件 tsc --init，那么使用 TypeScript 的打包文件如下：

import typescript from 'rollup-plugin-typescript2';
export default {
    input: './index.ts',
    output: {
        file: 'dist/bundle.js',
        name: 'People',
        format: 'umd'
    },
    plugins: [
        typescript()
    ]
}

插件

除了以上用的这些插件之外，还有一些可能根据项目需求也有需要

rollup-plugin-commonjs：让 Rollup 识别 commonjs 类型的包，默认只支持导入ES6
rollup-plugin-node-resolve：让 Rollup 能识别 node_modules 中的包，引入第三方库，默认识别不了的
rollup-plugin-json：支持 json 文件
rollup-plugin-replace：支持字符串替换
rollup-plugin-sourcemaps：能生成 sourcemaps 文件

总结

以上只是介绍了 Rollup 的一些基本用法，更多的请参考官方文档。Rollup 已被许多主流的 JavaScript 库使用，包括 vue 和 react。它也可用于构建绝大多数应用程序，但是代码拆分和运行时态的动态导入这类高级功能，它还不能支持，如果需用这些功能，那就可以使用 webpack。

标签：__,plugin,Rollup,require,rollup,js,webpack,JS
来源： https://blog.csdn.net/weixin_39072332/article/details/110958201

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9