webpack从不同的文件导入函数

Question

我需要从不同的文件中导入所有函数并将它们用作普通函数，只需按名称调用它们：helloWorld()

基本上我想从不同的文件中导入函数，并在此文件的范围内使用其中的一些函数。我知道eval()，但我听说它很危险。

我知道两种方式，但没有一种是完美的。

如果你在functions.js文件中有千个函数，那么这个函数很糟糕，因为你必须在这个导入中将它们全部命名。

import { doSomething } from './functions.js';

这个很糟糕，因为你必须在所有外部函数之前指定前缀。

import * as f from './functions.js'; 

我想要这样的东西

import * from './functions.js';

你可以像这样调用函数：

helloWorld();
makeMeSomeCoffee();

我的目标是在几个电子窗口之间共享一些常用功能。我想为我的代码添加一些模块化，并遵守DRY原则。

有关如何实现这一目标的任何线索？

Answer 1

Webpack的ProvidePlugin可能会帮助你解决这个问题。

new webpack.ProvidePlugin({
  helloWorld: ['./functions', 'helloWorld'],
  // ...
})

虽然对我来说确实有点过分，但我可能会坚持使用破坏性的导入。

Answer 2

如果您只是捆绑JS并且不使用Node作为服务器，我会使用webpack脚本加载器。

您可以通过NPM安装它，这里是文档： https://webpack.js.org/loaders/script-loader/