Webpack 2異なるjsファイルからアクセス可能な関数

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'; 
    } 
} 

そして私は、私は

window.onload = function(){ 
    showPictureList(); 
} 

は、単に私が私のHTMLに両方のスクリプトをインポートしますが、との考えJSを使用してshowPicturesList()関数を呼び出しています魔女内の別のファイルutil.jsを持っていますwebpack私は両方のために1つのファイルを作ることができますwebpack.config.js私はentry配列としてこれらのファイルを両方追加しました。 私の出力ファイルbundle.jsは、その内部に両方のファイルがあるはずです。問題は、showPictureList()関数をutils.jsファイルから呼び出す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にインポートが表示され、インポートするコンテンツが含まれるためです。