來自不同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可訪問功能

回答

相關問題