es6转es5的转码器babel的安装与使用

朴灿烈づ我的快乐病毒、 2022-11-20 06:57 196阅读 0赞

1、babel是转码器，把es6代码转换成es5代码；因为es6代码的浏览器兼容性差，而es5的浏览器兼容性好。  
2、安装命令行转码工具：npm install --global babel-cli ,查看是否安装成功：babel --version  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg_size_16_color_FFFFFF_t_70_pic_center]

3、创建js文件，用es6编码  
4、配置.babelrc,存放在项目的根目录下，该文件用来设置转码规则和插件，基本格式如下：

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

presets字段设定转码规则，将es2015规则加入.babelrc

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg_size_16_color_FFFFFF_t_70_pic_center 1]

5、安装es2015的转码器，在项目中安装:npm install --save-dev babel-preset-es2015  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg_size_16_color_FFFFFF_t_70_pic_center 2]

6、转码

*  1 文件转码

# 转码结果写入文件
    mkdir dist1
    # --out-file 或 -o参数指定输出文件
    babel src/example.js --out-file dist1/compiled.js
    # 或者
    babel src/example.js -o dist1/compiled.js

*  文件夹转码

# 整个目录转码
    mkdir dist2
    # --out-dir 或 -d 参数指定输出目录
    babel src --out-dir dist2
    # 或者
    babel src -d dist2

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/45e59d4b269c48db9fa7f74b18f0c17f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/59845946656d479a8266b3cbab11c1ff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/7f0303afe54c4b92a7a7a7834ee925fa.png