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

【问题标题】：webpack js file scope - import functions filewebpack js 文件范围 - 导入函数文件
【发布时间】：2017-08-09 02:15:06
【问题描述】：

我正在学习第一次使用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);

【问题讨论】：

【解决方案1】：

我怀疑您为 gulp 使用了一些连接插件，并且您的范围是“共享的”。使用 ES6 模块，您必须准确定义要导出和导入的函数，因为每个文件的范围是独立的。

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

helpers.js

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

export default {a,b,c}

并以这种方式导入数据：

import myHelpers from 'helpers'

然后要使用助手 a，你需要调用 myHelpers.a()

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 - 提供插件

好的，但是如果你真的经常使用这些助手呢？您需要在任何地方导入它们吗？从技术上讲 - 是的。但是 Webpack 可以为我们自动执行此操作，请查看 Webpack - ProvidePlugin，它会自动加载模块，而不必在任何地方导入它们。

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

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

这将使助手像“全局”一样可用，您将能够使用 helpers.a()

【讨论】：