Skip to content

Latest commit

 

History

History
270 lines (175 loc) · 12 KB

1.1-Nx安装环境.md

File metadata and controls

270 lines (175 loc) · 12 KB

Nx 安装环境

古人云：工欲善其事，必先利其器，这里给大家准备windows玩家必备的软件，传送门，口令：【9ofr】。

接下来需要很多命令行操作，我们需要一个强大的命令行工具，windows 已经推出了 windows terminal，不过现在命令不是很完善，这里推荐 cmder。关于 如何安装和使用 Cmder。

有了命令行工具需要一个不错的编辑器，这里推荐 vs code，点击下载安装。

推荐一些我常用的必备插件(ps: 插件不要太多，有些插件比较坑，烧内存和 cpu，注意辨别)和配置：

项目根目录下会有 .vscode 文件夹

.vscode/extensions.json  // 必备插件
.vscode/settings.json    // 项目配置

使用nvm 安装 nodejs

一般开发nodejs都需要安装nodejs环境，随着nodejs版本不断迭代，有种跟不上节奏，不同版本会有一些差异化，如果你现在开发环境是早期 nodejs 版本，那么你开心更新版本，可能就会哭了，会报各种懵逼的错误让你欲罢不能。那怎么办了，就有一个 node 版本管理的工具诞生 --- nvm。（ps：这个是 windows 用户用不了，必备软件里面 nvm-setup 就是 windows 用户专用）。关于 如何安装和使用 nvm-windows。

注意：如果电脑已经安装过 nodejs，需要先卸载，请记住它的版本号，再安装 nvm-windows。

现在你应该安装完成了 nvm-windows，那么就可以开始安装 nodejs 版本:

例如：本项目需要安装 v14.15 以上版本

nvm install v14.15

安装过程可能会出现一个错误，下载npm错误：

Please visit https://github.com/npm/npm/releases/tag/v[npm版本] to download npm.

要你去这个地址下载，其实是错误，这个指向是npm-cliv[npm 版本]，我们需要手动去下载它

https://codeload.github.com/npm/cli/zip/v[npm版本]

把它拷贝到你的 nvm 目录下，对应版本nodejs版本，解压到node_modules里，把文件夹重命名为npm。下载必备的软件里面的npm文件夹，把里面内容拷贝到对应版本nodejs版本即可。

另外一种就是借助淘宝源：

安装目录 \nvm\settings.txt 在这个文件后面跟上这 2 句

node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

然后nvm install，按提示操作即可

切换当前版本并检查是否靠谱：

nvm use v14.15
node -v   // 14.15.0
npm -v    // 6.14.8

注意： nvm-windows一定要安装好，检查靠谱，只会出现npm -v会报错，如果你按我的使用方式就不会出现问题。如果你在出问题了，可以联系我帮你看看。

使用Nx 构建项目

为什么要使用 Nx

Nx 是一组针对 Monorepos 的可扩展开发工具，它可以帮助你像 Google、Facebook 和 Microsoft 那样进行开发。它对许多前端和后端技术提供一流的支持，因此其文档具有多种风格。

使用现代工具

使用 Nx，你可以将 TypeScript，Cypress，Jest，Prettier，Storybook 添加到你的开发工作流程中。 Nx 设置了这些工具，并允许你无缝使用它们。 这些创新工具具有很多优势，可以帮助你更好，更省心地工作。

构建全栈应用程序

使用Nx，你可以使用现代框架构建全栈应用程序。你可以在前端和后端之间共享代码。 你可以使用相同的 build/test/serve 命令来增强整个开发体验。

学习 Google，Facebook 和 Microsoft 一样开发实践

使用Nx，你可以整体开发多个全栈应用程序，并在同一工作区中共享它们之间的代码。 Nx 提供了高级工具，可帮助你扩展企业发展。 Nx 还有助于实施组织的标准和社区最佳实践。

不同技术栈组合，统一构建工具

使用Nx，你可以使用 Angular、React、Web Components、Nestjs、Express、Nodejs 技术做自由组合，构建你的项目技术栈。不用担心构建工具问题，Nx 帮你一键搞定。

Monorepo vs Multrepo

什么是 Monorepo

是将所有的模块统一的放在一个主干分支之中管理。不进行分库存储，当有特定的需要的时候进行分支，但是问题修改还是在主干上操作，并有专门人员合并到分支内容上，在特定需求完结的时候，分支也将会被废弃。如果想了解更多，传送门。 优点： 1.统一的规范，语言，和 IDE 带来的是结构的完整稳定。 2.按照统一的标准进行开发，是哦程序稳定性更良好，更易解读。 3.标准化的开发流程，规避很多不必要的冲突与错误。 缺点： 1.项目过大，难以管理。 2.由于统一的标准，不同的团队可能需要对于新的规范和 IDE 进行了解学习，需要时间。 3.修改和开发可能变得繁琐，减慢效率。

什么是 Multrepo

将项目分化成为多个模块，并针对每一个模块单独的开辟一个 repository 来进行管理。 优点： 1.团队自己的 IDE，语言，以及工作步调。 2.模块更小，更易维护。 3.开发效率更高。 缺点： 1.合并困难，每个模块规范不同，同步和编译时这些问题将会集体爆发。 2.难以保证稳定性。 3.由于可能存在不同语言开发，或者不同 IDE 的情况，新建或者更新构建变得困难。

对于其他语言不熟，我们这里拿前端生态圈来说事，前端目前最火生态圈就是 npm，基本上成熟项目都是通过 package.json 来管理依赖，使用 node_modules 来存放项目依赖文件。那么 node_modules 就是一个 Black hole。随便一个项目就有几百兆依赖，你压根也不知道都安装了什么鬼东西。可怕，哈哈。

我有个 100G 的盘符，这个盘符下面我有个 github 文件夹，它是专门存放我从 github 拉取的一些别人和我自己开源项目地方，大概有 2-30 个左右，我如果想运行每个项目，那么都需要安装 node_modules ，加上公司项目也在这个盘符里，我现在只剩下 10g 左右了。

其实这种模式就是叫 multrepo，最大优点是安全，最大缺点依赖管理难于统一。

monorepo 它是一种管理 organisation 代码的方式，在这种方式下会摒弃原先一个 module 一个 repo 的方式，取而代之的是把所有的 modules 都放在一个 repo 内来管理。

目前诸如 Angular, Babel, Ember, Meteor, React, Jest, Vue3 等等都采用了 Monorepo 这种方式来进行源码的管理。

其中 Lerna 它是基于 monorepo 理念在工具端的实现。

Nx也是推崇monorepo管理模式。

安装 Nx

Nx最开始是一个Angular-cli的扩展工具，学习它成本不高，只需要你按照下列方式安装就行了

重点提示：Nx 不能解决 Angular-cli 打包编译慢的问题。可以通过 ng build library 来拆分应用。

Nx的亮点：

  • 支持 React 构建
  • 支持 React 和 Angular 共存一个项目中
  • 支持选择测试工具，可以选择 jest 和 cypress
  • 支持前后端 node 项目一起构建
  • 构建多个apps
  • 构建多个libraries

Nx 鼓励开发者在使用自定义 library，来构建项目，让你的 App 结构更清晰。

本项目使用 Angular、Nestjs 全栈开发。

你可能好奇，它们都有自己的 CLI，为什么不使用呢？

  • Angular-CLI：只支持 Angular 项目，支持 monorepo 模式，构建多个 apps，构建多个 libraries
  • Nest-CLI：支持 Nestjs 和 Angular 项目，支持 monorepo 模式，构建多个 apps，构建多个 libraries

它们都只支持一个配置文件，随着项目增大，配置 .json 体积庞大，维护管理困难。

Nx 解决了这个一问题，apps 和 libraries 有一个独立 project.json 项目配置 ，workspace.json 配置文件，只做项目和 Nx-CLI 关系映射。

目前版本 [email protected] 默认不支持 workspace.json，需要手动迁移，后面会介绍如何快速迁移。

Nx 创建工程叫工作区，可以使用以下三种方式安装：

npx

npx create-nx-workspace@latest

npm init

npm init nx-workspace

yarn create

yarn create nx-workspace

我一般使用 npx。

运行上面安装命令行以后，就等着出现npx: 166 安装成功，用时 42.249 秒

填写工作区的名字：

  • Workspace name：jianshu

然后就会出现有奖知识问答环节：选择 angular-nest

  • What to create in the new workspace (Use arrow keys)：

    • empty [an empty workspace]
    • web components [a workspace with a single app built using web components]
    • angular [a workspace with a single Angular application]
    • angular-nest [a workspace with a full stack application (Angular + Nest)]
    • react [a workspace with a single React application]
    • react-express [a workspace with a full stack application (React + Express)]
    • next.js [a workspace with a single Next.js application]

随着不断迭代，以后选择创建工作区会更多。

选择之后，出现 Creating a sandbox with Nx...，等待安装 node_modules，安装完成以后打开 vs code 就好提示安装插件，安装就好了，其中一个叫 angular-console，这是 nx 的 vs code 插件，后面生成文件，生成 lib，等全靠它。

目录结构

使用脚本命令生成 cmd命令：tree /f > tree.txt

  root
    │  .editorconfig
    │  .gitignore
    │  .prettierignore
    │  .prettierrc
    │  angular.json  整个工作区应用和库配置
    │  jest.config.js
    │  LICENSE
    │  nx.json  nx工作区应用和库关系配置
    │  package-lock.json
    │  package.json   node模块包管理
    │  README.md
    │  tsconfig.json
    │  tslint.json
    |
    ├─.vscode  vscode 配置
    │      extensions.json
    |
    ├─apps   应用
    │  ├─api  服务端
    │  ├─web  客户端
    │  └─web-e2e 客户端E2E测试
    |
    ├─libs  库
    |
    ├─node_modules node模块包
    |
    └─tools 自定义schematics工具包

迁移 workspace.json

默认整个工作区配置 angular.json，把这个文件重命名为 workspace.json。

{
  "version": 2,
  ...
}

将文件里的 version 改为 2。然后运行命令：

npm run nx generate @nrwl/workspace:convert-to-nx-project --all --no-interactive

运行项目

使用 nx console 插件：

打开插件：

分 3 块：

  • schematics：项目生成器和运行命令
  • nx commands：nx 命令
  • projects：项目

运行项目可以使用 schematics 里对应的 run 或 serve，也可以使用 projects 中，找到对应的项目，鼠标移动到 serve 上，点击右边箭头即可。

随着 vs code 不断升级，现在可以同时运行多个项目。

结语

在本文中，我们已经学习了使用 Nx 快速构建全栈工作区项目及迁移工作区和运行项目。 schematics 是可以帮助我们提升工作效率的工具。NestJS 和 Angular 有很多内置的 schematics ，可以随时使用。在本系列的后续部分中，我们将进一步研究 schematics ，请继续关注。