多个入口点的Package.json

Question

我有一个图书馆，它的用途如下

import { Foo } from '@me/core';
const foo = new Foo();

那个库的package.json看起来就像

"name": "@me/core",
"version": "1.0.0",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"license": "MIT",
...

以dist/index.js为入口点。然而，现在，我只为NodeJs项目提供一个导入，为web项目提供一个导入。理想情况下，我会为NodeJs准备这样的东西

import { Foo } from '@me/core/nodejs';

如果你在做一个网络项目，你可以

import { Foo } from '@me/core/web';

我的理解是，@me/core/nodejs和@me/core/web都将是不同的NPM包，这不是我想要的。我希望它在一个npm包。

我试图更改库的index.ts文件，从

export * from './foo';

转到

import * as nodejs from './nodejs';
import * as web from './web';

export { web, nodejs };

这实际上有效，但我现在必须使用它(在NODEJS项目中)，如下所示

import { nodejs } from '@me/core';

const foo = new nodejs.Foo();

有可能有一种方法来导入这个，这样我就不用每次都需要nodejs了吗？

正如你所看到的，我不太确定我应该在这里做什么，所以任何帮助都会被感激！

更新:基于@Klaycon的建议，我看到以下错误：

​

​

Answer 1

在使用ECMAScript模块时，请参阅包入口点上的node.js文档

在包的package.json文件中，两个字段可以定义包的入口点：“主”和“导出”。所有版本的Node.js都支持“主”字段，但其功能有限:它只定义包的主入口点。 “导出”字段提供了一个替代" main“的选项，其中可以定义包的主要入口点，同时也可以封装包，从而防止除”导出“中定义的入口点之外的任何其他入口点。此封装允许模块创建者为其包定义公共接口。

因此，在您的package.json中，您可以这样定义exports：

  "main": "dist/index.js",
  "exports": {
    ".": "dist/index.js",
    "./nodejs": "dist/nodejs",
    "./web": "dist/web",
  }

Answer 2

使用exports字段的可接受的答案是一种方法，但不是唯一的方法--正如您已经发现的，类型记录目前不支持它。

看看@angular/material包，它的工作原理类似于您的想法。在@angular/material/package.json中，有一个指向空JS文件的module字段和一个指向空.d.ts文件的typings字段。但是您还得到了@angular/material/button/package.json，它(间接地)指向了MatButton的实现(以及其他一些东西)。当您使用import {MatButton} from "@angular/material/button"时，它解析这个包文件，查看它的module和typings字段，并分别使用这些字段解析运行时代码和导出类型。

您也可以这样做：@me/core/package.json将有指向空文件的module和typings字段；@me/core/node/package.json将指向特定于节点的Foo类的代码，而@me/core/web/package.json将指向浏览器版本的Foo的代码。

Answer 3

尝试将以下代码添加到tsconfig.json中

{
  "compilerOptions": {
    "moduleResolution": "NodeNext"
  }
}

然后您可以像这样导入模块：

import { Foo } from '@me/core/nodejs';

如果您不想触摸tsconfig.json，您可以在导入中使用以下内容：

import { Foo } from '@me/core/dist/nodejs';

参考文献

• 包入口点
• 支持NodeJS 12.7+包导出
• 模块解析的一种方案