web-dev-qa-db-ja.com

Webpack：ウィンドウの既存のモジュールにエクスポート

私の目標は、Webpackを使用して、分離されたコンポーネントを想定されたグローバルオブジェクトにエクスポートすることです。

index.html

<script>
   var MyApp = window.MyApp || {};
   MyApp.something = MyApp.something || {};
</script>
<script src="my-isolated-module.js"></script>

//
// other modules/components loaded here...
//

<script>
   MyApp.something.myIsolatedModule.run();
</script>

上記の例では、他のモジュールがアタッチされるプロパティsomethingを持つグローバルオブジェクト/モジュールがあると想定しています。そのため、MyAppまたはMyApp.somethingを破壊せずに、分離したモジュールをグローバルMyApp.somethingオブジェクトにアタッチしたいと思います。

webpack.config.js

var webpack = require('webpack');
var UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');

module.exports = {
    target: 'web',
    context: __dirname + '/src/',
    entry: './main.jsx',
    output: {
        path: __dirname + '/dist/',
        filename: 'app.bundle.js',
        library: 'something',
        libraryTarget: 'var'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [
            {test: /\.jsx$/, loader: '../node_modules/jsx-loader'}
        ]
    },
    externals: {
        react: {
            root: 'React',
            commonjs: 'react',
            commonjs2: 'react',
            AMD: 'react'
        }
    },

    plugins: [
        new UglifyJsPlugin()
    ]
};

src/main.jsx

module.exports = {
    myIsolatedModule: require('./MyIsolatedModule')
};

Webpackのoutput.libraryTargetをすべての可能な値に設定してみました（ http://webpack.github.io/docs/configuration.html#output-librarytarget を参照）。 output.libraryという値を使用して、モジュールに直接名前空間を含めます。思い通りに動かない...

javascriptreactjscommonjswebpack
17
rodrigo-silveira

output.libraryは、以下のような配列にすることができます。

output: {
    library: ['MyApp', 'something']
}

これは、ウィンドウwindow.MyApp.somethingにオブジェクトを作成するか、すでに存在する場合はwindow.MyAppに追加します。

31
Matt Derrick