刚开始使用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
我将这两个文件添加为 输入
数组。
我的输出文件 bundle.js
看起来应该包含这两个文件。问题是什么是对 js 文件进行最少更改以从 utils.js
文件调用 showPictureList()
函数的最简单方法?
最佳答案
您可以使用 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 会看到导入并包含你导入的所有内容。
关于javascript - 来自不同 js 文件的 Webpack 2 可访问功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42301273/