使用babel将es6代码转成es5（二）

「爱情、让人受尽委屈。」 2022-06-13 06:36 167阅读 0赞

上节写到环境的准备，先用es6语法写个js文件内容大概如下：只做个简单测试就不写复杂了

var a = (msg) => () => msg;

![这里写图片描述][SouthEast]

第一步 从上面图可以看出，在编译器中输入的代码有许多错误提醒，这是因为编译器默认是采用ES5的标准，如果想不报错，则需要将编译器的语法支持调到ES6

![这里写图片描述][SouthEast 1]

改变编译标准后，则不会出现错误提醒咯  
![这里写图片描述][SouthEast 2]

第二步：在根目录下新建一个.babelrc文件，该文件是babel编译用的。文件内容为

{
      "presets": [],
      "plugins": [] }

![这里写图片描述][SouthEast 3]

第三步：输入下面的命令

#ES2015转码规则
    npm install --save-dev babel-preset-es2015

![这里写图片描述][SouthEast 4]

# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
    $ npm install --save-dev babel-preset-stage-0
    $ npm install --save-dev babel-preset-stage-1
    $ npm install --save-dev babel-preset-stage-2
    $ npm install --save-dev babel-preset-stage-3

我们在此选择第二条来执行：

![这里写图片描述][SouthEast 5]

第四步：修改.babelrc文件，在文件中添加”es2015”如下所示：  
![这里写图片描述][SouthEast 6]

第五步：如果没有意外发生，应该大功告成，编译输出看看,输入如下代码：会直接将结果在命令窗口输出

babel es6.js

![这里写图片描述][SouthEast 7]

如果需要将结果输出到相应文件中可以输入如下命令，会在根目录下面生成es5.js，双击打开可以看到内容已经改变成我们熟悉的编写方式了：

babel es6.js -o es5.js

![这里写图片描述][SouthEast 8]

执行的前提 是要安装全局的babel cli ,如果报babel不是内部命令 则执行下面的命令：

npm install -g babel-cli

[SouthEast]: /images/20220613/eef7cc7cf7b94e899473e294453ccfba.png
[SouthEast 1]: /images/20220613/6caeb6a6c17142b2a44cce09785e1f8f.png
[SouthEast 2]: /images/20220613/5da7e3c38e3e4f8a97dc09b705aeb6fc.png
[SouthEast 3]: /images/20220613/f1d5c79b13a544b4b0a0c636ef9a740b.png
[SouthEast 4]: /images/20220613/7d86056f79fa44f1823544c8a9245d7b.png
[SouthEast 5]: /images/20220613/8149e52dffb94bcc84de8c0d8ad0e75c.png
[SouthEast 6]: /images/20220613/5466ff36fa724510b158f966686e135b.png
[SouthEast 7]: /images/20220613/04b0c18a12d548cdb7507da5c7b3a832.png
[SouthEast 8]: /images/20220613/30f257ef54f84867a4ce215ad52c9f26.png