webpack js文件范围 - 导入函数文件

Question

我正在学习第一次使用webpack。我真的遇到了gulp从未出现问题的事情，这就是它对不同文件进行定位的方式。

我有一个包含多个独立函数的文件（helpers.js）。

function a() {
}
function b() {
}
function c() {
}

根据我的reading here，我是否需要单独导入每个功能？如何导入整个文件？

来自链接中的示例：

a.js：

export var a = 4;

b.js

import { a } from "./b.js";
var b = a+1;
console.debug(b);

Answer 1

我怀疑你已经使用了一些连接插件来获取gulp并且你的范围是“共享”的。 使用ES6模块，您必须准确定义要导出和导入的功能，因为每个文件的范围是分开的。

所以在你的例子中，我们可以这样做：

1. 在helpers.js中创建默认导出并定义要导出的数据。

helpers.js

function a(){}
function b(){}
function c(){}

export default {a,b,c}

以这种方式导入数据：

import myHelpers from 'helpers'

然后使用助手a，你需要调用myHelpers.a（）

1. 另一种方法是创建“命名”导出

helpers.js：

export function a(){}
export function b(){}
export function c(){}

要导入所有数据：

import * as myHelpers from 'helpers'

然后类似于前面的例子，调用 - ＆gt; myHelpers.a（）

但输入“myHelpers”并不总是方便，所以我们可以在这里使用命名导出的额外好处 - 你可以用名字导入它，所以我们可以这样做：

import {a,b,c} from 'helpers'

然后你可以打电话给（）

您必须输入要导入的所有名称。没有“捷径”。

为什么这样？

• 更好地控制您导入代码的确切内容，可选“树摇动”
• 导入的模块之间没有冲突

Webpack - ProvidePlugin

好的，但如果你经常使用这些助手怎么办？你需要到处输入它们吗？技术上 - 是的。但是Webpack可以为我们自动化，看看 Webpack - ProvidePlugin ，它会自动加载模块而不必在任何地方导入模块。

对于Webpack 3，如果你使用第一个解决方案，它将如下所示：

new webpack.ProvidePlugin({
  helpers:['path/to/module/helpers', 'default'],
}), 

这将使帮助者像“全局”一样可用，并且您将能够使用helpers.a（）