ES6学习笔记（一）：ES6的开发环境搭建

作者: 大青呐 | 来源:发表于2017-06-23 11:14 被阅读0次

ES6的开发环境搭建
ES6开发环境的搭建
es6环境搭建
ES6
ES6学习笔记（一）：ES6的开发环境搭建
ES6 配置运行环境
ES6环境的搭建
前端面试之ES6 语法
ES6 学习笔记（一）
create-react-app 搭建不同环境

一、先建立工程目录

在新建的工程目录下，新建<b>src</b>和<b>dist</b>文件夹。
<li>src：书写的ES6代码文件都放在此目录下</li>
<li>dist：利用Babel编译成的ES5代码的文件夹，在HTML页面需要引入的时这里的js文件。</li>
二、编写index.html文件

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <script src="./dist/index.js"></script>
    </head>
    <body>
        Hi ECMA Script 6
    </body>
</html>

需要注意的是，引入的js文件是dist目录下的文件。
三、编写index.js文件

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

let是es6中的一种声明方式，我们需要把这个ES6的语法文件自动编译成ES5的语法文件。
四、初始化项目
打开终端或者cmd打开命令行，进入项目目录，输入以下命令：

npm init -y   //-y代表全部默认同意

{
  "name": "js",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

五、全局安装Babel-cli
还是打开终端或者cmd打开命令行，进入项目目录，输入以下命令安装，如果安装比较慢，建议现在淘宝镜像cnpm安装。

npm install -g babel-cli

六、本地安装babel-preset-es2015 和 babel-cli
继续输入以下命令：

npm install --save-dev babel-preset-es2015 babel-cli

安装完成后，你可以在你的目录下生成的package.json文件中看到，多了devDependencies。

"devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-preset-es2015": "^6.24.1"
  }

七、新建.babelrc
在项目根目录下新建.babelrc文件，并添加以下代码：

"devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-preset-es2015": "^6.24.1"
  }

完成上面的全部过程后，我们就可以转换了。在终端输入转化命令，将ES6转化为ES5。

"devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-preset-es2015": "^6.24.1"
  }

你可以在dist文件夹下看到生成的编译文件。
八、vue简化转化命令
在学习vue 的时候，可以使用npm run build 直接利用webpack进行打包，在这里也希望利用这种方式完成转换。打开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来转换了。