语法转为ES5(为了兼容 ES5) (Babel)"/>
将ES6的语法转为ES5(为了兼容 ES5) (Babel)
掌握 ES6 之后,如果你的业务需要考虑 ES5 的兼容性,则可以这样做:写 ES6 语法的 js 代码,然后通过
Babel
将 ES6 转换为 ES5。如果没有这样的需要,那么下面的内容,了解即可。
babel 的作用是将 ES6 语法转为 ES5 语法,支持低端浏览器。
以一个简单的案例说明
1. 先创建一个项目的目录
在 index.js 写入
let a = item => item + 2
console.log(a(4))
这个文件是一个 ES6 语法 的 js 文件,稍后,我们尝试把这个 ES6 语法的 js 文件转化为 ES5 的 js 文件。
// 本地安装 babel-preset-es2015 和 babel-cli:
npm install --save-dev babel-preset-es2015 babel-cli
2. 安装 Babel-cli
初始化项目:
在安装 Babel 之前,需要先用 npm init 先初始化我们的项目。打开终端或者通过 cmd 打开命令行工具,进入项目目录,输入如下命令:
npm init -y
上方代码中,-y
代表全部默认同意,就不用一次次按回车了(稍后再根据需要,在文件中手动修改)。命令执行完成后,会在项目的根目录下生成 package.json 文件:
{"name": "babel","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC"
}
3. 本地安装 babel-preset-es2015 和 babel-cli:
npm install --save-dev babel-preset-es2015 babel-cli
4. 新建.babelrc:
在根目录下新建文件.babelrc
,输入如下内容:
{"presets":["es2015"],"plugins":[]
}
5. 开始转换:
现在,我们应该可以将 ES6 的文件转化为 ES5 的文件了,命令如下:(此命令略显复杂)
babel src/index.js -o dist/index.js
我们可以将上面这个命令进行简化一下。操作如下:
在文件 package.json
中修改键 scripts
中的内容:
"scripts": {"build": "babel src/index.js -o dist/index.js"},
目前为止,环境配置好了。以后,我们执行如下命令,即可将src/index.js
这个 ES6 文件转化为 dist/index.js
这个 ES5 文件:
npm run build
我们执行上面的命令之后,会发现, dist 目录下会生成 ES5 的 js 文件:
之后我们就可以在 index.html 中使用 es5的语法了
"use strict";var a = function a(item) {return item + 2;
};
console.log(a(4));
更多推荐
将ES6的语法转为ES5(为了兼容 ES5) (Babel)
发布评论