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

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

Webpack 2 accessible functions from different js files

javascript

webpack-2