webpack js文件作用域-导入功能文件

Question

我正在学习第一次使用webpack 。 我真的坚持使用gulp从来没有问题的东西，那就是它作用于不同文件的方式。

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

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

根据这里的阅读，我是否需要分别导入每个函数？ 如何导入整个文件？

从链接的示例中：

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（）

2. 另一种方法是创建“命名”出口

helpers.js：

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

要导入所有数据，请使用：

import * as myHelpers from 'helpers'

然后类似于前面的示例，调用-> myHelpers.a（）

但是键入“ myHelpers”并不总是很方便，因此在这里我们可以使用命名导出带来额外的好处-您可以按名称导入它，因此我们可以这样进行：

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

然后您可以调用a（）

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

为什么这样呢？

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

Webpack-ProvidePlugin

好的，但是如果您真的经常使用那些助手呢？ 您是否需要将它们导入各地？ 从技术上讲-是的。 但是Webpack可以为我们实现自动化，请看一下Webpack-ProvidePlugin，它可以自动加载模块，而不必到处导入模块。

对于Webpack 3，如果使用第一个解决方案，它将看起来像这样：

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

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