来自不同 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 我将这两个文件添加为entry 数组。 我的输出文件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 会看到导入并包含你正在导入的所有内容。