我的目标是使用Webpack将隔离的组件导出到假定的全局对象中。
<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对象,而又不破坏MyAppor MyApp.something。
something
MyApp.something
MyApp
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() ] };
module.exports = { myIsolatedModule: require('./MyIsolatedModule') };
我尝试将Webpack的output.libraryTarget值设置为每个可能的值(请参阅http://webpack.github.io/docs/configuration.html#output- librarytarget),并尝试使用的值output.library,使其包含直接名称空间随着我的模块。什么都没有我想要的…
output.libraryTarget
output.library
output.library 可以是如下数组:
output: { library: ['MyApp', 'something'] }
这将在窗口上创建一个对象,window.MyApp.something或者将其添加到该对象(window.MyApp如果已存在)。
window.MyApp.something
window.MyApp