前段时间 一直在做移动端的东西 我很多都是使用es6的语法
最后在实际环境测试的时候发现 人家的设备根本就不识别我的那些语法
这个时候你就有俩个选择 要不转换成低版本 要不重新使用低版本js重新书写代码
显然第二种方法 不到万不得已我们是绝不会去选择使用低版本代码重构的
这就让我思考了一个问题虽然 es6新增的很多东西 确实很方便 但是有些时候 要考虑兼容低版本的问题
你就要慎重使用es6的语法了
好了废话不多说了
我还是喜欢使用简单的例子来说明问题
1.首先在桌面上建立一个 空的文件夹 我就叫做babel(前提是你得安装node和有npm)
进去babel文件夹里面 打开命令行窗口 shift+鼠标右键 有一个 打开powershell的东西 打开
有的电脑可能不让使用这个命令窗口执行命令 为了电脑的安全 他默认是禁止的 如果你想要的打开 我之前的博客有关于怎么解开可以去前面搜索一下
2.安装各种执行包
首先先初始化项目
npm init 一路回车到底 会看见一个文件夹中生成了一个 package.js文件
npm install babel-cli --save-dev //安装本地 当然你也可以全局安装 -g
npm install babel-preset-es2015 --save-dev //这个你也可以全局安装 但是不建议 毕竟生产环境中并不确定你的js是哪个版本最好还是在项目中安装
我是转换es6版本的js所以使用的是es2015版本的
最后在你的package.json文件中在下面会出现这俩个东西 就说明你安装成功了
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1"
}
3.配置 .babelrc文件
在文件babel中创建一个 .babelrc 这个是babel的配置文件 window是不让窗口 点号开头的文件夹
你可以通过一个 编辑文件另存为进行创建
//改成下面这样就可以
{
"presets": [
"es2015"
],
"plugins": []
}
4.修改package.json文件 还差最后一步
在package.json文件中的scripts 中加上"build": "babel src -d lib" src是要解析的文件夹 lib是放解析后的js的文件夹
你可以吧 解析的js文件放到 src文件夹 中最后在 lib中取出你想的js文件中
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel src -d lib"
},
5.测试
我们在babel文件中创建一个 src文件 和lib文件
在src文件 创建一个es6.js文件 书写出下面的代码
setTimeout(()=>{console.log('Hello World')}) //使用es6的箭头函数
最后在命令行窗口执行 npm run build
下面是在lib文件夹中的 es6.js下的代码 看吧已经转换成了 es5的代码格式 箭头函数转换成了 普通的函数
'use strict';
setTimeout(function () {
console.log('Hello World!');
}, 3000);
