rollup函数_写一个axiosts吧：学习Rollup

最新推荐文章于 2024-06-29 11:40:13 发布

weixin_39640646

最新推荐文章于 2024-06-29 11:40:13 发布

阅读量259

点赞数

文章标签： rollup函数

本文链接：https://blog.csdn.net/weixin_39640646/article/details/111297337

版权

本文介绍了Rollup的基本概念、优势及使用方法。通过学习，理解其作为模块打包器的角色，以及如何进行Tree-shaking优化。文章还涵盖了Rollup的配置参数、与npm包、Babel、Gulp的集成，并分享了在实际项目中的应用经验。

摘要由CSDN通过智能技术生成

Rollup是什么

官方解读

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现，但当前 Rollup 可以使你提前体验。

我的理解

Rollup是一个js模块打包工具，可以将小的模块打包成一个大的模块。这种特性就很适用于打包一个库。Rollup对代码模块使用新的标准化格式(ES模块)。

为什么要使用Rollup

官方解读

如果你将项目拆分成小的单独文件中，这样开发软件通常会很简单，因为这通常会消除无法预知的相互影响(remove unexpected interaction)，以及显著降低了所要解决的问题的复杂度(complexity of the problem)，并且可以在项目最初时，就简洁地编写小的项目(不一定是标准答案)。不幸的是，JavaScript 以往并没有将此功能作为语言的核心功能。

我的理解

为了编写可读性更高，更利于维护的代码，通常会按照相似的功能建立很多目录和文件来，这样在使用的时候需要引入很多文件，远不如引用一个文件方便。手动的去打包代码是一个极其费劲的事情，打包工具的出现解决了这些问题，Rollup就是一个打包工具
Rollup更适用于库的打包，而Webpack更适用于应用程序的打包
自带Tree-shaking(删掉未使用的代码)

怎样使用

中文文档 https://www.rollupjs.com/
英文文档 https://www.rollupjs.org/

开始学习

Tree-shaking

是一种常见的优化方式，从名字可以很形象的理解，就像在摇一棵树，摇下一部分枯萎的叶子。不打包未使用的模块，从而减少最终的打包体积。

兼容性

导入

默认只支持es模块打包，将一些不符合es模块标准的模块(如CommonJS)以插件的方式支持。这样就可以导入一些不是es模块标准的库来使用。

导出

可以直接导出常见umd、CommonJS和es6的模块，并能感知package.json中有module

命令行

挑几个常用的参数，简单介绍，具体移步中文文档or英文文档

--config / -c

以配置的形式运行，多数的命令参数，会覆盖配置文件中的设置。

rollup --config // 默认的配置文件 rollup.config.js// orrollup -c// 也可以指定自己命名的文件rollup -c my.rollup.config.js

--input / -i

入口文件

rollup --input src/index.js // 必须指定入口// orrollup -i src/index.js

--file / -o

输出的文件

rollup --file // 默认是输出到控制台// orrollup -o dist/index.js

--format / -f

输出的文件类型(amd, cjs, esm, iife, umd)

rollup --file // 默认是esm// orrollup -o dist/index.js

--name / -n

生成UMD模块的名字

rollup --name xxx// orrollup -n xxx

--sourcemap / -m

生成sourcemaprollup --sourcemap// orrollup -m

--watch / -w

监听文件变动，文件变动将会重新打包

rollup --watch// orrollup -w

Rollup 与其他工具集成

npm包

引入node_modules中的包,Rollup不能去node_modules中找到对应的包,需要插件的支持。例如：

import xxx from 'xxx';console.log(xxx)

应该安装rollup-plugin-node-resolve来告诉rollup如何查找外部模块

npm i rollup-plugin-node-resolve -D

然后进行配置，使用插件。

// rollup.config.jsimport resolve from 'rollup-plugin-node-resolve';export default {  input: 'src/index.js',  output: {    file: 'bundle.js',    format: 'cjs'  },  plugins: [ resolve() ]};

假如这个模块是CommonJS规范写的，而导出的时候又要导出es模块，这样就需要将 CommonJS 模块转换为 ES2015, 可利用的插件是rollup-plugin-commonjs

外部的引用的包

像lodash这种较大的包，并且他也不是本库的实现，完全可以外部引用(externals)

// rollup.config.jsimport resolve from 'rollup-plugin-node-resolve';export default {  input: 'src/main.js',  output: {    file: 'bundle.js',    format: 'cjs'  },  plugins: [resolve({    // 将自定义选项传递给解析插件    customResolveOptions: {      moduleDirectory: 'node_modules'    }  })],  // 指出应将哪些模块视为外部模块  external: ['lodash']};

Babel

安装插件rollup-plugin-babel,然后配置babel就可以了。

npm i rollup-plugin-babe babel-preset-latest babel-plugin-external-helpers -D

需要配置"modules": false，防止babel对CommonJS进行转换
使用 external-helpers 插件, 它允许 Rollup 在包的顶部只引用一次 helpers ，而不是每个使用它们的模块中都引用一遍
将 .babelrc 文件放在 src 中，划重点，在src中，在src中，在src中。

// src/.babelrc{  "presets": [    ["latest", {      "es2015": {        "modules": false      }    }]  ],  "plugins": ["external-helpers"]}

Gulp

gulp使用rollup.rollup，返回的是promises，这比较简单。

const gulp = require('gulp');const rollup = require('rollup');const rollupTypescript = require('rollup-plugin-typescript');gulp.task('build', async function () {  const bundle = await rollup.rollup({    input: './src/main.ts',    plugins: [      rollupTypescript()    ]  });  await bundle.write({    file: './dist/library.js',    format: 'umd',    name: 'library',    sourcemap: true  });});