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

Question

刚开始使用 webpack-2，有一个关于全局函数的问题。在名为 js 的文件中有这些函数showPictures.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 文件进行最少更改以showPictureList()从utils.js文件调用函数的最简单方法是什么？

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。

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