我需要编写一个可在全局窗口上使用的模块。
我使用 es6 创建模块,我定义的每个类都有它自己的文件。
我正在使用 webpack 来 babelify 并捆绑这些类。
我的模块的入口点也是包含要公开的全局的文件。
我尝试了各种方法来实现这一点,包括:
- 暴露加载器
- 导入加载器
- 导出装载机
- 输出:库
- 黑魔法 :(
我尝试过的代码示例:
我想得到:window.MyMod
// mymod.js
export class MyMod {
constructor(aaa) {
this.aaa = aaa;
}
toString() {
return this.aaa;
}
}
// webpack.config
var entries = [
'./src/mymod.js'
];
module.exports = {
...,
module: {
loaders: [
{
test: require.resolve('./src/mymod.js'),
loader: 'expose?MyMod'
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
]
}
这只会让我在窗口上获得一个包含 MyMod 作为构造函数的对象 MyMod。
任何帮助将不胜感激。
你应该结合export default class Foo
与library https://webpack.github.io/docs/configuration.html#output-library and libraryTarget https://webpack.github.io/docs/configuration.html#output-librarytargetWebpack 的配置中的设置。就像是:
// src/Foo.js
export default class Foo { ... }
// webpack.config.json
{
"output": {
"library": "Foo",
"libraryTarget": "var"
}
}
您应该能够将该库用作window.Foo
一旦捆绑包被加载。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)