rollup使用讲解

rollup 总结

什么是 rollup？

rollup 是一个 JavaScript 模块打包器，在功能上要完成的事和 webpack 性质一样，就是将小块代码编译成大块复杂的代码，例如 library 或应用步调。在平常开发应用步调时，我们根本上选择用 webpack，相比之下，rollup.js 更多是用于 library 打包，我们认识的 vue、react、vuex、vue-router 等都是用 rollup 举行打包的。
rollup 安装

首先是安装：

1. npm i rollup -D

复制代码

打包一个 js 文件

新建一个项目，并安装 rollup，创建两个文件：hello.js 和 index.js

1. "dev": "rollup -i src/index.js -o dist/bundle.js -f es"

复制代码

在这段指令中：

• -i指定要打包的文件，-i是--input的缩写。
  
• src/index.js是-i的参数，即打包入口文件。
  
• -o指定输出的文件，是--output.file或--file的缩写。(假如没有这个参数，则直接输出到控制台)
  
• dist/bundle.js是-o的参数，即输出文件。
  
• -f指定打包文件的格式，-f是--format的缩写。
  
• es是-f的参数，表现打包文件使用 ES6 模块规范。
  

6 种格式分别适合在什么场景使用？

rollup 支持的打包文件的格式有 amd, cjs, es\esm, iife, umd、system。其中，amd 为 AMD 标准，cjs 为 CommonJS 标准，esm\es 为 ES 模块标准，iife 为立即调用函数， umd 同时支持 amd、cjs 和 iife。

• IIFE: 适合部分场景作为 SDK 举行使用，尤其是必要把自己挂到 window 上的场景。
  
• CommonJS: 仅 node.js 使用的库。
  
• AMD: 只必要在浏览器端使用的场景。
  
• UMD: 既大概在浏览器端也大概在 node.js 里使用的场景。
  
• SystemJs: 和 UMD 雷同。现在较出名的 Angular 用的就是它。
  
• ESM: 1. 还会被引用、二次编译的场景（如组件库等）；2.浏览器调试场景如 vite.js的开发时。3.对浏览器兼容性非常宽松的场景。
  

rollup 设置文件

在项目开发中，我们通常会使用设置文件，这不仅可以简化下令行操作，同时还能启用 rollup 的高级特性。
在项目根目录下创建rollup.config.js。

1. export default {
2.    
3.   input: './src/index.js',
4.   output: [
5.     {
6.    
7.       file: './dist/index-umd.js',
8.       format: 'umd',
9.       name: 'myLib',
10.       //当入口文件有export时，'umd'和'iife'格式必须指定name
11.       //这样，在通过<script>标签引入时，才能通过name访问到export的内容。
12.     },
13.     {
14.    
15.       file: './dist/index-es.js',
16.       format: 'es',
17.     },
18.     {
19.    
20.       file: './dist/index-cjs.js',
21.       format: 'cjs',
22.     },
23.   ],
24. }

复制代码

使用 Rollup 的设置文件，可以使用rollup --config大概rollup -c指令。

1. //修改package.json的script字段
2. "dev": "rollup -c"                 // 默认使用rollup.config.js
3. "dev": "rollup -c my.config.js"    //使用自定义的配置文件，my.config.js

复制代码

rollup 插件

上面我们知道了 rollup 的基础用法，在实际应用中，会有很多更复杂的需求，比如，怎样支持 es6 语法，怎样打包.vue 文件，怎样压缩我们 js 的代码等等。在 rollup 中，我们借助插件来完成。
在 webpack 中，使用 loader 对源文件举行预处理，plugin 完成构建打包的特定功能需求。rollup 的 plugin 兼具 webpack 中 loader 和 plugin 的功能。
rollup-plugin-babel

rollup-plugin-babel用于转换 es6 语法。
将src/hello.js中的内容改写成：

1. export const hello = () => {
2.    
3.   console.log('hello world')
4. }

复制代码

在未使用 babel 插件的情况下,打包之后箭头函数仍旧未转换
使用 babel 插件：

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

复制代码

1. //rollup.config.js
2. import babel from 'rollup-plugin-babel'
3. export default {
4.    
5.   plugins: [
6.     babel({
7.    
8.       exclude: 'node_modules/**',
9.     }),
10.   ],
11. }

复制代码

在项目根目录创建.babelrc文件。

1. {
2.    
3.   

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。