前言：由于目前浏览器对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. Windows下从源代码编译Skia

    在PPAPI里面画图,能够结合第三方的图形库.比方Cairo.Skia. Google Chrome.Chromium和Android都使用Skia作为画图引擎.我也来试试Skia,先过编译关. fo ...

  2. 创建一个Spring的HelloWorld程序

    Spring IOC IOC指的是控制反转,把对象的创建.初始化.销毁等工作都交给Spring容器.由spring容器来控制对象的生命周期.下图能够说明我们传统创建类的方式和使用Spring之后的差别 ...

  3. JNI中java类型的简写

      在JNI中,当我们使用GetFieldID/GetStaticFieldID或GetMethodID/GetStaticMethodID及定义JNINativeMethod等时,我们需要表示成员变 ...

  4. 32.智能指针auto_ptr

    #include <iostream> #include <memory> #include <string> #include <vector> us ...

  5. PowerDesigner怎么调出工具箱？

    PowerDesigner怎么调出工具箱? 如图操作:

  6. PostgreSQL Replication之第六章 监控您的设置（1）

    在本书的前几章,您已经学习了各种复制以及如何配额制各种类型的场景.现在是时候通过增加监控来让您的设置更加可靠了. 在本章中,您将学习监控什么以及如恶化实施合理的监控车辆.您将学习: • 检查您的 XL ...

  7. webService接口发布失败问题

    今天在原有工程上新增加了个webService接口的服务类,但是总提示 axis2 出错 File "/axis2-web/listSingleService.jsp" not f ...

  8. Java ——代理模式[转发]

    1.  简介 代理模式(Proxy Pattern)是GoF 23种Java常用设计模式之一.代理模式的定义:Provide a surrogate or placeholder for anothe ...

  9. perl模块

    查看perl模块安装目录:find `perl -e ‘print “@INC”‘` -name ‘*.pm’ -print 为什么要写或要模块呢?简言之:代码重用,更多见于写一组工具集,有很多地方是 ...

  10. 巧用MAC地址表

    对于身处网络环境的人来说,不少朋友应该遇到过这种的情况:某一个终端找不到接在了哪一个交换机口上,也不知道数据包怎样走的. ok,那么这时候MAC地址表就作用了,拿下图的实验环境(H3C)来说好了 环境 ...