前言：由于目前浏览器对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. ETL工具-informatica产品部分功能、接口采购梳理

    在项目中,经常遇到要进行产品采购,虽然一直在使用informatica工具做数据的抽取.清晰转换.加载,但是使用的功能也比较初级.在遇到采购时大致的进行了梳理. 序号 名称 产品功能说明 产品选配说明 ...

  2. 洛谷 P2758 编辑距离

    P2758 编辑距离 题目描述 设A和B是两个字符串.我们要用最少的字符操作次数,将字符串A转换为字符串B.这里所说的字符操作共有三种: 1.删除一个字符: 2.插入一个字符: 3.将一个字符改为另一 ...

  3. 实验了一下对于struct引用的成员的改动

    今天写代码的时候,不确定struct用引用传递给函数的时候,他的成员在函数里面改变的时候,是否能影响到外面. 实验了一下 #include <stdio.h> #include <s ...

  4. 移动端页面弹出对话框效果Demo

    核心思路:设置一个隐藏的(display:none;).背景偏暗的div及其子div作为对话框.当点击某处时,将此div设置为显示. 核心代码例如以下(部分js代码用于动态调整div内容的行高.这部分 ...

  5. 了解Linux的基础知识和一般概念

    1.GNU和GPL    GNU计划(又称革奴计划),是由Richard Stallman(理查德·斯托曼)在1983年9月27日公开发起的自由软件集体协作计划.它的目标是创建一套完全自由的操作系统. ...

  6. 链表python

    无序链表.有序链表 有序列表排序通常是升序或降序,并且我们假设列表项具有已经定义的有意义的比较运算. 许多有序列表操作与无序列表的操作相同. 必须明确链表的第一项位置,一旦知道第一项. 链表实现的基本 ...

  7. SSD-2（代码部分介绍）

    single shot multibox detectior tensorflow 代码 一.SSD重要参数设置 在ssd_vgg_300.py文件中初始化重要的网络参数,主要有用于生成默认框的特征层 ...

  8. 列表的所有的input，将它的值以键值对的形式存放到一个数组里

    要求的格式 代码块 $('.btn-confirm').on('tap',function(){ var arr={}; var name = $("input[name='insuranc ...

  9. 与 JSON 相关的一些操作 (项目中用到一部分，后续逐渐完善)

    1.JSON 打印 console.log(JSON.stringify(data, null, 4)); 2.JSON 格式判断 var isjson = typeof(obj) == " ...

  10. CF 414B Mashmokh and ACM 动态规划

    题意: 给你两个数n和k.求满足以下条件的数列有多少个. 这个数列的长度是k: b[1], b[2], ……, b[k]. 并且 b[1] <= b[2] <= …… <= b[k] ...