es6模块打包之rollup

前言

随着前端技术的发展，前端所承载的逻辑越来越多。当我们在编码的时候，如果把所有的逻辑写在一个js文件中，那简直就是噩梦。所以模块化这个概念就被提出来了。在esModule被提出来之前，存在多种规范AMD、CMD、UMD、CommonJS，导致模块之间的引用比较麻烦，所以es6推出了javascript模块规范esModule，目的是实现大一统。

模块化很好的解决了我们在复杂应用开发中的代码组织问题，但是随着我们引入模块化，我们的应用又会产生一些新的问题。

• ES Module存在环境兼容问题
• 模块文件多，网路请求频繁
• 不止js需要模块化，其他前端资源都需要模块化（图片\css等等）

为了解决以上的问题，前端构建工具孕育而生，虽然社区里面有很多构建工具，但是他们的目的只有一个，就是提高开发效率。不同的工具侧重点不一样，所以我们需要根据业务场景来选择合适的工具。

本文只针对rollup的基本使用。

为什么不选择webpack

如果现在的场景是要开发一个项目的话，webpack是合适的。webpack视HTML，JS，CSS，图片等文件都是一种 资源 ，每个资源文件都是一个模块（module）文件，webpack就是根据每个模块文件之间的依赖关系将所有的模块打包成一个bundle，更适合业务项目的打包，而且webpack打包生成的代码有很多都不是我们所写的逻辑代码, 比如一些他自有的模块加载功能，会增大代码的体积，对于一个项目来说，这一点可以忽略不计。

如果你要开发js库，那webpack的繁琐和打包后的文件体积就不太适用了，rollup生成代码只是把我们的代码转码成目标js并无其他，配置简单且轻量。

rollup基本使用

安装

1、全局安装

npm install rollup --global  or npm i rollup -g
// 安装之后执行
rollup --version
// 若正常输出则安装成功。
复制代码

2、局部安装

npm install rollup -D
// 安装之后执行
npx rollup --version
// 若正常输出则安装成功。
复制代码

命令行打包

目录结构

index.js是入口文件，依赖utils.js，最终通过rollup打包生成dist/main.umd.js。

命令行

npx rollup 入口文件 --file 输出文件 --format 模块规范 [--name wang](umd特有)
// npx rollup ./src/index.js --file ./dist/main.umd.js --format umd --name wang
复制代码

配置文件打包

目录结构

rollup.config.js配置文件，打包不同的模块规范包。

export default {
    input :"./src/index.js",
    output:[
        {
            format:"umd",
            name:"wang",
            file:"./dist/main.umd.js"
        },
        {
            format:"cjs",
            file:"./dist/main.cjs.js"
        },
        {
            format:"amd",
            file:"./dist/main.amd.js" 
        },
        {
            format:"es",
            file:"./dist/main.es.js" 
        },
        {
            format:"iife",
            file:"./dist/main.browser.js" 
        }
    ]
}
复制代码

当执行npx rollup -c时，rollup会匹配rollup.config.js，完成打包。

插件扩展

现在有这么个场景，引入js第三方可math.js，计算两数之和。

import {add} from "mathjs";

const sum = add(1,2);

console.log(sum);
复制代码

如果按照上面的配置进行打包的话，会报错，找不到add方法

最终的打包结果如下：

很明显mathjs没有引入，如果想引入node_modules的模块，则需要配置plugin，官方提供了一个@rollup/plugin-node-resolve的插件，安装配置即可

npm install @rollup/plugin-node-resolve -D
// 在rollup.config.js中增加如下字段
plugins: [nodeResolve()]
复制代码

但是，我们这时候打包仍然会报错。

上面报错的意思是，模块没有导出。因为rollup默认只支持esmodule，其他模块化规范不支持。 如果想让rollup支持commonjs，需安装插件@rollup/plugin-commonjs。

npm install @rollup/plugin-node-resolve -D
// rollup.config.js最终配置如下
plugins: [nodeResolve(),commonjs()]
复制代码

现在再执行代码，成功！

以上就是rollup基本的配置。更多高阶的配置，还需要自己去研究。

扩展

rollup-plugin-peer-deps-external

当开发一个第三方库时，我们不希望第三库和用户安装的依赖发生版本上的冲突， peerDependencies就可以将决定权交给使用者。

• 手动在package.json增加配置

"peerDependencies": {
    "react": "^17.0.2"
 }
复制代码

• 安装rollup-plugin-peer-deps-external，在rollup.config.js配置如下：

plugins: [
    peerDepsExternal(),
],
// external将不用配置。

链接：https://juejin.cn/post/7006261280663306247