Module.default表記を使用せずにモジュールをブラウザにエクスポートするにはどうすればよいですか？

Question

Module.defaultを使用する代わりに、webpackをモジュール名に直接ブラウザに公開する方法を教えてください。

ここでは、実現したいと思っていることをうまく描写するために、簡単な方法で私のアプリの設定をしています。

webpack.config.js

module.exports = { 
    entry: './src/app.js', 
    devtool: 'source-map', 
    output: { 
     path: './lib', 
     filename: 'app.js', 
     library: 'App', 
     libraryTarget: 'umd', 
     umdNamedDefine: true 
    }, 
    module: { 
     loaders: [{ 
      test: /\.js$/, 
      exclude: /node_modules/, 
      loader: 'babel-loader' 
     }] 
    } 
}; 

.babelrc

{ 
    "presets": ["es2015"], 
    "plugins": ["babel-plugin-add-module-exports"] 
} 

app.js

export default function main() { 
    console.log('The default function'); 
} 

export function other() { 
    console.log('A random function'); 
} 

---

出力に「ライブラリ」として「アプリケーション」を指定したため、私のライブラリはブラウザでAppとして利用できます。

エクスポートされたデフォルト機能を使用するには、私はApp.defaultを実行する必要があります。しかし、otherエクスポート関数を使用するには、私はこれを行うことができます：App.other。私はApp()をデフォルトのエクスポートされた関数を呼び出すことができ、もう1つは同じApp.other()になると期待します。

ブラウザまたはwebpackを使用したUMDラップライブラリのこの標準的な動作はありますか？これは、lodashライブラリの動作を模倣していないようです。私の設定は何らかの形でオフになっていますか？

---

ブラウザでlodash library (repo)を見てみる場合は、あなたは彼らがそれをacheivedことがわかります。

ロダッシュはウェブパックを使用して構築されています。 package.jsonの中でlodashを調べると、メインファイルがlodash.jsであることがわかります。そのファイルを見てみると、UMDがラップされているように見えます（ファイルの一番下にUMDの定義があります）。したがって、私が次のようなことをするとき：

import _ from 'lodash'; 
// or 
import {clamp} from 'lodash'; 

すべてがうまくいきます。

HTMLファイル内にその正確なファイルを参照して正常に動作し、他の事：

<script src="node_modules/lodash/lodash.js"></script> 

くれlodashオブジェクトへのアクセスを可能にします。

console.log(_) // function 
console.log(_.clamp) // function clamp(number, lower, upper) { ... } 

どのようにすれば同じ動作が得られますか。 Lodashのwebpack設定は、必要以上に複雑で、私はリバースエンジニアリングが必要なのか分かりません。

Answer 1

libraryExport: 'default'をwebpackの出力構成に追加します。 babel-plugin-add-module-exportsも必要ありません。