38｜编译和打包：通过Webpack、Babel做编译和打包
石川
你好，我是石川。
在 JavaScript 从 ES5 升级到 ES6 的时候，在大多浏览器还尚未支持新版的 JavaScript 的时候，很多开发者就想要预先体验相关的功能，但是却愁于没有相关的环境支持。当时，为了解决这个问题，一些面向 JavaScript 开发者的编译器如 Babel.js 就诞生了，它允许开发者按照 ES6 版的 JavaScript 语法来编写程序，然后再将代码编译转化成与 ES5 兼容的版本。
当然后来，随着浏览器对新版 JavaScript 的支持，Babel.js 不单单是解决了 ES6 的使用问题，同时它也加入了很多新的功能，支持更多的编译需求。今天，我们就来看下 JavaScript 开发中用到的 Babel 编译。
JavaScript 的编译
我们知道 JavaScript 是以 ES6 版本作为一个重要里程碑的。它和在此之前的 ES5 版本相隔了 6 年，而在 ES6 问世之后，JavaScript 就保持了每年的更新。所以 ES6 可以被看做是一个“大版本”的更新，里面包含了很多的新功能和语法糖。
面对不同浏览器对 ES6 的支持程度的不一致，有两种处理的办法。一种是编译，一种是 polyfill。这两者没有明显的界限，但是大致的区别是编译会在运行前先将代码转化成低版本的代码，再运行。而 polyfill 则是在运行时判断浏览器是否支持一个功能，只有在不支持的情况下，才使用补丁代码；如果支持，就使用原生的功能。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文深入探讨了JavaScript的编译和打包工具，重点介绍了Babel和Webpack的使用。首先解释了Babel在ES6升级中的作用，以及编译和polyfill的区别。随后详细介绍了Babel的使用方法和预设的加入方式。文章还比较了Webpack、Rollup和Parcel等打包工具的特点和功能，并讨论了它们提供的加载优化和非标模块化插件功能。总的来说，本文涵盖了JavaScript编译和打包的基本概念、工具和功能，对于想要了解JavaScript开发中编译和打包的读者来说，是一篇很有价值的文章。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《JavaScript 进阶实战课》，新⼈⾸单¥59
《JavaScript 进阶实战课》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(1)
- 最新
- 精选
陈英娜JSX是用来通过在html中轻松加入js变量的方式来创建页面的语法，polyfill的使用场景，是在不支持的方法中，引入一些插件来进行支持2023-06-01归属地：浙江
收起评论