打包umd_前端组件/库打包利器rollup使用与配置实战

古城微笑少年丶 2023-01-06 11:58 634阅读 0赞

> 原文链接：https://mp.weixin.qq.com/s/eEVBdOyCUfTxgAzY5EEzBg
> 
> 作者：趣学前端

> 目前主流的前端框架vue和react都采用rollup来打包，为了探索rollup的奥妙，接下来就让我们一步步来探索，并基于rollup搭建一个库打包脚手架，来发布自己的库和组件。

![8bee1eaabedfcd2978feafb5901b8565.png][]

**前言**

写rollup的文章是因为笔者最近要规范前端开发的业务流程和架构，并提供内部公有组件库和工具库供团队使用。在查阅大量资料并对比了webpack和rollup的优缺点之后，最终选择rollup来作为打包工具，我们最终要实现通过npm的方式安装我们的组件库和工具库：

// 安装npm install @xuxi/tools// 使用import { sleep } from '@xuxi/tools'

下面我们一步步来复盘rollup的配置过程和最佳实践。

**rollup介绍**

> Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. It uses the new standardized format for code modules included in the ES6 revision of JavaScript, instead of previous idiosyncratic solutions such as CommonJS and AMD.

意思大致是说Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是像CommonJS 和 AMD这种特殊解决方案。

rollup最大的亮点就是Tree-shaking，即可以静态分析代码中的 import，并排除任何未使用的代码。这允许我们架构于现有工具和模块之上，而不会增加额外的依赖或使项目的大小膨胀。如果用webpack做，虽然可以实现tree-shaking，但是需要自己配置并且打包出来的代码非常臃肿，所以对于库文件和UI组件，rollup更加适合。

**搭建库打包脚手架**

**1. rollup入门**

首先我们安装一下rollup：

npm i rollup -g

然后在本地创建一个项目：

mkdir -p my-projectcd my-project

其次我们创建一个入口并写入如下代码：

// src/main.jsimport say from './say.js';export { say }// src/say.jsexport default function(name){ console.log(name)};

基本代码准备好了之后，我们写rollup的配置文件(rollup.config.js在根目录下)：

// rollup.config.jsexport default { input: 'src/main.js', output: { file: 'bundle.js', format: 'cjs' }};

这样，我们在终端执行:

// --config 或 -c 来使用配置文件rollup -c

这样在更目录下就生成了一个bundle.js，就是我们想要的打包后的文件。我们也可以用package.json来设置打包配置信息，用npm run xxx来打包和测试代码。

**2.rollup插件使用**

为了更灵活的打包库文件，我们可以配置rollup插件，比较实用的插件有：

> rollup-plugin-node-resolve —帮助 Rollup 查找外部模块，然后导入
> 
> rollup-plugin-commonjs —将CommonJS模块转换为 ES2015 供 Rollup 处理
> 
> rollup-plugin-babel — 让我们可以使用es6新特性来编写代码
> 
> rollup-plugin-terser — 压缩js代码，包括es6代码压缩
> 
> rollup-plugin-eslint — js代码检测

打包一个库用以上插件完全够用了，不过如果想实现对react等组件的代码，可以有更多的插件可以使用，这里就不一一介绍了。

我们可以这样使用，类似于webpack的plugin配置：

import resolve from 'rollup-plugin-node-resolve';import commonjs from 'rollup-plugin-commonjs';import babel from "rollup-plugin-babel";import { terser } from 'rollup-plugin-terser';import { eslint } from 'rollup-plugin-eslint';export default [{input: 'src/main.js',output: {name: 'timeout',file: '/lib/tool.js',format: 'umd'},plugins: [ resolve(), // 这样 Rollup 能找到 `ms` commonjs(), // 这样 Rollup 能转换 `ms` 为一个ES模块 eslint(), babel(), terser()]}];

是不是很简单呢？个人觉得比webpack的配置简单很多。通过如上配置，虽然能实现基本的javascript文件打包，但是还不够健壮，接下来我们一步步来细化配置。

**3.利用babel来编译es6代码**

首先我们先安装babel相关模块：

npm i core-js @babel/core @babel/preset-env @babel/plugin-transform-runtime

然后设置.babelrc文件

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

[8bee1eaabedfcd2978feafb5901b8565.png]: /images/20221119/5a23d555e56f436bb03469c7e050e7f4.png