Nx 共享資產庫

Question

我希望我的 Nx monorepo 中的 React 應用程序檢索我的資產庫中名為common-assets所有資產。

我設法用我的 NextJS 應用程序做到了，就像這樣：

我的 NextJS 應用程序的project.json

{
  "$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"
          }
        ]
      },
...
}

我試圖通過修改項目中的資產密鑰來為我的 React App 做完全相同的事情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" />

Answer 2

做這個：

{
   "input": "./libs/common-assets/src/lib/images",
   "glob": "**/*",
   "output": "/assets/"
}

然后訪問它：

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