ES6导入和npm软件包

Question

每个人都有指向文档的链接，该文档确切解释了ES6导入应如何与npm软件包（而不是javascript模块文件）一起工作？

在npm package.json文件中，（也可能是相关的）指向“模块”的使用/重要性文档链接的顶级关键字？

例如。考虑来自juggle/resize-observer的以下内容：

package.json

{
...
"module": "lib/exports/resize-observer.js",
...
}

消费者javascript文件

import { ResizeObserver } from '@juggle/resize-observer';

在上述导入中，Chrome将请求发送到服务器“ @ juggle / resize-observer”，该目录是一个目录....那么接下来会发生什么？ （我没有这个的工作实例，并且我的服务器还没有返回任何内容，因为我不知道它应该以什么格式呈现）。此语法是否仅可用于最终被实际文件替换的某种构建工具？

我看过npm网站/谷歌，找不到任何相关文档。

更新仍在等待相关文档的链接（目前尚无相关的Google结果），但对于任何问相同问题的人：显然，您需要服务器进行“模块解析”。或者，您可以使用Snowpack或捆绑器，例如。 Webpack。

Answer 1

显然，npm / node软件包并未考虑到浏览器或基于任何W3C / Web模块标准规范进行打包。

有关模块分辨率的信息，请参见here。

因此，当前要在浏览器中使用npm软件包，必须执行以下操作之一

1. 使用捆绑包，例如webpack
2. 使用snowpack
3. 使用可解决模块请求的CDN
4. 在您自己的服务器中实现npm模块解析
5. 找到程序包入口点，并在ES6 import语句中使用它。 但是，如果程序包的json“ main”属性在后续更新中更改，则您 将需要更新您的代码以体现这一点。