注: 文章內不會說過多的基礎內容,默認你有搭建開發環境的基礎技能。css
我作 re-editor 富文本編輯器 的時候使用了monorepo管理方式,在開發過程當中以爲monorepo也是很適合團隊內部組織項目,下面分享下具體作法與你們共同討論react
團隊內多項目開發常常會遇到如下幾個問題git
爲了解決上述問題,決定在項目內使用 lerna + yarn workspaces。github
咱們使用下面的項目結構模擬團隊內常見的情景,演示項目web
他們的依賴關係:npm
先新建一個文件夾,而後初始化gitjson
# 初始化git
git init
複製代碼
# 初始化項目
$ npm init -f
# 安裝lerna,也能夠全局安裝,非全局安裝記得在命令前加上npx
$ yarn add lerna --dev
複製代碼
// 使用workspace需在package.json內增長以下內容
"private": true,
"workspaces": [
"packages/*"
],
複製代碼
# 初始化lerna
$ lerna init
複製代碼
// 在lerna.json內增長以下內容以在lerna內啓用yarn workspaces
{
"npmClient": "yarn"
"useWorkspaces": true
}
複製代碼
接下來就是建立package了,能夠在packages文件夾內手動建立文件夾,或者使用lerna命令:bootstrap
$ npx lerna create XXX
複製代碼
開發中基本會遇到三種依賴安裝狀況babel
# yarn workspace www add react
$ yarn workspace <workspace_name> <command>
複製代碼
使用lerna,具體用法參照 lerna addantd
# npx lerna add react --scope www
$ lerna add <package>[@version] [--dev] [--exact]
複製代碼
# npx lerna add component-a --scope www
$ lerna add <package>[@version] [--dev] [--exact]
複製代碼
# 注意: 必定要在項目根目錄下
yarn add @babel/core @babel/preset-env --dev -W
複製代碼
咱們如今抽取出可複用的內容:
這些工具按照使用習慣正常安裝就行,重點說下babel。
bable配置文件使用babel.config.js
,代碼編譯配置全局共享,而後經過overrides
進行差別化配置,好比項目www-a
使用antd,能夠單獨配置按需加載
const presets = [
"@babel/preset-env",
"@babel/preset-react"
];
const overrides = [
{
test: ["packages/www-a"],
plugins: [
["module-resolver", {
"alias": { "~": "./src/scripts" }
}],
["import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css"
}]
]
},
{
test: ["packages/www-b"],
plugins: [
["module-resolver", {
"alias": { "~": "./src/scripts" }
}]
]
},
]
複製代碼
使用lerna管理項目, 每一個項目下都寫本身的npm script,好比 start
build
,而後使用lerna執行,通常將命令寫到根目錄下的npm script,好比:
"scripts": {
"start:www-a": "lerna run start --parallel --scope www-a --scope component-a --scope component-c"
},
複製代碼
# 執行全部packages的build命令
$ lerna run build
# 並行執行全部packages的start命令
$ lerna run start --parallel
複製代碼