环境配置

编辑器：vscode；

建立工程目录：

先建立一个文件夹，在此文件夹下面在建立两个名为src和dist文件夹。
*src ：书写es6代码，所有源码都放在这里。
*dist：编译过后的es5代码，在html中需要引入这里的js文件

图片.png

编写index.html：

<!DOCTYPE html> 
    <html>
    <head>
        <title>环境配置</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="./dist/index.js"></script>
    </head>
    <body>
        <h1>hello world</h1>
    </body>
</html>

注意：这里引入的是dist中的js文件。

<script src="./dist/index.js"></script>

编写index.js

这是在src文件中编写，

let a=1;
console.log(a);

初始化项目

npm init -y

-y代表全部默认同意，就不用一次次按回车了。命令执行完成后，会在项目根目录下生产package.json文件。

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build":"babel src/index.js -o dist/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-preset-es2015": "^6.24.1"
  }
}

全局安装babel-cli

在终端中 npm i babel-cli -g 如果慢的话，可以使用淘宝镜像cnpm i babel-cli -g；
mac 用户： sudo cnpm i babel-cli -g

转换命令 babel src／index.js -o dist/index.js;
但是此时只能在dist生成index.js 并没有转译；还要安装转换包

本地安装 babel-preset-es2015 和 babel-cli

cnpm  i  --save-dev  babel-preset-es2015 babel-cli

新建.babelrc

在根目录下新建.babelrc文件，并打开录入下面的代码

{
    "presets":[
        "es2015"
    ],
    "plugins":[]
}

这个文件完成后，现在输入转换命令就可以完成了。

babel src/index.js -o dist/index.js

简化命令

打开package.json文件，把文件修改成下面的样子

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "babel src/index.js -o dist/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-preset-es2015": "^6.24.1"
  }
}

修改好后，以后我们就可以使用 npm run build 来进行转换了。