我有一个Node.js库包(我们称它为"OasisLib"),它有一个名为TypeGenerator.ts的文件.

文件中发生的事情的确切逻辑并不相关.但这需要在构建项目时访问文件系统中的文件.因此,我们使用let fs = require('fs')将一些额外的文件写入文件系统.

此OasisLib需要在两个不同的Node.js模块中使用:

  1. OasisUI-这是一个Reaction应用程序
  2. OasisLibExtension--这是另一个团队必须能够实现的另一个Node.js库,在这里我们需要使用OasisLib中定义的TypeGenerator在构建过程中生成额外的文件.

因此,OasisLib在UI包和非UI包中都使用,而TypeGeneratorin基础库包只在构建时在扩展库中需要.我们在index.ts中将TypeGenerator作为导出添加到库包中,从而将其导出.

然而,当我运行UI包时,我们在UI的主页上收到以下错误:

ERROR in ../OasisLib/dist/src/gen/TypeGenerator.js 48:15-28
Module not found: Error: Can't resolve 'fs' in '/Volumes/Code/OasisLib/src/OasisLib/dist/src/gen'

因此,正在编译JS文件,尽管我没有在UI包中使用该文件.

这就是我想要弄清楚的.有没有办法从OasisLib模块中导出TypeGenerator,这样我就可以在LibExages包中使用它,而不会在UI包中引发问题?

或者,我可以在启动UI Reaction应用程序时排除特定文件吗?

我try 在OasisUI中添加以下内容,但没有解决问题:

"exports": {
    "../OasisLib/dist/src/gen/TypeGenerator.js": {
      "ignore": true
    }
  },
  "browser": {
    "fs": false
  }

OasisLib的Package.json.

{
  "name": "@myorg/oasis-lib",
  "version": "1.0.0",
  "description": "",
  "author": "",
  "license": "UNLICENSED",
  "main": "dist/index.js",
  "types": "dist/types/index.d.ts",
  "scripts": {
    "clean": "rm -rf dist && rm -rf node_modules",
    "generate-models": "node ./dist/src/gen/GenerateTypes.js && tsc",
    "build": "tsc && npm run generate-models",
    "watch": "tsc -w",
    "prepublishOnly": "npm run build && npm run test",
    "test:watch": "vitest",
    "test": "vitest run --coverage --passWithNoTests",
    "start": "env-cmd -f .env.staging react-scripts start"
  },
  "files": [
    "dist/src/*",
    "dist/types/*"
  ],
  "npm-pretty-much": {
    "runTest": "never"
  },
  "dependencies": {
    "ion-js": "^4.3.0"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^6.0.1",
    "@testing-library/react": "^14.1.2",
    "@types/jest": "*",
    "@types/node": "^16.18.25",
    "@vitejs/plugin-react": "^4.0.3",
    "@vitest/browser": "^0.34.6",
    "@vitest/coverage-v8": "^0.34.6",
    "env-cmd": "^10.1.0",
    "prettier": "2.8.4",
    "react-scripts": "^5.0.1",
    "typescript": "^4.9.5",
    "vite": "^4.4.5",
    "vitest": "^0.34.6"
  },
  "peerDependencies": {
    "@types/react": ">=18",
    "@types/react-dom": ">=18",
    "react": ">=18",
    "react-dom": ">=18"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

推荐答案

IIUC,您有3个项目:

  • (A)OasisLib具有用于其自身构建的运行时对象(A1)和TypeGenerator(A2),所有这些对象都通过单个index.ts公开
  • (B)用户界面react 应用程序导入(A1)
  • (C)使用(A2)进行自己的构建的Node lib扩展

因为(A2)是same index.ts文件AS(A1)的一部分,如果(B)试图通过该入口点导入(A1),并且它不执行树摇动,那么它实际上也将包括(A2).

但您可以通过单独的入口点公开(A1)和(A2).确切的配置取决于(A)项目中的构建引擎及其构建步骤.

这样,(A1)与(A2)TypeGenerator无关(即使后者仍然可以在需要时导入(A1)),并且(B)UI APP可以独立于(A2)导入(A1).

而(C)也可以通过单独的入口点导入(A2).


如果您直接使用tsc来构建(A)库,并且您的tsconfig.json不是太复杂,那么它应该已经将每个.ts文件转换成它们自己的.js.d.ts文件.因此,您可以直接导入它们,就好像每个文件都是一个入口点:

// In (C) build script
// Instead of:
import { TypeGenerator } from "@myorg/oasis-lib"; // Resolves to package.json > main, i.e. dist/index.js

// ...directly import the desired file:
import { TypeGenerator } from "@myorg/oasis-lib/dist/src/gen/TypeGenerator";

现在你可以从你的index.ts中go 掉TypeGenerator,(B)不再被(A2)污染.


您甚至可以使用package.json中的"exports"字段来进一步调优您公开的API/入口点:

// (A) package.json
{
  "name": "@myorg/oasis-lib",
  "exports": {
    ".": {
      "types": "./dist/types/index.d.ts",
      "default": "./dist/index.js"
    },
    "type-gen": {
      "types": "./dist/src/gen/TypeGenerator.d.ts",
      "default": "./dist/src/gen/TypeGenerator.js"
    }
  }
}
// (B) UI app component file
import { RuntimeObject } from "@myorg/oasis-lib"; // Resolves to exports > . > types + default

// (C) lib extension build script file
import { TypeGenerator } from "@myorg/oasis-lib/type-gen"; // Resolves to exports > type-gen > types + default

Javascript相关问答推荐

序列查找器功能应用默认值而不是读取响应

Phaser框架-将子对象附加到Actor

Google图表时间轴—更改hAxis文本 colored颜色

Plotly热图:在矩形上zoom 后将zoom 区域居中

使用下表中所示的值初始化一个二维数组

未捕获错误:在注销后重定向到/login页面时找不到匹配的路由

用JavaScript复制C#CRC 32生成器

Prisma具有至少一个值的多对多关系

WhatsApp Cloud API上载问题:由于MIME类型不正确而导致接收&Quot;INVALID_REQUEST";错误

Angular 形式,从DOM中删除不会删除指定索引处的内容,但会删除最后一项

Reaction Redux&Quot;在派单错误中检测到状态Mutations

有没有一种直接的方法可以深度嵌套在一个JavaScript对象中?

将嵌套数组的元素乘以其深度,输出一个和

将Singleton实例设置为未定义后的Angular 变量引用持久性行为

Chrome上的印度时区名S有问题吗?

如何将对象推送到firestore数组?

如何调整下拉内容,使其不与其他元素重叠?

我想为我的Reaction项目在画布上加载图像/视频,图像正在工作,但视频没有

如何在函数组件中保留对计时器的引用

如何从图表中映射一组图表-js使用REACT