您现在的位置是:网站首页> 编程资料编程资料
使用roolup构建你的lib(实现步骤)_其它综合_
2023-05-27 122人已围观
简介 使用roolup构建你的lib(实现步骤)_其它综合_
概述
Rollup
, 和 Webpack
, Parcel
都是模块打包工具(module bundler tool), 但是侧重点不同, 我们要聊的 Rollup
更加适合用于构建lib 而 Webpack
, Precel
更加适合开发应用。本文,将结合一个简单的例子说说如何使用Rollup
构建自己的lib。
实现目标
- 创建一个完整的rollup的lib工程;
- 区分开发和生产配置,方便开发测试;
- 引入第三方库(如:
ol
),并实现第三方库的打包;
实现步骤
一 rollup基础
1. 初始化工程
cnpm init -y
2. 安装依赖
cnpm install rollup --save-dev
3. 新建测试代码src/main.js
const add = (a, b) => a + b;
const res = add(100 + 100)
console.log(res)
4. 编译测试package.json
// script节点下添加 "dev": "rollup -i src/main.js -o dist/bundle.js -f es" // 执行编译命令 npm run dev
在这段指令中:
-
-i
指定要打包的文件,-i
是--input
的缩写。 -
src/index.js
是-i
的参数,即打包入口文件。 -
-o
指定输出的文件,是--output.file
或--file
的缩写。(如果没有这个参数,则直接输出到控制台)dist/bundle.js
是-o
的参数,即输出文件。 -
-f
指定打包文件的格式,-f
是--format
的缩写。 -
es
是-f
的参数,表示打包文件使用ES6模块规范。
rollup支持的打包文件的格式有amd, cjs, es\esm, iife, umd
。其中,amd为AMD标准,cjs为CommonJS标准,esm\es为ES模块标准,iife为立即调用函数, umd同时支持amd、cjs和iife。
5. 配置文件
在根目录下创建config/rollup.dev.config.js
和config/rollup.prod.config.js
export default { input: "./src/index.js", output: [ { file: './dist/my-lib-umd.js', format: 'umd', name: 'myLib' //当入口文件有export时,'umd'格式必须指定name //这样,在通过