在一些项目中，使用 webpack 打包本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】，难免会有 ESModule 和 com【本文受版权保护】未经授权，禁止复制转载。monjs 混用的情况，当然，全部用 E【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】SModule 是最好的，符合标准。但是【版权所有，侵权必究】【原创内容，转载请注明出处】，在不得已或偷懒情况下必须混用时，要注意转载请注明出处：www.tangshuang.net【本文受版权保护】混用时的一些模块逻辑。

babel 会将 ESModule 导入【作者：唐霜】【原创不易，请尊重版权】进行处理，也就是说 import 的目标【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。文件是 module.exports 导原创内容，盗版必究。【本文首发于唐霜的博客】出的 commonjs 文件是可以的。但【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。是前提是，必须先用 babel 进行编译【原创内容，转载请注明出处】未经授权，禁止复制转载。。我们用 webpack babel-l未经授权，禁止复制转载。未经授权，禁止复制转载。oader 的时候，为了获得 tree 【原创不易，请尊重版权】【转载请注明来源】shaking 的效果，所以会关闭 mo【作者：唐霜】【原创不易，请尊重版权】dules 选项，这就导致在 webpa【版权所有，侵权必究】转载请注明出处：www.tangshuang.netck 进行打包时，babel 不会编译 【转载请注明来源】著作权归作者所有，禁止商业用途转载。ESModule，也就不会优化 impo本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】rt 逻辑，因此，这种情况下 impor著作权归作者所有，禁止商业用途转载。【转载请注明来源】t 的目标文件是 module.expo【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】rts 时，运行时会报错，因为 webp本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】ack 认为 module 是不可写对象【未经授权禁止转载】【本文首发于唐霜的博客】，你不能重写 module.export【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。s，但你可以重写 exports。

这个逻辑是对的，webpack 按照标准【转载请注明来源】【作者：唐霜】进行了处理，并且是严格处理，这就要求模块【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net输出者，必须输出 exports.xxx【未经授权禁止转载】原创内容，盗版必究。 这样的接口，从而可以通过 webpac【未经授权禁止转载】【转载请注明来源】k 实现与 ESModule 完全对接。【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】但是，很遗憾，由于历史原因，我们不可能把本文作者：唐霜，转载请注明出处。原创内容，盗版必究。我们项目中全部的 module.expo【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netrts 全部重新写过，而且对于 modu【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。le.exports = functio原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】n 的情况根本无解。

好消息是，我们也是有办法的，ESModu转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netle 和 commonjs 是可以混用的【转载请注明来源】本文版权归作者所有，未经授权不得转载。。关键就在 require 和 impo本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】rt 的区别。在 webpack 里面，【本文首发于唐霜的博客】【本文受版权保护】目标文件究竟遵循 ESModule 还是本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】 commonjs，完全由导入语句 re原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netquire/import 来决定。例如，【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net你的 a.js 是 ESModule 导【未经授权禁止转载】本文作者：唐霜，转载请注明出处。出模块，但是你在外面用 require 【本文受版权保护】本文作者：唐霜，转载请注明出处。导入，那么它可以很自然的被使用，可以说无【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net缝对接。但是，如果你的 a.js 是 c本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netommonjs 导出模块，而外面是 im【版权所有】唐霜 www.tangshuang.net【作者：唐霜】port 进行导入，那就必须格外小心，m【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】odule.exports 的导出方式不【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net可以，但是 exports.xxx 的方【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】式可以使用，当然，使用 export 导原创内容，盗版必究。【转载请注明来源】出是最优选择。

最终的结论是，不要用 import 去导【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】入原来的 module.exports 著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】的模块，而是要用 require，这在 未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。webpack 中，你可以把这种操作当作著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】日常操作，或者必须使用 require 【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net的唯一特殊情况。