webpack组织模块打包Library的原理及实现

这样上面的模块加载函数factory会在返回值后面加一个['default']，这样就只返回exports的default部分。

这个坑在umd格式下其实还是挺容易踩到的，例如你发布一个Vue组件，.vue文件中的JavaScript部分一般都是把Component对象以export default的格式导出的，就像这样：

export default {
 name: 'xxx',
 data: {
 return // ...
 },
 props: {
 // ...
 }
 methods: {
 // ...
 }
}

如果你把编译后的JS文件直接放在浏览器里运行，并且用CDN的方式通过<script>加载Vue，你会发现Vue无法识别这个Component，因为你得到的这个对象多了一层不必要的default。

你可能会问如果我把输出内容改成了default，会不会影响这个模块在ES6环境下的使用？一般来说是不会的。之前一篇文章里已经谈到，Webpack的生成代码在引入一个模块时，会通过一个叫__esModule的值来设置和判断它是不是ES6格式的export，现在如果只导出default部分，那么这个对象是被视为非ES6的，因为它不含__esModule。这样其它模块通过import来引入这个模块时，会引入整个对象，这实际上变相地就等价于只引入原模块的export default部分。

当然以上讨论的前提是，你所有需要export的内容全部都在export default里。如果你既有default，又有正常的export，那编译后的文件只导出default部分显然是不行的。