[TOC] ## 快速開始 **初始化** ``` mkdir project_name lerna init ``` **修改lerna.json** 添加`npmClient`配置如下 ``` { "private": true, "workspaces": [ "packages/*" ], "npmClient": "yarn", "version": "0.0.0" } ``` **修改package.json** 添加`workspaces`配置如下 ``` { "name": "root", "private": true, "workspaces": [ "packages/*" ], "devDependencies": { "lerna": "^3.20.2" } } ``` **初始化子模塊** 我這里用`lerna`初始化了一個普通項目，以及用`create-react-app`初始化了一個`react`項目 1. 創建普通項目 ``` lerna create hello-world ``` 2. 創建 react項目 ``` yarn create react-app test-react ```  **添加依賴關系** 打開`packages/test-react/package.json` 在 dependencies 中添加 ``` "aaawu": "^0.1.0" ``` `0.1.0`這個版本號對應了`packages/aaawu/package.json`的`version` **查看各個模塊的依賴關系** ``` > yarn workspaces info yarn workspaces v1.12.1 { "aaawu": { "location": "packages/aaawu", "workspaceDependencies": [], "mismatchedWorkspaceDependencies": [] }, "test-react": { "location": "packages/test-react", "workspaceDependencies": [ "aaawu" ], "mismatchedWorkspaceDependencies": [] } } ``` **建立關聯** `yarn`的`workspaces`就起到作用了，它會自動管理`package.json`里`workspaces`字段指定包下的所有依賴。由于我們之前配置的是 ``` "workspaces": [ "packages/*" ] ``` `packages`文件下所有子包的依賴關系，它都直接解決了 直接執行命令 ``` yarn ``` `test-react`和`aaawu`需要的所有依賴包都被統一安裝到根目錄下的`node_modules`里,（除了因版本沖突無法統一的包）。因版本沖突無法統一的包，還是會安裝在各個模塊下的`node_modules`里。 **運行項目 ** 切換到`packages/test-ract`目錄下，直接 ``` npm start ``` **修改代碼** 修改 aaawu 中的代碼,是否會在 react 中顯示 修改`packages/aaawu/lib/aaawu.js` ``` "use strict"; module.exports = aaawu; function aaawu() { // TODO return "this is aaawu"; } ``` 修改 `packages/test-react/src/App.js` ``` import React from "react"; import logo from "./logo.svg"; import A from "aaawu"; import "./App.css"; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > {A()} </a> </header> </div> ); } export default App; ```