Question

我想编写一个包含两个文件的javascript库：

snabbpixi.js

export function init() {
}

pixiapi.js

export function createElement() {
}

我想这样使用这个库：

import { init } from 'snabbpixi';
import { createElement } from 'snabbpixi/pixiapi';

如果我什么也不做，请将库的package.json设置为：

{
  "main": "src/snabbpixi.js"
}

第二次导入不起作用（import { createElement } from 'snabbpixi/pixiap'）

如果我编译该库并使用webpack导出为umd格式，那么它也将不起作用。

如何配置我的库，以便我可以像这样导入：

import { createElement } from 'snabbpixi/pixiap'

Answer 1

我通常在TypeScript中执行这种操作，而不是直接在JavaScript中执行，但是希望它的工作方式基本上相同...

尝试创建一个新文件（通常名为index.js），其内容如下：

export * from './snabbpixi'; // Adjust paths as needed for your particular case.
export * from './snabbpixi/pixiapi';

然后将index.js设为您的main。

您将要使用的导入将被展平，但是看起来更像：

import { init, createElement } from 'snabbpixi';

Answer 2

使用import { Something } from 'somewhere'时，您正在从给定文件或目录中调用命名导出。

如果两个文件位于不同目录中，则可以将index.js文件添加到每个目录中，然后使用export { default as function } from './file' 为此，您必须从pixiapi和snabbpixi中导出默认文件。

如果两个文件都导入到index.js中，那么您仍将它们导出为默认文件。但是随后您将执行以下操作。

import file1 from './file1'
import file2 from './file2'

export default {
file1,
file2,
}

这也将允许您使用命名的导入并将它们保存在同一目录中