javascript - 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'

然后和前面的例子类似，调用->myHelpers.a()

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

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

然后你可以调用a()

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

为什么这样？

• 更好地控制导入到代码中的内容，可选的“tree shaking”
• 导入的模块之间没有冲突

Webpack - ProvidePlugin

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

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

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

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