2

を使用する代わりに、モジュール名に直接 webpack をブラウザーに公開するにはどうすればよいModule.defaultですか?

これは、私が達成したいことをうまく表現できるように、簡単な方法でアプリをセットアップしたものです。

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。

奇妙なことに...エクスポートされたデフォルトの関数を使用するには、私がしなければならないApp.default. しかし、otherエクスポートされた関数を使用するには、次のようにしますApp.other。App()デフォルトのエクスポートされた関数を呼び出すことができると思いますが、もう一方は同じApp.other()です。

これはブラウザでの標準的な動作ですか、それとも webpack を使用した UMD でラップされたライブラリですか? これは、lodash ライブラリの動作を模倣していないようです。私の構成は何らかの形でオフになっていますか?

しかし、ブラウザでlodashのライブラリ（レポ）を見てみると、それを実現していることが分かります。

Lodash は webpack を使用して構築されています。lodashのpackage.jsonの中を見てみると、メインファイルはlodash.js. そのファイルを見ると、UMD でラップされているように見えます (ファイルの下部にある UMD 定義)。したがって、私が次のようなことをするとき：

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

すべて正常に動作します。

正常に動作するもう 1 つのことは、HTML ファイルでその正確なファイルを参照することです。

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

これにより、lodash オブジェクトにアクセスできます。

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

どうすれば同じ動作を得ることができますか。Lodash の webpack 構成は必要以上に複雑で、リバース エンジニアリングに必要なものがわかりません。

4

1 に答える 1

1

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

于 2017-09-19T18:10:55.150 に答える