如何正确导出/导入模块以在 javascript 中使用库答案

【问题标题】：How to properly export/import modules for library usage in javascript如何正确导出/导入模块以在 javascript 中使用库
【发布时间】：2019-07-16 16:10:55
【问题描述】：

我想写一个包含两个文件的 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'

【问题讨论】：

标签： javascript webpack ecmascript-6 umd

【解决方案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';

【讨论】：

【解决方案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,
}

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

【讨论】：