什么是rollup

Rollup 是一個 JavaScript 模塊打包工具，可以將多個小的代碼片段編譯為完整的庫和應(yīng)用。與傳統(tǒng)的 CommonJS 和 AMD 這一類非標準化的解決方案不同，Rollup 使用的是 ES6 版本 Javascript 中的模塊標準。新的 ES 模塊可以讓你自由、無縫地按需使用你最喜愛的庫中那些有用的單個函數(shù)。這一特性在未來將隨處可用，但 Rollup 讓你現(xiàn)在就可以，想用就用。

rollup打包和webpack打包的區(qū)別

???在vue2中，打包采用的是webpack，而到了vue3中打包就變成了rollup，而且不僅僅vue3采用了rollup來打包，react也從webpack到rollup轉(zhuǎn)變了。那么rollup打包工具是不是要比webpack打包要好呢？其實各自有各自的用途，我們通過對比vue2和vue3的一些用法就可以簡單的看出來兩者打包工具的一些區(qū)別，vue3最大的一個特性就說采用了組合式API，簡單來說vue2更多的像一個百寶箱，我們可以開箱即用，而vue3更多的是提供一些基礎(chǔ)功能，然后讓使用者去選擇，靈活使用。

???兩者打包工具各自有各自的好處，就像一句話說的"webpack是大而全，rollup是小而美"。首先相對于webpack來說rollup更加輕量級，同時rollup是一個JS模塊打包器，更適合于JS庫打包，而webpack更適合的是大型項目。

rollup打包準備

一、安裝yarn

npm install -g yarn

安裝完成之后查看是否安裝成功

yarn -v

配置yarn庫鏡像網(wǎng)站

yarn config set npmRegistryServer https://registry.npm.taobao.org

開始rollup打包

一、初始化

yarn init -y

執(zhí)行該命令后會生成一個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文件夾的路徑下執(zhí)行初始化命令

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文件中隨便寫點東西，否則打包的時候會因為文件里邊沒有內(nèi)容而報錯

四、下載rollup及打包執(zhí)行文件

在項目文件中執(zhí)行命令

安裝typescript

yarn add typescript -D -W

生成ts配置文件

npx tsc --init

安裝rollup打包相關(guān)依賴

yarn add rollup rollup-plugin-typescript2 @rollup/plugin-node-resolve @rollup/plugin-json execa -D -W

新建文件夾scripts(該文件夾存放的是執(zhí)行打包的文件，該文件夾與packages屬于同一級)
在scripts文件中新建文件build.js之后打包執(zhí)行的就是這個文件
build.js文件內(nèi)容

// 進行打包
// (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第一個參數(shù)是打包的形式，第二個是一個數(shù)組// -c 執(zhí)行rullup配置，環(huán)境變量await execa('rollup', ['-c', '--environment', `TARGET:${target}`], { stdio: "inherit" })//子進程的輸出在父進程里邊出現(xiàn)
}async function runParaller(dirs, itemfn) {// 遍歷所有包let result = []for (let item of dirs) {result.push(itemfn(item))}return Promise.all(result)//存放打包的promise,等待這里的打包執(zhí)行完畢之后，調(diào)用成功
}
runParaller(dirs, build).then(() => {console.log('成功');}).catch((err) => {console.log('錯誤', err);})

在項目文件中新建rollup.config.js用來寫rullup執(zhí)行時的配置

// 通過rollup進行打包
// (1) 引入相關(guān)依賴
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轉(zhuǎn)換為模塊
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)
// 創(chuàng)建一個映射表
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//指定一個名字// 用于調(diào)整代碼output.sourcemap = true// 生成rollup配置return {// resolve表示當前包input: resolve('src/index.ts'),//導(dǎo)入// 輸出output,// plugins: [json(),ts({//解析ts語法tsconfig: path.resolve(__dirname, 'tsconfig.json')}),resolvePlugin()//解析第三方插件]}
}
// rullup需要導(dǎo)出一個配置
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轉(zhuǎn)換為模塊
import { createRequire } from 'module';
const require = createRequire(import.meta.url);

當我們看到控制臺輸出成功之后，并且reactivity文件夾中多了個dist文件夾就代表打包成功了

總結(jié)

???以上就是我在學(xué)習(xí)過程中遇到的rollup打包的一些配置及我所遇到的一些問題，程度有限，有那些不足的或者有些問題我沒遇到的，也希望各位大佬能夠指出，彼此學(xué)習(xí)，互相進步。