es6模块打包之rollup

·  阅读 971
es6模块打包之rollup

前言

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

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

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

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

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

为什么不选择webpack

如果现在的场景是要开发一个项目的话,webpack是合适的。webpackHTMLJSCSS图片等文件都是一种 资源 ,每个资源文件都是一个模块(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
// 若正常输出则安装成功。
复制代码

命令行打包

目录结构

截屏2021-09-07 下午10.25.39.png

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
复制代码

配置文件打包

目录结构

截屏2021-09-07 下午10.48.56.png

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方法

截屏2021-09-07 下午11.18.36.png

最终的打包结果如下:

截屏2021-09-07 下午11.24.55.png

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

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

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

截屏2021-09-07 下午11.45.02.png

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

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

现在再执行代码,成功!

截屏2021-09-07 下午11.50.36.png

截屏2021-09-07 下午11.51.38.png

以上就是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将不用配置。
复制代码
分类:
前端
收藏成功!
已添加到「」, 点击更改