Babel的第 6 版更改了 export default
的功能,特别是它与 commonjs require
的关系。
总而言之,在 babel5 之前,require('module')
提供模块的默认导出,现在它总是返回包含模块所有导出的模块对象。
如果只想要默认值,他/她必须使用 require('module').default
。
As explained here, there is very good reasons behind this这个问题的目的不是破坏或破解这种行为。
但是,如果一个人正在构建一个库,他/她通常不想分发一个模块,而是分发他的库的导出值(例如,一个函数,无论内部使用什么模块系统)。
webpack 很好地解决了这个问题以及使用 commonjs 时的 output.library
配置或 AMD .因为以前的 babel 版本允许默认导出需要 commonjs,所以 babel 也兼容这种机制。然而,情况已不再如此:库现在始终提供 es6 模块对象。
这是一个例子。
src/main.js
export default "my lib content";
webpack.config.js
var path = require("path");
var webpack = require("webpack");
module.exports = {
entry: {
lib: [ path.resolve(__dirname, "src/main.js") ],
},
output: {
path: path.join(__dirname, "dist"),
filename: "mylib-build.js",
library: 'myLib'
},
module: {
loaders: [
{
test: /\.js$/,
loader: "babel",
include: path.join(__dirname, "src"),
query: { presets: ['es2015'] }
}
]
}
};
test.html
<html>
<head></head>
<body>
<script src="dist/mylib-build.js"></script>
<!-- `myLib` will be attached to `window` -->
<script>
console.log(JSON.stringify(myLib)); // { default: "my lib content" }
</script>
</body>
</html>
这是一个非常简单的示例,但我显然希望 mylib 的导出为字符串 "my lib content"
而不是 { default: "my lib content"}
.
一个解决方案是在 commonjs 中创建一个导出源文件来执行转换:
module.exports = require('./main').default;
但是我发现这个解决方案很差。人们应该能够在编译级别解决它,而无需更改源代码。 有什么想法吗?
最佳答案
我自己就是这么做的。无论人们喜欢称之为解决方法还是解决方案,似乎都有一个 Babel 插件可以“解决它”。
使用插件 babel-plugin-add-module-exports在 https://stackoverflow.com/a/34778391/1592572 中引用
示例配置
var webpackOptions = {
entry: {
Lib1: './src/Lib1.js',
Lib2: './src/Lib2.js'
},
output: {
filename: "Master.[name].js",
library: ["Master","[name]"],
libraryTarget: "var"
},
module: {
loaders: [
{
loader: 'babel',
query: {
presets: ['es2015'],
plugins: ["add-module-exports"]
}
}
]
}
};
这会使 Master.Lib1
成为 lib1 而不是 Master.Lib1.default
。
关于javascript - 使 webpack 库输出与 babel 6 兼容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33678869/