Nx共享资源库

Question

我希望我的 Nx monorepo 中的 React 应用程序能够检索我的资源库中名为common-assets.

我设法用我的 NextJS 应用程序做到这一点，如下所示：

project.json我的 NextJS 应用程序

{
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/clients",
  "projectType": "application",
  "implicitDependencies": ["common-assets"],
  "targets": {
    "build": {
      "executor": "@nrwl/next:build",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "root": "apps/clients",
        "outputPath": "dist/apps/clients",
        "assets": [
          {
            "input": "libs/common/assets/src/lib",
            "glob": "**/*",
            "output": "assets"
          }
        ]
      },
...
}

我尝试通过修改中的资产密钥来为我的反应应用程序做完全相同的事情project.json

project.json我的 React 应用程序：

  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/sellers/src",
  "projectType": "application",
  "implicitDependencies": ["common-assets"],
  "targets": {
    "build": {
      "executor": "@nrwl/web:webpack",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "compiler": "babel",
        "outputPath": "dist/apps/sellers",
        "index": "apps/sellers/src/index.html",
        "baseHref": "/",
        "main": "apps/sellers/src/main.tsx",
        "polyfills": "apps/sellers/src/polyfills.ts",
        "tsConfig": "apps/sellers/tsconfig.app.json",
        "assets": [
          "apps/sellers/src/favicon.ico",
          "apps/sellers/src/assets",
          {
            "input": "libs/common/assets/src/lib",
            "glob": "**/*",
            "output": "src/assets"
          }
        ],
        "styles": ["apps/sellers/src/styles.scss"],
        "scripts": [],
        "webpackConfig": "@nrwl/react/plugins/webpack"
      },
      "configurations": {
        "development": {
          "extractLicenses": false,
          "optimization": false,
          "sourceMap": true,
          "vendorChunk": true
        },
        "production": {
          "fileReplacements": [
            {
              "replace": "apps/sellers/src/environments/environment.ts",
              "with": "apps/sellers/src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "namedChunks": false,
          "extractLicenses": true,
          "vendorChunk": false
        }
      }
    },
    "serve": {
      "executor": "@nrwl/web:dev-server",
      "defaultConfiguration": "development",
      "options": {
        "buildTarget": "sellers:build",
        "hmr": true
      },
      "configurations": {
        "development": {
          "buildTarget": "sellers:build:development"
        },
        "production": {
          "buildTarget": "sellers:build:production",
          "hmr": false
        }
      }
    },
    "lint": {
      "executor": "@nrwl/linter:eslint",
      "outputs": ["{options.outputFile}"],
      "options": {
        "lintFilePatterns": ["apps/sellers/**/*.{ts,tsx,js,jsx}"]
      }
    },
    "test": {
      "executor": "@nrwl/jest:jest",
      "outputs": ["coverage/apps/sellers"],
      "options": {
        "jestConfig": "apps/sellers/jest.config.ts",
        "passWithNoTests": true
      }
    }
  },
  "tags": []
}

但这不起作用...

Answer 1

如何在 NX Monorepo 中创建图标组件库：

（因为这是我遇到的真正问题）

为了创建我的图标库，我最终创建了一个包含我的 svg 图标的 nx 库名称图标：
libs->assets->icons

图书馆组织：

• 资产文件夹：包含我的所有.svg图标文件（有些嵌套在文件夹中以按系列对我的图标进行分组）
• lib 文件夹：包含我的图标 svgr 组件（具有相同的文件夹结构）

怎么运行的

我正在使用@svgr/cli库，它可以使用命令行将.svg文件转换为jsx/tsx组件

我在我的中创建了一个脚本project.json

"targets": {
    "svgr": {
      "executor": "nx:run-commands",
      "options": {
        "commands": [
          "svgr --typescript -d libs/assets/icons/src/lib libs/assets/icons/src/assets"
        ]
      }
    }
  },

因此svgr，获取所有svg files资产文件夹（命令中的第二个路径）并将它们转换为 lib 文件夹中的 tsx 组件

用法

tsconfig.base.json然后我在工作区的根目录下创建了一条路径：

"@my-app/icons": ["libs/assets/icons/src/lib/index.ts"],

所以我可以像这样在我的不同应用程序/库中导入我的图标，如下所示：

import { ChevronDown } from '@my-app/icons/layout';

希望能有所帮助；）