前言：由于目前浏览器对ES6的支持度不高，需要借助babel将编写好的ES6代码转换成ES5，浏览器才能解析。

需要在NodeJS环境下运行

一. 建立结构：两个文件夹和一个html文件，分别是src和dist还有index.html，还要在src目录下新建一个index.js文件，并在index.html里将其引用进去

如： dist

src

- index.js

index.html

下面是index.html中的代码： (注意index中引用的js是dist目录下的，因为dist是编译后的js，src里的js是我们编写的es6代码)

 <!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>Document</title>

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

 </head>

 <body>

     hello es6

 </body>

 </html>

二.初始化项目：

用 cnpm init -y

 说明：cnpm是淘宝的镜像源，因为npm安装往往很慢，没有安装的朋友可以直接将下面的地址复制到命令行按回车即可安装，就能使用cnpm了，-y代表全部默认同意，就不用一次次按回车了：npm install -g cnpm --registry=https://registry.npm.taobao.org

三.安装Babel相关：

1.全局安装 babel-cli

cnpm install babel-cli -g

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

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

四.根目录下新建：.babelrc 文件，并打开编辑：

 {

     "presets":[

         "es2015"

     ],

     "plugins":[]

 }

•上面4大步配置好后，此时我们到src目录下的index.js文件中尝试编写ES6语法的js代码:

 let msg = "hello es6";

 console.log(msg);

编写完后我们最后一步就是编译了，接下来就是见证奇迹的时候了，打开终端，定位到当前目录，这里推荐使用Visual Studio Code编辑器，会自动定位到当前目录：

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

这时到dist目录下去看，你会发现多了一个index.js的文件，并且里面的代码就是刚刚src目录下的index.js文件编译后的es5代码：

 "use strict";

 var msg = "hello es6";

 console.log(msg);

至此，ES6的运行环境搭建完成并且运行成功！

总结：1建立目录结构

2初始化当前项目

3安装babel编译工具

4编译打包：babel src/index.js -o dist/index.js

小技巧：简化编译打包命令：打开根目录的package.json文件，将"srcipt"下添加一段代码：

以后编译打包直接用： npm run build  就可以了，不用 babel src/index.js -o dist/index.js  一长串这么麻烦

   "scripts": {

     "build": "babel src/index.js -o dist/index.js"

   }　　

ES6第一节：开发环境的搭建的更多相关文章

  1. java第一天--Java开发环境的搭建以及使用eclipse从头一步步创建java项目

    一.java 开发环境的搭建 这里主要说的是在windows 环境下怎么配置环境. 1.首先安装JDK java的sdk简称JDK ,去其官方网站下载最近的JDK即可..http://www.orac ...

  2. 【Android自学之旅】 Android开发环境的搭建

    [Android自学之旅] Android开发环境的搭建 搭建参考教程: http://www.oracle.com/technetwork/java/javase/downloads/jdk7-do ...

  3. EJB3.0开发环境的搭建

    EJB Container的介绍SUN公司正式推出了EJB的规范之后,在众多的公司和开发者中引起了非常大的反响.标志着用Java开发企业级应用系统将变的非常easy.很多公司都已经推出了或正打算EJB ...

  4. 小白学习Python之路---开发环境的搭建

    本节内容 1.Python的介绍 2.发展史 3.安装Python 4.搭建开发环境 5.Hello World程序 一.Python的介绍 Python的创始人为荷兰人吉多·范罗苏姆(Guido v ...

  5. 总结：Mac前端开发环境的搭建（配置）

    新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的).macbook air,身上已无分文...接下来半年的房 ...

  6. Java开发环境的搭建以及使用eclipse从头一步步创建java项目

    一.java 开发环境的搭建 这里主要说的是在windows 环境下怎么配置环境. 1.首先安装JDK java的sdk简称JDK ,去其官方网站下载最近的JDK即可..http://www.orac ...

  7. Apache+MySQL+PHP开发环境的搭建（二）

    通过自主选择相应的apache,mysql,php等软件,根据自己的应用开发需求进行安装.此方法搭建的环境自主性较强,搭建过程较为复杂,繁琐. 1.所需软件: Apache: http-2.2.22- ...

  8. Cordova开发环境的搭建

    Cordova开发环境的搭建 原文地址:http://imziv.com/blog/article/read.htm?id=66 Cordova为目前做混合式开发中比较受欢迎的一个解决方案了,并且拥有 ...

  9. windows Android开发环境快速搭建和部署

    windows安装Android的开发环境相对来说比较简单,本文写给第一次想在自己Windows上建立Android开发环境的朋友们,为了确保大家能顺利完成开发环境的搭建,文章写的尽量详细,希望对初级 ...

  10. Linux设备驱动开发环境的搭建（转）

    经过两周的摸索,终于对Linux设备驱动开发有了个初步的认识,下面对Linux设备驱动开发环境的搭建做个小结,以方便自己以后查询,同时也能给同道的初学者一点帮助. 刚接触Linux设备驱动时,初学者往 ...

随机推荐

  1. Regular Expressions Syntax

    https://support.syslogwatcher.com/support/solutions/articles/8000033627-regular-expressions-syntax

  2. nested exception is java.lang.NoClassDefFoundError: org/codehaus/jettison/json/JSONObject异常的解决办法

    解决办法:你可以尝试添加一个jar包,因为我加入了一个jar包后错误问题成功解决. 将所需要的jettison-1.2.jar包复制到lib文件夹里面,重启项目,问题搞定.

  3. [MST] Defining Asynchronous Processes Using Flow

    In real life scenarios, many operations on our data are asynchronous. For example, because additiona ...

  4. HDU 4585 Shaolin（STL map）

    Shaolin Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit cid= ...

  5. CorePlot学习六---点击scatterPlot中的symbol点时弹出对应的凝视

    因为项目须要用到用户点击 symbol时,弹出对应的具体信息,发现国内解说的比較少,经过一番搜索验证最终解决,先看效果图: 详细须要改动的代码例如以下: 首先要引用托付方法:CPTScatterPlo ...

  6. 关于MAVEN找不到JDK的那点事

    自从SUN被Oracle收购以后.JDK就由Oracle来提供了. 在新版本号之中,假设你下载安装JDK以后,又选择了JRE安装(当然,如今JRE直接叫做Java了),那么,恭喜你,在 C:\wind ...

  7. Python TurtleWorld configuration and simple test

    TurtleWorld provides a set of functions for drawing lines by steering turtles around the screen. You ...

  8. 23.STL容器小结

  9. checkbox和文字不再同一水平线上

    为了演示效果,我故意将文字变为12px,将复选框变大,看到的效果就是下面的那样 然后,我们通过给复选框添加vertical-align:middle:让文字和复选框达到同一水平线的效果

  10. PostgreSQL Replication之第三章 理解即时恢复（4）

    3.4 重放事务日志 一旦我们创建了一个我们自己的初始基础备份,我们可以收集数据库创建的XLOG.当时间到时,我们可以使用所有这些XLOG 文件并执行我们所期望的恢复进程.这就像本节描述的一样工作. ...