Skip to content

Latest commit

 

History

History
204 lines (125 loc) · 4.71 KB

README_CN.md

File metadata and controls

204 lines (125 loc) · 4.71 KB
Raw

Monorepo React Template

基于 Lerna 的单一存储库示例，它创建了一个用于管理和发布多个包的现代构建系统。

screenshot.

目录结构

monorepo-react-template/
├── README.md
├── README_CN.md
├── LICENSE
├── lerna.json  
├── nx.json
├── package.json
├── package-lock.json
├── config/
│   └── custom.webpack.config.js    ------------ (设置 `react-scripts` 命令的 webpack 配置)
│   └── grpc.config.js    ---------------------- (复制 `ts-protoc-gen` 包的文件，为了在 Lerna 环境下独立开发包无法生成 proto 文件)
├── packages/ 
│   ├── front-end/     ------------------------- (基于nextjs, 应该进入此目录单独编译它)
│   ├── plugin-component/  --------------------- (使用 TypeScript 编译)
│   ├── plugin-1/   ---------------------------- (依赖于 `plugin-component`)
│   ├── plugin-2/   ---------------------------- (使用 create-react-app 5+ 的 `react-scripts` 命令)
│   └── .../
└──

入门

确保您的计算机上是否安装了 Node 14+.

第1步：通过运行以下命令创建一个新的 Lerna 工作空间：

$ cd /{your_directory}/monorepo-react-template
$ npx lerna init

第2步：安装依赖（必须）

它会将 packages/ 目录里的所有资源的依赖都自动安装，并且不会重复。

$ npm install

第3步：要打开可视化效果，请运行：

$ npx nx graph

第4步：要构建所有项目，请运行

$ npm run cra:init
$ npm run grpc:init
$ npx lerna run build

或者构建你想要的包（推荐使用此命令）：

$ npm run cra:init
$ npm run grpc:init
$ npx lerna run build --scope=plugin-1 --scope=plugin-2 --scope=plugin-component

请不要全局安装 learn 来使用 lerna run build 命令

第5步：(可选) 使用自定义的脚本，如：

$ npx lerna exec npm run export --scope=plugin-2

⚠️ 提示1

确保 packages/plugin-component 已经被复制到 node_modules 目录中, 因为 packages/plugin-1 依赖于 packages/plugin-component.

⚠️ 提示2

packages/ 目录中的项目不应该包含 node_modules/ 文件夹。

packages中项目的 scripts 配置需要支持全局的，比如不存在 react-scripts 命令。 您需要先全局安装它。 其他命令也是如此。

$ sudo npm install --g react-scripts

同理:

$ sudo npm install --g webpack webpack-cli

⚠️ 提示3

除 packages/front-end 外的其它 packages 内的项目依赖项应该在根目录的 package.json 文件中配置。

⚠️ 提示4

如果npm包安装失败，请先执行以下命令

$ sudo npm cache clean --force

或者

$ sudo chown -R 501:20 "/Users/<YOUR_USER_NAME>/.npm"

⚠️ 提示5

Failure Logs:

NX dlopen(/<package_name>/node_modules/@nrwl/nx-darwin-x64/nx.darwin-x64.node, 1): no suitable image found. Did find:

/<package_name>/node_modules/@nrwl/nx-darwin-x64/nx.darwin-x64.node: cannot load 'nx.darwin-x64.node' (load command 0x80000034 is unknown)
/<package_name>/node_modules/@nrwl/nx-darwin-x64/nx.darwin-x64.node: cannot load 'nx.darwin-x64.node' (load command 0x80000034 is unknown)

如果出现以上错误，请确保 nx 包，即 node_modules/@nrwl 的版本是 15.7.2，15.8.x 以上的版本无法正确运行 lerna 和 nx 命令。

nx 的内核版本与您当前使用的操作系统有关。 如果您不能正常使用 Lerna 或 NX 命令，请升级您的操作系统或降级 nx 的版本号（配置 package.json 的依赖项）。

或者，如果运行失败也可以通过使用环境变量 NX_NON_NATIVE_HASHER=true 来禁用 Rust hasher。 这将导致任务 runner 使用 git 将其用于哈希文件，而不是由版本过老的本机操作系统实现（快速）。

更多的命令请参考 Here.

⚙️ 自定义构建功能配置

从输出包中排除依赖项，您可以更改 package.json 文件：

buildConfig 属性将链接到 Webpack 配置。

{
    ...
    "buildConfig": {
        "externals": {
            "react": "React",
            "react-dom": "ReactDOM"
        }
    },
    ...
}

如果要取消外部文件设置，请修改为:

{
    ...
    "buildConfig": {
        "externals": ""
    },
    ...
}

感谢

许可证

Licensed under the MIT.