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文件进行微小更改以从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。

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

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

1 个答案: