安装node环境

地址：https://nodejs.org/en/download/

建立项目目录

建立一个项目目录es6-demo，并在目录下建立两个子文件夹src和dist；

  • src：源代码es6的目录
  • dist：编译后es6的目录

初始化项目

使用下面命令初始化项目，在项目目录下生成package.json文件：

npm init

//或者

npm init -y

两者区别在于，前者是分步确认生成的信息，后者是默认确认生成的信息；

全局安装babel-cli

Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在现有环境执行；Babel提供了babel-cli工具，用于命令行转码；

npm install babel-cli -g

基本用法：

# 转码结果输出到标准输出

$ babel example.js

# 转码结果写入一个文件

# --out-file 或 -o 参数指定输出文件

$ babel example.js --out-file compiled.js

# 或者

$ babel example.js -o compiled.js

# 整个目录转码

# --out-dir 或 -d 参数指定输出目录

$ babel src --out-dir lib

# 或者

$ babel src -d lib

# -s 参数生成source map文件

$ babel src -d lib -s

建立.babelrc

在项目根目录下，创建.babelrc，.babelrc是Babel的配置文件；该文件是用来设置转码规则和插件的，基本格式如下：

{

    "presets":[],//转码规则

    "plugins":[]// 转码插件

}

安装转码规则

在本地安装转码规则模块babel-preset-es2015:

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

然后，将规则加入.babelrc文件当中：

{

    "presets":[

        "es2015"

    ],

    "plugins":[]

}

编译基本代码

在项目根目录下建立index.html文件

/index.html

<!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>hello es6</title>

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

    </head>

    <body>

    Hello es6

    </body>

</html>

引入js文件，是编译后的js文件，即dist目录下的文件；

在src文件下创建即将要编写的index.js文件

/src/index.js

let a = 1;

let b = 1;

console.log(a + b);

这里用的let是es6的一种声明方式，接下来我们需要把这个ES6的语法文件自动编程成ES5的语法文件。

首先，我们使用babel命令行来编译：

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

这样就可以，看见在dist目录下生成一个index.js文件：

"use strict";

var a = 1;

var b = 1;

console.log(a + b);

编译成功。

使用babel命令行，一大长串，很容易忘记什么，所以，我们可以改造package.json，来使用更容易记住的命令来编译:

 "scripts": {

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

}

在"scripts"模块下，添加上面的命令行，然后使用命令：

npm run build

就可以直接编译了；

Webpack自动编译

具体请参考作者webpack 3.X学习之Babel配置

参考：

es6环境搭建的更多相关文章

  1. ES6环境搭建及react-router学习

    一.起因 ES6新纳入了很多振奋人心的新特性,真的很让人忍不住去尝试一下.不过,由于现在大部分的浏览器对ES6的支持程度都不是很好.所以如果想要放心地使用一些新特性,还需要用一些工具,将ES6或者ES ...

  2. React+Webpack+ES6环境搭建(自定义框架)

    引言 目前React前端框架是今年最火的.而基于React的React Native也迅速发展.React有其独特的组件化功能与JSX的新语法,帮助前端设计有了更好的设计与便捷,而React Nati ...

  3. gulp+Babel 搭建ES6环境

    Gulp是什么? Gulp是一个工作流的构建系统,开发者可以使用它在网站开发过程中自动执行常见任务.Gulp是基于Node.js构建的,因此Gulp源文件和你用来定义任务的Gulp文件都被写进了Jav ...

  4. ES6的开发环境搭建

    在搭建es6开发环境之前,先简单介绍一下es6. ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在2015年6月正式发布了.它的目标,是使得 Java ...

  5. Webpack+React+ES6 最新环境搭建和配置（2017年）

    刚刚学习React,发现React在ES6下的语法才是本体,结合ES6新的语言特性,使组件化开发显得更加直观.而且现在的Angular2也开始使用支持强类型的TypeScript,转译(transpi ...

  6. ES6 初体验 —— gulp+Babel 搭建ES6环境

    ES6已经火了好久了,我却一直没有在项目中尝试过使用ES6写代码,只是写过几个Demo,在大型项目中使用ES6这件事,我一直不太敢做.最近公司要求做一个小的H5活动专题,我想不如就在这个小项目中使用E ...

  7. webpack+babel+ES6+react环境搭建

    webpack+babel+ES6+react环境搭建 步骤: 1 创建项目结构 注意: 先创建一个项目目录  react  这个名字自定义,然后进入到这个目录下面 mkdir app //创建app ...

  8. 一.ES6的开发环境搭建

    前言: 现在的Chrome浏览器已经支持ES6了,但是有些低版本的浏览器还是不支持ES6的语法,这就需要我们把ES6的语法自动的转变成ES5的语法.Webpack是有自动编译转换能力的,除了Webpa ...

  9. ES6 - 基础学习(1): 开发环境搭建

    现在Chrome浏览器已经很好的支持ES6了,但有些低版本的浏览器或其他浏览器还是不支持ES6的语法,因此实际项目开发或上线过程中就需要把ES6的语法转变成ES5的语法.项目开发过程中 Webpack ...

随机推荐

  1. MYSQL 数据库高频查询语句整理

    一查询数值型数据: SELECT * FROM tb_name WHERE sum > 100; 查询谓词:>,=,<,<>,!=,!>,!<,=>,= ...

  2. 用 Eclipse 搭建一个简单的 Maven spring mybatis 项目(包含测试用例)

    1: 先搭建一个Maven项目: 创建好后的目录: 2: 配置pom.xml文件: <project xmlns="http://maven.apache.org/POM/4.0.0& ...

  3. 基于webuploader.js的单图片上传封装

    HTML代码 <div class="manageImgUp">点击图片上传</div> <div class="manageImgUpLc ...

  4. 转 node.js里面的http模块深入理解

    问题1:HTTP服务继承了TCP服务模型,是从connection为单位的服务到以request为单位的服务的封装,那么request事件何时触发? 注意:在开启keepalive后,一个TCP会话可 ...

  5. LeetCode 205. Isomorphic Strings （同构字符串）

    Given two strings s and t, determine if they are isomorphic. Two strings are isomorphic if the chara ...

  6. SpringMVC的流程分析（一）—— 整体流程概括

    SpringMVC的整体概括 之前也写过springmvc的流程分析,只是当时理解的还不透彻所以那篇文章就放弃了,现在比之前好了些,想着写下来分享下,也能增强记忆,也希望可以帮助到人,如果文章中有什么 ...

  7. Python Web框架篇：Django Model ORM(对象关系映射)

    一,基本操作 用于实现面向对象编程语言里不同类型系统的数据之间的转换,换言之,就是用面向对象的方式去操作数据库的创建表以及增删改查等操作. 1.增(create , save): from app01 ...

  8. poj3270Cow Sorting（置换+贪心）

    Cow Sorting Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 7587   Accepted: 2982 Descr ...

  9. js里面的map、filter、forEach、reduce、for in、for of等遍历方法

    1.map 遍历数组,改变原数组 [2, 3, 4, 5].map(function(val, key,arr) { return val > 3; }) var data = [ { name ...

  10. HTML学习笔记 w3sCss盒子模型应用案例（div布局） 第十一节 （原创） 参考使用表

    * { margin: 0px; padding: 0px; } .top { width: 100%; height: 50px; background-color: antiquewhite; } ...