javascript - 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