Webpack 2不同js文件中的可访问函数

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';
    }
}

我在调用showPicturesList()函数的地方还有另一个文件util.js

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

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

Answer 1

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

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会看到导入的内容，并包含你正在导入的所有内容。