文章目录
- 什么是rollup
- rollup打包和webpack打包的区别
- rollup打包准备
- 开始rollup打包
- 可能报错及解决方案
- 1、Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension
- 2、(plugin rpt2) RollupError: Incompatible tsconfig option. Module resolves to 'CommonJS'. This is incompatible with Rollup, please use 'module: "ES2015"', 'module: "ES2020"', or 'module: "ESNext"'
- 3、__dirname不可使用
- 4、require is not found
- 总结
什么是rollup
Rollup 是一个 JavaScript 模块打包工具,可以将多个小的代码片段编译为完整的库和应用。与传统的 CommonJS 和 AMD 这一类非标准化的解决方案不同,Rollup 使用的是 ES6 版本 Javascript 中的模块标准。新的 ES 模块可以让你自由、无缝地按需使用你最喜爱的库中那些有用的单个函数。这一特性在未来将随处可用,但 Rollup 让你现在就可以,想用就用。
rollup打包和webpack打包的区别
在vue2中,打包采用的是webpack,而到了vue3中打包就变成了rollup,而且不仅仅vue3采用了rollup来打包,react也从webpack到rollup转变了。那么rollup打包工具是不是要比webpack打包要好呢?其实各自有各自的用途,我们通过对比vue2和vue3的一些用法就可以简单的看出来两者打包工具的一些区别,vue3最大的一个特性就说采用了组合式API,简单来说vue2更多的像一个百宝箱,我们可以开箱即用,而vue3更多的是提供一些基础功能,然后让使用者去选择,灵活使用。
两者打包工具各自有各自的好处,就像一句话说的"webpack是大而全,rollup是小而美"。首先相对于webpack来说rollup更加轻量级,同时rollup是一个JS模块打包器,更适合于JS库打包,而webpack更适合的是大型项目。
rollup打包准备
一、安装yarn
npm install -g yarn
安装完成之后查看是否安装成功
yarn -v
配置yarn库镜像网站
yarn config set npmRegistryServer https://registry.npm.taobao.org
开始rollup打包
一、初始化
yarn init -y
执行该命令后会生成一个package.json文件
二、package.json文件配置
{
"private": true,
"workspaces": [
"packages/*"
],
"name": "vue3",
"type": "module",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"build": "node scripts/build.js"
},
"license": "MIT",
}
workspaces相当于指定了我们的工作作用域,即packages下的文件夹,scripts指定了一些脚本我们打包的时候直接运行就可以打包了
npm run build
三、新建并配置打包文件夹
新建文件夹packages,并在packages文件夹里边新建文件夹reactivity在reactivity文件夹的路径下执行初始化命令
yarn init -y
reactivity文件夹中的package.json文件配置
{
"name": "@vue/reactivity",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"buildOptions": {
"name": "VueReactivity",
"formats": [
"esm-bundler",
"cjs",
"global"
]
}
}
formats指定的是打包的不同的文件
在reactivity文件夹中新建文件夹src,在src文件夹中新建index.ts文件,在index.ts文件中随便写点东西,否则打包的时候会因为文件里边没有内容而报错
四、下载rollup及打包执行文件
在项目文件中执行命令
安装typescript
yarn add typescript -D -W
生成ts配置文件
npx tsc --init
安装rollup打包相关依赖
yarn add rollup rollup-plugin-typescript2 @rollup/plugin-node-resolve @rollup/plugin-json execa -D -W
新建文件夹scripts(该文件夹存放的是执行打包的文件,该文件夹与packages属于同一级)
在scripts文件中新建文件build.js之后打包执行的就是这个文件
build.js文件内容
// 进行打包
// (1)获取 打包 目录
import * as fs from 'fs';
import { execa } from 'execa'
// 获取目录,注意只打包packages下边的文件夹
const dirs = fs.readdirSync('packages').filter(p => {
// 判断是否是文件,只打包文件夹
if (!fs.statSync(`packages/${p}`).isDirectory()) {
return false
}
return true
})
// (2)进行打包 并行打包
async function build(target) {
// execa第一个参数是打包的形式,第二个是一个数组
// -c 执行rullup配置,环境变量
await execa('rollup', ['-c', '--environment', `TARGET:${target}`], { stdio: "inherit" })//子进程的输出在父进程里边出现
}
async function runParaller(dirs, itemfn) {
// 遍历所有包
let result = []
for (let item of dirs) {
result.push(itemfn(item))
}
return Promise.all(result)//存放打包的promise,等待这里的打包执行完毕之后,调用成功
}
runParaller(dirs, build)
.then(() => {
console.log('成功');
})
.catch((err) => {
console.log('错误', err);
})
在项目文件中新建rollup.config.js用来写rullup执行时的配置
// 通过rollup进行打包
// (1) 引入相关依赖
import ts from 'rollup-plugin-typescript2' //解析 ts
import json from '@rollup/plugin-json' //解析json
import resolvePlugin from '@rollup/plugin-node-resolve' //解析 第三方插件
import path from 'path' //处理路径
// 获取路径
import { fileURLToPath } from 'url';
import { dirname } from 'path';
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
// 讲require转换为模块
import { createRequire } from 'module';
const require = createRequire(import.meta.url);
// (2)获取文件路径
let packagesDir = path.resolve(__dirname, 'packages')
// 获取需要打包的包
let packageDir = path.resolve(packagesDir, process.env.TARGET)
// 打包获取到每个包的项目配置
let resolve = p => path.resolve(packageDir, p)
const pkg = require(resolve(`package.json`))//获取json配置
const packageOptions = pkg.buildOptions || {}
// 获取文件名字
const name = path.basename(packageDir)
// 创建一个映射表
const outputOpions = {
"esm-bundler": {
// 输出文件的名字
file: resolve(`dist/${name}.esm-bundler.js`),
// 输出文件的格式
format: 'es'
},
"cjs": {
// 输出文件的名字
file: resolve(`dist/${name}.cjs.js`),
// 输出文件的格式
format: 'cjs'
},
"global": {
// 输出文件的名字
file: resolve(`dist/${name}.global.js`),
// 输出文件的格式
format: 'iife'
},
}
// 获取需要打包的文件的自定义配置
const options = pkg.buildOptions
function createConfig(format, output) {
// 进行打包
output.name = options.name//指定一个名字
// 用于调整代码
output.sourcemap = true
// 生成rollup配置
return {
// resolve表示当前包
input: resolve('src/index.ts'),//导入
// 输出
output,
//
plugins: [
json(),
ts({//解析ts语法
tsconfig: path.resolve(__dirname, 'tsconfig.json')
}),
resolvePlugin()//解析第三方插件
]
}
}
// rullup需要导出一个配置
export default options.formats.map(format => createConfig(format, outputOpions[format]))
五、文件大致分布
可能报错及解决方案
1、Warning: To load an ES module, set “type”: “module” in the package.json or use the .mjs extension
在最外层的package.json文件指定一下
"type": "module",
2、(plugin rpt2) RollupError: Incompatible tsconfig option. Module resolves to ‘CommonJS’. This is incompatible with Rollup, please use ‘module: “ES2015”’, ‘module: “ES2020”’, or ‘module: “ESNext”’
将tsconfig.json中的target和module的值改为ESNext,并把strict改为false
3、__dirname不可使用
// 获取路径
import { fileURLToPath } from 'url';
import { dirname } from 'path';
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
4、require is not found
// 将require转换为模块
import { createRequire } from 'module';
const require = createRequire(import.meta.url);
当我们看到控制台输出成功之后,并且reactivity文件夹中多了个dist文件夹就代表打包成功了
总结
以上就是我在学习过程中遇到的rollup打包的一些配置及我所遇到的一些问题,程度有限,有那些不足的或者有些问题我没遇到的,也希望各位大佬能够指出,彼此学习,互相进步。