typescript npm 包 - 如何不必从“dist/”导入答案

【问题标题】：typescript npm package - how to not having to import from "dist/"typescript npm 包 - 如何不必从“dist/”导入
【发布时间】：2020-02-21 13:25:37
【问题描述】：

我正在尝试构建一个实用程序 npm 包。在我的src 目录中，我有一堆声明多个接口/类型的打字稿文件。例如在src/value-updatable.ts 我有：

export interface UnaryValueUpdatable<T> {
  value: T;
  onChange: (value: T) => void;
}

我将整个源代码编译为dist/，因为它是一个实用程序包，没有没有条目或主文件，我只想在其他项目中使用这些类型。我什至不确定是否需要编译，但问题仍然相同。当我在不同的项目中安装包时，我必须从 dist/ 或 src/ 导入，而不是从包名本身导入。

例如：

import {UnaryValueUpdatable} from "my-utility-package/dist/UnaryValueUpdatable"

我必须如何配置我的包以公开像这样的“漂亮”路径：import {whatever} from "my-utility-package/whatever"？

package.json：

{
  "name": "my-utility-package",
  "version": "1.0.0",
  "files": [
    "dist/**/*"
  ],
  "scripts": {
    "build": "tsc"
  },
  "license": "MIT",
  "dependencies": {
    "typescript": "^3.6.4"
  }
}

tsconfig：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "commonjs",
    "outDir": "dist",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "declaration": true,
    "jsx": "react"
  },
  "include": ["src"],
  "exclude": ["dist"]
}

【问题讨论】：

如果没有一些构建工具来以这种方式设置已发布的包，请不要认为这是可能的，github.com/npm/npm/issues/10506
谢谢@WayneC。基本上我知道的每个包都有我试图实现的那种导入。通常使用哪种工具来实现这一目标？
@PhilipFeldmann 你解决了吗？我也有同样的问题。
@walter_dl 不，不幸的是我仍在通过 dist 路径访问它...
您也许可以在此答案中使用该解决方案：stackoverflow.com/a/62482409/5574183

标签： typescript npm package.json tsconfig

【解决方案1】：

您可以在项目根目录中创建包含package.jsonss 的目录，这些目录指向您要在dist 中公开的目录。

您可以将项目结构为：

package.json (for entire project)
src
 | secondary-package-name
   |- index.ts
secondary-package-name
 |- package.json (for secondary-module-name)
dist
 |- generated files

您的辅助模块的 package.json 只需要包含

{
  "name": "package/secondary-package-name",
  "private": true,
  "main": "../dist/secondary-package-name/index.js"
}

指向你的dist

然后您应该能够像这样引用辅助包中的导出：

import { someFn } from "package/secondary-package-name"

如果它是从该目录中的 index.ts 文件中导出的

您还需要确保主 package.json 的 files 字段包含新目录：

"files": [
  "dist",
  "secondary-package-name"
],

（原在https://stackoverflow.com/a/62482409/5574183回答）

【讨论】：