Webpack：将模块导出到现有的 window 中

Question

我的目标是使用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.something对象上，而不会破坏MyApp或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的值，以便它会包含我的模块中直接的命名空间。但是没有达到我想要的效果...

- rodrigo-silveira

---

如果您想将您的软件包与 MyApp.something 合并，但该软件包已经存在，您可以将 MyApp 添加为 external 并自行设置其值。 - Ross Allen

Answer 1

output.library可以是以下类似的数组：

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

这将在窗口上创建一个对象 window.MyApp.something，或者如果它已经存在，则将其添加到 window.MyApp 中。

- Matt Derrick

---

谢谢，这正是我需要的来回答我的问题。 - Anima-t3d

如果我想将所有导出都写入 MyApp，而不是将所有导出放在 something 子对象上怎么办？如果我尝试使用 library: ['MyApp']，则如果 MyApp 不存在，则不会创建。为什么Webpack这么难实现呢？Rollup就很简单。 - trusktr

如果每个库都有一个配置文件，那该怎么办？我猜你可以传递一个对象 library: [ { name: 'MyApp' }, { name: 'something' }]？ - David 天宇 Wong