babel将es6转化为es5
2018-04-12 本文已影响0人
leesession
第一种：在westorm中配置babel : 参考 -> https://www.jianshu.com/p/2b373b0910ed
第二种：babel直接将ES6转ES5：
先看下文件夹结构：
目录.png
1：创建你的项目文件夹，如：Babel，
2：进入文件夹中，打开命令行，输入 npm init -y：用来生成package.json文件，项目依赖
QQ图片20181204094344.png
3：全局安装babel-cli ：npm install babel-cli -g
4：项目安装 -> npm install babel-cli babel-preset-es2015 --save-dev
5：建立html文件，如:1.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>转化test</title>
<script src="src/index.js"></script>
</head>
<body>
<h3>hello ECMA SCRIPT 6</h3>
</body>
</html>
6：建立2个文件夹与js ： 1 -> src/index.js 2 -> dist/index.js ，且在 src/index.js 中添加ES6代码，如下：
let lee ='lee';
const study = ()=>{
console.log(lee + ': study')
}
console.log(lee)
study()
7：配置 .babelrc文件
{
"presets": [
"es2015"
],
"plugins": [
]
}
8：终端命令行输入：babel src/index.js -o dist/index.js，就可以在dist/index.js中见到es5的js了。
