在现代前端开发中，Babel 的重要性仅次于 JavaScript 语言本身。它是一个 JavaScript 编译器，可以将高版本的 JavaScript 代码转换为低版本的代码，从而实现在不同浏览器或环境中的兼容性。
在 2018 年，Babel 7 发布了，实现了一些重要的改进和更新，包括对新特性的支持和插件的升级。在本文中，我们将探索 Babel 7 的一些新特性和重要更新。
新特性
支持最新的 JS 及其它语言规范
Babel 7 支持 ECMAScript （ECMA-262）2018 标准，也就是 ES9。这意味着，开发者可以使用最新的 JavaScript 语言特性，如异步迭代、Promise.finally()、rest & spread 属性等等。另外，Babel 7 还支持一些 TypeScript 和 Flow 的特性，如类私有属性和类型注释。这些新特性使得我们可以更轻松地编写出新的、更高效的 JavaScript 代码。
集成了 @babel/polyfill
在 Babel 7 中，我们可以使用 @babel/polyfill 来自动引入运行时所需的 polyfill，从而让新特性在旧浏览器中得以工作。@babel/polyfill 只会自动加载浏览器缺失的 polyfill，与之不一样的是 @babel/polyfill 会污染全局变量且体积非常大，所以现在更推荐使用另一个插件 @babel/plugin-transform-runtime，这个插件会让你的代码变小又优雅。
重要更新
支持 TypeSript
Babel 7 首次支持 TypeScript。TypeScript 是一种基于 JavaScript 增加了类型检查的语言。在过去，想要使用 TypeScript ，我们需要使用另一个独立的编译器来处理 TypeScript 的文件。现在，我们可以使用 Babel 7 来编译 TypeScript 文件了。使用 @babel/plugin-transform-typescript 插件，我们就可以在 Babel 中使用 TypeScript 的类型检查。
移除 Stage Presets
在 Babel 7 中，已经移除了 stage presets 。这意味着我们需要手动安装和配置新的插件来支持新提案中的功能（例如，使用 @babel/plugin-syntax-dynamic-import 来支持动态 import 和使用 @babel/plugin-proposal-object-rest-spread 使用对象展开语法）。这个更改，让 Babel 更加灵活和可配置。
示例代码
安装
npm install --save-dev @babel/core @babel/cli
使用
将 ES6 的代码转换为 ES5 的代码，并输出到 lib 文件夹：
npx babel src --out-dir lib
使用 Babel 转换 TypeScript：
npm install --save-dev @babel/core @babel/cli @babel/preset-typescript npx babel src --out-dir lib --extensions ".ts" --presets=@babel/preset-typescript
总结
Babel 7 为我们带来了一些强大而实用的特性，例如支持最新的 JavaScript 和 TypeScript 语言特性，自动引入 polyfill 等等。Babel 7 的配置变得更加灵活和可配置，我们可以使用更简单的方式来实现我们的需求。在未来，随着 JavaScript 的不断发展和进步，Babel 也将不断地更新，以支持更多新特性和更好的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64619f20968c7c53b02f9210