[英]How to expose an es6 module globally
我需要编写一个可在全局窗口上使用的模块。
我正在使用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对象。
任何帮助将不胜感激。
这与使用Webpack和Babel导出类不起作用基本相同,除了您有一个命名导出而不是默认导出。 你的输入文件应该是
import {MyMod} from './mymod';
module.exports = MyMod;
要么
module.exports = require('./mymod').MyMod;
如果您不想执行任何这些操作并将'./src/mymod.js'
保留为条目文件,请在该文件中使用CommonJS导出而不是ES6导出:
// mymod.js
exports.MyMod = class MyMod {
constructor(aaa) {
this.aaa = aaa;
}
toString() {
return this.aaa;
}
}
您应该将export default class Foo
与libraryTarget
配置中的library
和libraryTarget
设置组合在一起。 就像是:
// src/Foo.js
export default class Foo { ... }
// webpack.config.json
{
"output": {
"library": "Foo",
"libraryTarget": "var"
}
}
一旦加载了包,您应该能够将库用作window.Foo
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.