将函数动态导入 ES5 JS 文件？

Question

这可能看起来有点令人费解，所以如果确实如此，我提前道歉。 我正在尝试在 Node.js 中为 Chrome 扩展创建一个构建工具，因此最终的 JS 文件必须符合 ES5。

我为导出对象的扩展中的每个设置都有单独的 JS 文件，该对象中的函数需要导入到 contentScript.js 文件中并放置在它自己的设置对象中。

我已经整理了一个基本的屏幕截图，显示了这应该如何流动，但我不确定如何解决这个问题。 我已经考虑过在 contentScript 中进行某种类型的字符串插值，然后 Node 会替换它，但这似乎更像是一种解决方法而不是解决方案。

假设我们有一个名为 settings 的文件夹，在这些 settings 中有两个 JavaScript 文件，每个文件都有不同的名称、类型和功能，它们看起来像这样。

// settingName1.js
module.exports = {
    name: 'Setting Name 1',
    type: 'switch',
    function: () => {
        console.log('Setting 1 initialized');
    }
}

理想情况下，这两个文件都将它们各自的函数导入到 contentScript 中，例如在设置对象下。

// contentScript.js
    // Settings Functions Go Here
    const settings = {
        settingName1: function() {
            console.log('Setting 1 initialized')
        },
        settingName2: function() {
            console.log('Setting 2 initialized')
        }
    }
});

基本上是从源设置文件本身剪切/复制函数，并将其粘贴到 contentScript 设置对象中的函数（使用文件名命名）下。

Answer 1

这是生成文件的一个想法：

// header on the file
const capturedExports = [];

// insert this prologue before each inserted file
(function() {
// =============================
// insert settingName1.js here
module.exports = {
    name: 'Setting Name 1',
    type: 'switch',
    function: () => {
        console.log('Setting 1 initialized');
    }
}

// =============================

// insert this epilogue after each inserted file
})();
capturedExports.push(module.exports);


// insert this prologue before each inserted file
(function() {
    // =============================
// insert settingName2.js here
module.exports = {
    name: 'Setting Name 2',
    type: 'switch',
    function: () => {
        console.log('Setting 2 initialized');
    }
}
// =============================

// insert this epilogue after each inserted file
})();
capturedExports.push(module.exports);

// insert code that builds the settings object
const settings = {};
for (let exportItem of capturedExports) {
    let name = exportItem.name.replace(/\s/, "");
    name = name.slice(0, 1).toLowerCase() + name.slice(1);
    settings[name] = exportItem.function;
}

您执行以下步骤以输出一个新文件，该文件是所有settingNamex.js文件的集合。

1. 创建新文件。
2. 使用const capturedExports = [];向其写入标头const capturedExports = []; 线和 IIFE 的开始。
3. 对于每个settingNameX.js文件，将该文件写入其中。
4. 然后写IIFE的close和capturedExports.push(module.exports); 之后。 这将获取之前分配给module.exports任何代码并将其添加到caputuredExports数组中。
5. 对每个settingNameX.js文件重复此过程。
6. 然后，插入从capturedExports数组构建设置对象的代码。

将每个插入的模块包含在它自己的 IIFE 中，赋予它自己的范围，因此它不会与其他插入的模块产生符号冲突。

这做出以下假设。

1. 它假定从每个的代码settingNameX.js文件分配合适的对象来module.exports喜欢你的例子说明。 在现实世界中，您可能想要添加一堆测试来查看是否将正确的东西分配给 module.exports（正确的防御性编码）。
2. 它假设插入的模块没有将冲突的东西分配给全局对象。
3. 它假设您自己的模块不需要module.exports或者可以在插入的模块使用它后在最后覆盖它。 如果这个假设不正确，那么您必须手动将module.exports =更改为您在主模块中定义的其他内容。