web-dev-qa-db-fra.com

Webpack: exporter vers un module existant dans la fenêtre

Mon objectif est d'utiliser Webpack pour exporter un composant isolé dans un objet global supposé.

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>

Dans l'exemple ci-dessus, je suppose qu'il y a un objet/module global qui a une propriété something qui aura d'autres modules attachés. Je veux donc attacher mon module isolé à l'objet global MyApp.something Sans détruire ni MyApp ni 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')
};

J'ai essayé de définir output.libraryTarget Pour Webpack sur toutes les valeurs possibles (voir http://webpack.github.io/docs/configuration.html#output-librarytarget ), ainsi que de jouer autour avec la valeur de output.library afin qu'il inclue l'espace de noms direct avec mon module. Rien ne fonctionne comme je le voudrais ...

javascriptreactjscommonjswebpack
17
rodrigo-silveira

output.library peut être un tableau comme ci-dessous:

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

Cela va soit créer un objet sur la fenêtre window.MyApp.something ou, l'ajoutera à window.MyApp s'il existe déjà.

31
Matt Derrick