实现Babel转码~~过程易懂易实现^^~

实现Babel转码~~过程易懂易实现^^~

文章目录

• • Babel转码
  • • 首先，Babel是干嘛用的？
    • 1. 使用方法
    • 2. Babel功能模块
    • • 1.babel-node
      • 2. @babel/register
      • polyfill
      • 参考链接

Babel转码

提示：您的电脑中必须已配置node.js与npm淘宝镜像，且确保环境正常，本文基于Win10实现转码操作。

首先，Babel是干嘛用的？

我们先大致了解一下，

来看看Babel官方给出的解释：

Babel 是一个 JavaScript 编译器
Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情：

1. 语法转换
2. 通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)
3. 源码转换 (codemods)

我们简单来理解一下：

由于ES6的语法规则不断更新，浏览器不能及时兼容JavaScript新语法，在用es6、jsx、typescript进行开发时，浏览器会无法识别新的语法。而开发要保证兼容性，Babel可以实现语法转换（ES6转至ES5）从而保证兼容，而且可以实现源码的转换，它就像个语法翻译官~ 因此Babel在项目构建中就是个很重要的存在了。那么该怎么转呢？

既然只是语法转换，对于新的API以及对象是否都可以转换呢？
答案是不能。所以就可以用到第二条官方提到的Polyfill，它就是为了实现对新API与某些对象的转码。

下面就来看如何操作吧~
注：本文由本人创作，参考源放在参考链接里，大家也可以借鉴查阅，可以转载，偷窃可耻。

1. 使用方法

1. 打开cmd命令，用 cd 文件名打开项目文件，在项目下键入命令npm init生成package.json（光标闪烁，一直enter）

看看你的文件夹成功了就会出现package.json

2.键