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

刚开始使用webpack-2并对全局函数有疑问。在js文件，这些功能命名为showPictures.js：来自不同js文件的Webpack 2可访问功能

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()函数？

来源

2017-02-17 Lukas Karmanovas

您可以使用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会看到你导入的导入文件和包含的东西。

来源

2017-02-17 16:56:44

那么在html中使用这个函数呢？这也可以吗？ –

不，它不。您需要将其暴露在您的webpack配置中或通过在'window'上定义它。看看这个问题的细节：[从外部调用webpacked代码（HTML脚本标记）]（http://stackoverflow.com/questions/34357489/calling-webpacked-code-from-outside-html-script-tag） –

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

回答

相关问题