您好,欢迎来到汇意旅游网。
搜索
您的当前位置:首页webpack组织模块打包Library的原理及实现

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部分显然是不行的。

Copyright © 2019- hids.cn 版权所有

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务