前言：由于目前浏览器对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. Sql_Server中怎样推断表中某列是否存在

    /*推断表AA中是否存在AA_ID这一列.假设不存在,则新增*/ IF NOT EXISTS (SELECT 1 FROM syscolumns INNER JOIN sysobjects ON sy ...

  2. pig 调试（explain&amp;illerstrate）

    grunt> cat t.txt kw1 2 kw3 1 kw2 4 kw1 5 kw2 2 cat test.pig A = LOAD '/user/input/t.txt' as (k:ch ...

  3. Vue小技巧，如何导入普通JS文件

    最近在开发一个展示3D模型的WEB程序,在工程中使用了VUE和ThreeJS库.Three.js本身是支持CommonJS的,但我们还用到了OBJLoader模块,此模块不支持CommonJS,改成C ...

  4. poj_1974，最长回文字串manacher

    时间复杂度为O(n),参考:http://bbs.dlut.edu.cn/bbstcon.php?board=Competition&gid=23474 #include<iostrea ...

  5. hdoj--2036--改革春风吹满地(数学几何)

    改革春风吹满地 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Su ...

  6. [转]Adobe Creative Cloud 2015 下载 Adobe CC 2015 Download

    Adobe Creative Cloud 2015 下载   Adobe 宣布 Creative Cloud 设计套件全线更新! Adobe CC 2015新功能包括: – Premiere Pro ...

  7. 关于md解析器

    不得不说,博客园的 md 解析器真的不够好.和 csdn 以及 sf 社区的比起来,差太多了.以后,博客园就老老实实写随笔了,文章类的还是用 csdn 吧.

  8. Chromium Graphics: Compositor Thread Architecture

    Compositor Thread Architecture <jamesr, enne, vangelis, nduca> @chromium.org Goals The main re ...

  9. 记录一次Permission denied解决过程

    热烈推荐:超多IT资源,尽在798资源网 朋友网站碰到一个奇怪的问题,程序所在目录无法进行上传操作. 具体细节是这样的:网站所在目录 /www/web/xiangmua 路径下,/www/web 都可 ...

  10. python、js 时间日期模块time

    python 参考链接:https://www.runoob.com/python/python-date-time.html 时间戳 >>> print(time.time())# ...