嘿，我来帮你梳理下NX里这两个常见操作的步骤，都是平时开发常用的技巧～

一、导入你生成的自定义NX库 #

NX生成自定义库后，其实已经帮你做好了大部分配置，直接用就行：

• 首先确认你的库已经通过nx generate library命令正确生成，默认会放在工作区的libs/目录下。
• 在应用的组件、模块或服务中，直接通过NX自动配置的路径别名导入。比如你的库别名是@my-workspace/ui-toolkit，在app.component.ts里可以这么写：

  import { ButtonComponent } from '@my-workspace/ui-toolkit';
  

• 要是不确定别名，可以去根目录的tsconfig.base.json文件里查看paths字段，NX已经自动为每个库添加了映射，示例如下：

  {
    "compilerOptions": {
      "paths": {
        "@my-workspace/ui-toolkit": ["libs/ui-toolkit/src/index.ts"]
      }
    }
  }
  

• 最后别忘了在使用库内容的模块中做对应配置：比如组件要加到declarations数组，服务如果不是providedIn: 'root'的话，要加到providers数组里。

二、手动为NX添加外部第三方库 #

分两种场景来处理，覆盖大部分常见情况：

场景1：添加普通第三方库（比如lodash、axios） #

• 直接在工作区根目录或目标应用目录执行安装命令，推荐给特定应用安装来保持依赖隔离：

  # 全局安装到工作区
  npm install axios
  # 仅安装到指定应用
  npm install axios --prefix apps/my-react-app
  

• 安装完成后直接在代码里导入使用即可：

  import axios from 'axios';
  

• 如果是全局样式类库（比如bootstrap），需要在应用的project.json（或Angular项目的angular.json）的build配置中，把样式文件加到styles数组：

  {
    "targets": {
      "build": {
        "options": {
          "styles": [
            "node_modules/bootstrap/dist/css/bootstrap.min.css",
            "apps/my-app/src/styles.css"
          ]
        }
      }
    }
  }
  

场景2：添加带NX原理图的库（比如@nrwl系列扩展库） #

• 有些库提供了NX专属的原理图，能自动帮你配置工作区，比如安装NX的Nest扩展：

  nx add @nrwl/nest
  

• 这个命令会自动完成依赖安装、工作区配置更新，甚至生成初始代码，比手动配置高效很多。
• 如果没有对应NX原理图，就按照普通库的方式安装，之后手动调整tsconfig.base.json的路径映射，或者修改构建配置即可。

内容的提问来源于stack exchange，提问作者adnane abouchadi