我使用Webpack和Babel为一个小型库设置了非常简单的环境。
之前,我采用以下架构生成库的ES5版本:
module.exports.lib = (function () {
/* private part of library here */
return {
... /* public part of library here */
}
})();
现在一切都很正常,我甚至在我的库中使用了箭头函数等ES6特性,一切都有效。但是,我决定改用ES6类的方式:
export default class Library {
}
现在,当我尝试执行以下操作时:
var library = new Library();
我明白 Library 没有被定义。甚至仅评估 Library
也会返回 undefined。
所以我把使用该库的文件转换成了一个 ES6 文件,使用 import Library from 'libraryfile.js'
,然后它又可以工作了。
但是,我真的希望我的输出库仍然可以像之前一样使用 <script>
标签在常规的 ES5 中使用。这是可能的吗?
这是我的 webpack 配置文件:
module.exports = {
entry: {
pentagine: "./lib/pentagine.js",
demos: ["./demos/helicopter_game/PlayState.js"]
},
output: {
path: __dirname,
filename: "./build/[name].js",
libraryTarget: 'umd'
},
module: {
loaders: [
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}
]
}
};