es6转es5的转码器babel的安装与使用 朴灿烈づ我的快乐病毒、 2022-11-20 06:57 144阅读 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
还没有评论,来说两句吧...