rollup.js使用分享

y_zy
371 阅读3分钟

前言, 新人第一篇文章, 写得可能不好, 有错的地方请各位大佬指正

demo地址

下面的各项会给出demo地址和部分官网位置

关于rollup

  1. 定义
  • rollup 是一个用于 JavaScript 的模块打包器，它将小段代码编译成更大更复杂的东西，比如库或应用程序。
  1. 与webpack比较
  • rollup是一个模块化的打包工具，但是Rollup主要是针对ES Module进行打包的;
  • rollup更多时候是专注于处理JavaScript代码的（当然也可以处理css、font、vue等文件）;
  • rollup的配置和理念相对于webpack来说，更加的简洁和容易理解；
  • 在早期webpack不支持tree shaking时，rollup具备更强的优势；
  1. 场景
  • 通常在实际项目开发过程中，我们都会使用webpack；
  • 在对库文件进行打包时，我们通常会使用rollup；

rollup基本使用(demo1)

  1. 安装
npm install rollup
  1. 打包(官网:命令行标志; 输出格式)
# 打包浏览器的库, main.js:入口; iife:打包格式; bundle.js:出口;
npx rollup ./src/main.js -f iife -o dist/bundle.js 
npx rollup ./src/main.js -f amd -o dist/bundle.js ( 打包AMD的库 )
npx rollup ./src/main.js -f cjs -o dist/bundle.js (打包CommonJS的库 )
npx rollup ./src/main.js -f umd --name mathUtil -o dist/bundle.js (打包通用的库（umd须跟上name） )

Tree-Shaking(demo1)

  1. Rollup 会静态分析您正在导入的代码，并将排除任何实际未使用的代码。这使您可以在现有工具和模块的基础上进行构建，而无需添加额外的依赖项或增加项目的大小。

配置文件(demo2)

  1. 默认: rollup.config.js

  2. 自定义文件名:

rollup --config my.config.js 
# 或
rollup -c my.config.js
  1. 其中其他常用的配置,(可以看课件项目代码)
  • output.name: 打包umd格式需要;
  • output.globals: 告诉rollup 哪些模块名等同,用于umd/iife规范的代码, 如globals{lodash: '_'};
  • plugins: 引入插件并配置(下面会讲);
  • external: 指出应将哪些模块视为外部模块(了解下package.json 中的一个配置, peerDependencies)

命令传递参数(demo3)

npx rollup -c --configDebug 
# 或者 
npx rollup -c --configDebug=yes

即可在rollup.config.js中获得参数, 通过此参数即可做相应的返回, (也可用环境变量)

使用插件(配置见项目)

  1. 列子:
  • 安装 @rollup/plugin-json 作为开发依赖：
npm install --save-dev @rollup/plugin-json
  • 编辑您的rollup.config.js文件以包含 JSON 插件：

  1. 常用插件-@rollup/plugin-node-resolve(demo4)
  • 作用: 一个使用Node解析算法定位模块的Rollup插件，用于在node_modules中使用第三方模块(就是引入第三方的库)
  • 常用属性: (moduleDirectories可不写,默认就是node_modules; )

  1. 常用插件-@rollup/plugin-commonjs(demo4)
  • 作用: 一些库公开了可以按原样导入的 ES 模块——the-answer就是这样的一个模块。但目前，NPM 上的大多数包都以 CommonJS 模块的形式公开。在更改之前，我们需要将 CommonJS 转换为 ES2015，然后 Rollup 才能处理它们。(引入第三方包中含有commenjs的,先通过这个插件转为module类型的在rollup中使用,避免出问题)
  1. 常用插件-@rollup/plugin-babel (进行polyfill,一两句话讲不清楚, 我就不讲了吧)
  • plugin-babel插件配置:
babel({

    extensions, // 省略引入文件时的后缀

    babelHelpers:'bundled', // Helpers模式

    exclude:'node_modules/**', // 排除文件

    include:'src/**', // 包含文件

})
  1. 常用插件-rollup-plugin-typescript2(demo4)(还要安装 typescript)
typescript({ useTsconfigDeclarationDir:true })
  1. 常用插件-rollup-plugin-terser(demo4>min.config.js)
terser()

代码拆分

  1. 会自动将import()引入的默认拆分

  1. output.manualChunks 自定义代码拆分模块

  1. output.chunkFileNames和output.entryFileNames选项来提供您自己的命名模式

react-redux分析

avatar
文章
阅读
粉丝