Lerna是一種工具,用於優化使用git和npm管理多包存儲庫的工作流程。
lernaJs是由Babel團隊出的一個大型項目管理工具。因為Babel包含很多子包,以前都是放在多個倉庫裡的,管理比較困難,
接下來我們就直接實作喔
npm install --global lerna
git init lerna-repo && cd lerna-repo
lerna init
小提醒 : package.json檔案裡,有一個
"private": true
他的意思是檔案部會發部(publish)喔。發布時可以將它做修改
{
"name": "XXX",
"private": true,
"devDependencies": {
"lerna": "^3.22.1"
}
}
lerna create firstRepo
然後我們會得到這樣的目錄
lerna-repo/
packages/ // 子包都放在这个目录中
firstRepo/
_tests_
firstRepo.test.js
lib
firstRepo.js
package.json
read.me
package.json
lerna.json // lerna js的配置文件
在這裡可以把firstRepo當成一個庫,裡面會有單元這是為編譯的原始碼和read.me
接下來我們開始繼續時做了喔
自動添加CHANGELOG.md
設置"command": {
"publish": {
"conventionalCommits": true
}
}
記得先 下載套件喔
npm i rollup @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-terser --save-dev
,以下是我的範例
script/build.js
const rollup = require('rollup'); // 引入rollup
const terser =require('@rollup/plugin-terser').terser // 壓縮代碼的插件
const commonjs = require('@rollup/plugin-commonjs') // rollup默認支持es6的模塊系統,需要支持commonjs的話需要這個插件
const babel = require('@rollup/plugin-babel') // rollup的babel 插件
const args = process.argv[2] // 拿到 npm run build packName 中的packName
const projectPath = `./packages/${args}` // 子包所在的路勁
// 輸入的文件配置
const inputOptions = {
input: `${projectPath}/src/index.js`,
plugins: [
babel({ // babel文件的設置,會讀取根目錄的babel.config.js文件配置
runtimeHelpers: true,
exclude: 'node_modules/**'
}),
commonjs(),
terser()
]
};
// 輸出的配置
const outputOptions = {
file: `${projectPath}/lib/index.js`,
format: 'esm', // 引出的方式為es6的方式
name: `${args}` // 輸出可引用名為package的名字
};
async function build() {
// create a bundle
const bundle = await rollup.rollup(inputOptions); // inputOptions放在這裡
console.log(bundle.watchFiles); // an array of file names this bundle depends on
await bundle.write(outputOptions); // outputOptions放在這裡
}
build();
const rawArgs = process.argv[2] // 獲取包名
const testFile = process.argv[3]|| '' // 獲取測試文件名
const path = require('path')
let rootDir = path.resolve(__dirname, '../')
rootDir = rootDir + '\\packages\\' + rawArgs // 拼出包的路勁
const jestArgs = [
'--runInBand',
'--rootDir', rootDir, // 傳入包路徑
testFile?`${testFile}.spec.js`:'' //
] // jest 的一些配置
console.log(`\n===> running: jest ${jestArgs.join(' ')}`)
require('jest').run(jestArgs) // 執行
"scripts": {
"build": "node script/build.js",
"test": "node script/test.js"
}
小提醒 如果發布前(Lerna publish)發生錯誤,可以檢查看看是不是沒有git commit喔
如有興趣的朋友,這裡提供我的Lerna模板 https://github.com/tp953704/lerna-babel-rollup-ts__template
給你們參考,裡面有配置好rollup babel typescript 等等相關配置。
有任何問題或有更好的方式都可以在下方留言區一起討論喔
今天就大概講到這裡喔,剩下的就交給大家完成了喔,最近天氣開始轉涼,要注意保暖。
畢竟有好的身體才可以專心寫CODE