Question

说我的图书馆结构如下：

my-library
|-- lib
|   |
|   |-- foo
|   |   |--index.js
|   |
|   |-- bar
|       |--index.js
|
|---src
|   |-- foo
|       |-- button.js
|       |-- index.js
|   |-- bar
|       |-- button.js
|       |-- index.js
|-- package.json

我想这样导入这些软件包：

import { button } from 'my-library/foo'

import { button } from 'my-library/bar'

这可能吗？

使它起作用的唯一方法是将其导入为：

import { Button } from 'my-library/lib/foo'

如果有帮助，我正在使用Babel。我应该只转换到根目录而不使用lib目录吗？

我正在查看执行此操作的软件包，例如lodash和React Native Vector Icons，它们在其中指定要导入的内容。

此处有类似问题：Root directory in package.json

Answer 1

ECMAScript模块（ES模块）在 package.json 中支持名为experimental的exports属性，该属性允许子模块别名。

使用此配置给出 package.json 文件：

{
  "name": "my-library",
  "exports": {
    "./foo/": "./lib/foo/",
    "./bar/": "./lib/bar/"
  }
}

您应该能够导入以下模块：

import { button } from 'my-library/foo'
import { button } from 'my-library/bar'

另一个选择是更新您的构建脚本：

将./my-library/package.json复制到 ./my-library/lib/package.json
根据需要更新main字段
从./my-library/lib目录发布

关于更新main字段，您可能需要考虑添加一个./my-library/lib/index.js文件，该文件可以从库中导出每个模块，供希望从固定路径导入的使用者使用（但是，在浏览器环境中）这会增加其捆绑包的大小）：

import { button } from 'my-library'

在npm模块中导入不同的嵌套包

1 个答案: