Nx共享资产库

Question

我希望我的Nx中的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中的资产密钥，对react做完全相同的事情

我的反应应用程序的project.json：

  "$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

我将资产保存在图像文件夹中

"assets": [
      "apps/boost/src/favicon.ico",
      "apps/boost/src/assets",
      {
        "input": "libs/common-assets/assets/src/lib/images",
        "glob": "**/*",
        "output": "assets"
      }
    ],

我也能把它应用到其他项目中

 <img alt="logo" src="/assets/logo.png" />