使webpack的库输出与babel6兼容 [英] Make webpack's library output compatible with babel6
问题描述
Babel 的第6版更改了 export default的功能特别是它与commonjs 的关系需要。
Babel's 6th version changes the functioning of export default and in particular its relation with commonjs require.
总而言之，直到babel5， require（'module'）其中给出模块的默认导出，它现在总是返回包含模块的所有导出的模块对象。
如果只需要默认值，他/她必须使用 require（'module'）。default 。
如这里所述，这背后有很好的理由而且这个问题的目的不是打破这种行为。
To summarise, while until babel5, require('module') where giving the default export of the module, it now always returns the module object containing all of the exports of the module.
If one only wants the default, he/she must use require('module').default.
As explained here, there is very good reasons behind this and the aim of this question is not to break or hack this behaviour.
但是，如果一个人正在构建一个图书馆，他/她通常不想分发模块，但他的库的出口值（例如，一个函数，任何模块系统在内部使用）。
这很好地被 webpack 和 output.library 配置，当使用 commonjs 或 AMD 。因为先前的babel的版本允许使用commonjs需要默认的导出，所以babel也兼容这个机制。但是现在不是这样的：图书馆现在总是提供一个es6模块对象。
However, if one is building a library, he/she usually does not want to distribute a module but the export value of his library (e.g. a function, whatever module system is used internally).
This is well dealt with by webpack and the output.library configuration when using commonjs or AMD. Because prior babel's versions allowed the default export to be required with commonjs, babel was also compatible with this mechanism. However it is not the case anymore: the library now always provides an es6 module object.
这是一个例子。
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导出为字符串我的lib内容而不是 {default：我的lib内容} 。
This is a very simple example but I obviously want the export of mylib to be the string "my lib content" instead of { default: "my lib content" }.
一个解决方案可能是在commonj中创建一个导出源文件来执行转换：
One solution could be to create an export source file in commonjs to perform the transformation:
module.exports = require('./main').default;
然而，我发现这个解决方案很差。应该能够在编译级别解决这个问题，而不用改变源代码。
任何想法？
However I find this solution quite poor. One should be able to solve it at the compilation level, without changing the source code. Any idea?
推荐答案
只是在这个我自己。无论一个人称之为解决方案或解决方案，似乎都有一个解决它的Babel插件。
Was just going at this my self. Whether one like to call it a workaround or solution, there seem to be a Babel plugin that "solve it".
使用插件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 。
This yields Master.Lib1 to be lib1 instead of Master.Lib1.default.
这篇关于使webpack的库输出与babel6兼容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
