Mozilla 插件中的模块和动态导入

Question

我找到了一种将 Chrome 扩展程序转换为模块的便捷方法（更易于维护等）。我是这样做的https://stackoverflow.com/a/53033388/9182284（将 background.js 变成一个模块，然后使用动态导入来获取模块）。

导入的简化版：

(async () => {
  const src = chrome.extension.getURL("your/content_main.js");
  const contentMain = await import(src);
  contentMain.main();
})();

我的问题是：如何在 Mozilla Firefox 中实现它？当我为这两种浏览器开发时（首先是 Chrome，然后将内容复制到 Firefox 文件并更改需要的内容）。早些时候，我只是采取了简单的方法，将所有功能包含在 Firefox 版本所需的文件中，但由于我至少有 20 个文件，所以编辑所有文件等会变得乏味。

当我尝试在 Firefox 插件中使用动态导入时，它根本不加载脚本（没有错误日志或控制台中的任何内容），所以我不完全知道问题所在（Firefox 只是不支持它吗？全部？）。

Answer 1

如果您不介意使用构建工具，我发现parcel 可以很好地解决这个问题。使用web extension plugin。

通过 NPM 安装

$ npm install parcel parcel-plugin-web-extension --save-dev

从终端构建

$ parcel build --out-dir dist-firefox dist/manifest.json