模块和非模块使用的脚本 - JavaScript答案

【问题标题】：script for both modules and non-module usage - JavaScript模块和非模块使用的脚本 - JavaScript
【发布时间】：2020-09-09 10:42:39
【问题描述】：

这是我的问题：我创建了一个库以在 Chrome 扩展程序中使用。这个库导出了两个类，一个应该在后台脚本中导入，一个在内容脚本中。

后台脚本（以及扩展页面中使用的其他脚本）可以处理模块，所以我想使用 ES6 模块的原生“导入”/“导出”功能。

内容脚本不支持模块。这意味着如果我在库脚本中使用“export”关键字，则会引发错误，并且我将无法再使用该库。

目前，我根本没有实现模块，这解决了问题，但我想实现这个功能，以便在有人可以访问它时使用它。

有没有办法为这两种脚本提供我的库功能作为模块和非模块？这真的是我应该做的吗？

【问题讨论】：

除了How to import ES6 modules in content script for Chrome Extension 中列出的方法之外别无他法，当然也可以使用 webpack 或类似工具构建扩展。
感谢您的评论。我确实看到了那个线程，动态导入真的很酷，但是那里解释的方法不能应用于广泛的用户（记住这是一个库）。动态导入（在我的情况下这是唯一可用的方法）对于 chrome 版本可能有点过于严格......你怎么看？
"有没有办法将我的库功能作为模块和非模块提供" - 是的，当然有。但不是作为单个文件。您将需要分发 ES6 构建和脚本构建。
感谢@Bergi，这看起来是一个不错的折衷方案（尽管我必须想出一个好方法来为此设置开发环境）。如果没有更好的答案，我可能会这样做

【解决方案1】：

最后我设置了两个git分支：

1 - 在第一个中，我只是保留了没有“导出”的文件，所以没有 ES6 模块功能

2 - 这个另一个分支，我决定将它设置为在 NPM 上发布，并在这个分支中导出我的类。如果您使用 NPM 进行开发，那么您很可能还有一个像 webpack 这样的打包器来跟踪模块和依赖项。

每当我进行更改时，我都会在 master（无导出）分支中进行更改，然后在 npm 分支中合并更改，以避免重复编写相同的代码

【讨论】：