使用Babel解决兼容问题

摘要：本文主要学习了如何使用Babel解决ES5之后的版本的兼容问题。

1 说明

Babel是一个工具链，主要用于将采用ES5以后的语法编写的代码转换为ES5语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

官网地址：https://www.babeljs.cn/

2 使用

进行初始化：

1

npm init --yes

安装相关的开发依赖：

1

npm i babel-cli babel-preset-env browserify -D

说明：

• babel-cli：命令行工具
• babel-preset-env：预设包，进行转换
• browserify：打包工具，比webpack更简单

进行转换：

1

npx babel 原路径 -d 新路径 --presets=babel-preset-env

说明：

• 局部安装需要使用npx命令，全局安装可以直接使用babel命令。
• 在未设置配置文件的情况下，需要使用--presets指定配置。

进行打包：

1

npm browserify 转换后的新文件 -o 打包后的新文件

网页中只要引用最后打包后的新文件即可，在修改原JS文件后，需要重新执行打包的命令。