lerna 大前端項目代碼重用解決方案

在 react 或者 vue 項目里面，目前來說代碼或者組件的復用，一般采用三種方式。

1、自己手動配置 webpack ，使用 HtmlWebpackPlugin 構建多個入口項目，共享一些代碼組件。

　　缺點：需要對 webpack 掌握較好，多個 HtmlWebpackPlugin 導致熱更新 打包變慢  。

　　優點：可控性高。

2、使用 npm 公共的庫。

　　缺點：不能實時修改，對於一些業務相關的重復代碼，可能需要頻繁修改。

　　優點：分離的很徹底 ，獨立維護，隨處可用

3、使用 lerna 工具

　　缺點： 項目的git 權限控制比較麻煩

　　優點：  實時修改。

 

這里主要介紹 lerna 的使用：

一、安裝

npm i lerna  -g

　　

 

二、初始化

　　新建一個文件夾： lerna_demo，進入

lerna init

　　

三、導入項目

lerna import 你本地的項目路徑

 

例如： 在我本地的電腦的 f 盤有個舊的 react 項目

 如果沒有，可以新建幾個項目如下：

	 npx create-react-app admin --template typescript
	 npx create-react-app web --template typescript
	 npx create-react-app common --template typescript

　　

　　

最后就是這幾個文件：

 

 

 

 

 

 

在 lerna_demo 里面，導入幾個項目：

lerna import F:\admin
lerna import F:\web
lerna import F:\common

　　

四、結果

　　在 lerna_demo/packages 里面，就會多出幾個工程

　　

 

 

 

四、可能的錯誤

　　1、項目在導入的時候，會合並 git 的提交記錄，所以項目的代碼要都提交了的。如果有修改可以執行：  

　　

git add .  

git commit -m "合並"

　　

五、使用 yarn 

　　

 

 

 

 

 

lerna.json

{
  "packages": [
    "packages/*"
  ],
  "version": "0.0.0",
  "npmClient": "yarn",
  "useWorkspaces": true,
  "command": { 
    "publish": { 
        "ignoreChanges": [ 
            ".gitignore",
            "*.log",
            "*.md"
        ]
    },
    "bootstrap": { 
        "ignore": "npm-*", 
        "npmClientArgs": [ 
            "--no-package-lock"
        ]
    }
}
}

　　

　　

package.json

{
  "name": "root",
  "private": true,
  "devDependencies": {
    "lerna": "^4.0.0"
  },
  "workspaces": [
    "packages/*"
  ],
  "scripts": {
    "bootstrap": "lerna bootstrap && lerna link",
    "clean": "lerna clean --yes",
    "all-dev": "lerna run start",
    "all-build": "lerna run build",
    "admin": "lerna run start --scope=admin --stream",
    "web": "lerna run start --scope=web --stream",
    "test": "lerna run test --stream"
  }
}

 

六、修改lerna ->  common 里面的 package.json

 

同時也在 admin->package.json 里面加入 依賴，當然也可以不加。

 

 

 

七、在common 里面加入代碼：

　　

 

 　

　　在 admin 里面使用：

　　

 

 

 八、運行指令安裝模塊

　　

yarn bootstrap

　　

九、運行 admin 項目

　

yarn admin

　　

 

十、參考文檔：

　　https://segmentfault.com/a/1190000023160081

　　https://github.com/lerna/lerna#getting-started