[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; ```