javascript - 来自不同 js 文件的 Webpack 2 可访问功能

Question

刚开始使用webpack-2，对全局函数有疑问。在名为 showPictures.js 的 js 文件中包含这些函数:

function isEmpty(el) {
    var result = !$.trim(el.html());
    return result;
}
function showPicturesList() {
    if (!isEmpty($('#picture-name-list'))) {
        var pictureList = document.getElementById("added-pictures");
        pictureList.style.visibility = 'visible';
    }
}

我在女巫中有另一个文件 util.js 我正在调用 showPicturesList() 函数

window.onload = function(){
    showPictureList();
}

简单地使用 js 我会将这两个脚本导入到我的 html 中，但是使用 webpack 我可以为它们创建一个文件所以 webpack.config.js 我将这两个文件添加为 输入数组。我的输出文件 bundle.js 看起来应该包含这两个文件。问题是什么是对 js 文件进行最少更改以从 utils.js 文件调用 showPictureList() 函数的最简单方法？

Answer 1

您可以使用 ES2015/ES6 模块导入已导出到另一个文件中的函数。在您的 showPictures.js 文件中，您可以通过添加 export 关键字来导出要公开的函数。

export function showPicturesList() {
    if (!isEmpty($('#picture-name-list'))) {
        var pictureList = document.getElementById("added-pictures");
        pictureList.style.visibility = 'visible';
    }
}

然后您需要将它们导入您的 util.js。

import { showPicturesList } from './showPictures';

有关如何使用模块的详细信息，您可以查看 Exploring JS: Modules .

有了这个，你也不需要将这两个文件添加到你的 webpack 配置中的 entry，因为 webpack 会看到导入并包含你导入的所有内容。