es6环境搭建
安装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环境搭建的更多相关文章
- ES6环境搭建及react-router学习
一.起因 ES6新纳入了很多振奋人心的新特性,真的很让人忍不住去尝试一下.不过,由于现在大部分的浏览器对ES6的支持程度都不是很好.所以如果想要放心地使用一些新特性,还需要用一些工具,将ES6或者ES ...
- React+Webpack+ES6环境搭建(自定义框架)
引言 目前React前端框架是今年最火的.而基于React的React Native也迅速发展.React有其独特的组件化功能与JSX的新语法,帮助前端设计有了更好的设计与便捷,而React Nati ...
- gulp+Babel 搭建ES6环境
Gulp是什么? Gulp是一个工作流的构建系统,开发者可以使用它在网站开发过程中自动执行常见任务.Gulp是基于Node.js构建的,因此Gulp源文件和你用来定义任务的Gulp文件都被写进了Jav ...
- ES6的开发环境搭建
在搭建es6开发环境之前,先简单介绍一下es6. ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在2015年6月正式发布了.它的目标,是使得 Java ...
- Webpack+React+ES6 最新环境搭建和配置（2017年）
刚刚学习React,发现React在ES6下的语法才是本体,结合ES6新的语言特性,使组件化开发显得更加直观.而且现在的Angular2也开始使用支持强类型的TypeScript,转译(transpi ...
- ES6 初体验 —— gulp+Babel 搭建ES6环境
ES6已经火了好久了,我却一直没有在项目中尝试过使用ES6写代码,只是写过几个Demo,在大型项目中使用ES6这件事,我一直不太敢做.最近公司要求做一个小的H5活动专题,我想不如就在这个小项目中使用E ...
- webpack+babel+ES6+react环境搭建
webpack+babel+ES6+react环境搭建 步骤: 1 创建项目结构 注意: 先创建一个项目目录 react 这个名字自定义,然后进入到这个目录下面 mkdir app //创建app ...
- 一.ES6的开发环境搭建
前言: 现在的Chrome浏览器已经支持ES6了,但是有些低版本的浏览器还是不支持ES6的语法,这就需要我们把ES6的语法自动的转变成ES5的语法.Webpack是有自动编译转换能力的,除了Webpa ...
- ES6 - 基础学习(1): 开发环境搭建
现在Chrome浏览器已经很好的支持ES6了,但有些低版本的浏览器或其他浏览器还是不支持ES6的语法,因此实际项目开发或上线过程中就需要把ES6的语法转变成ES5的语法.项目开发过程中 Webpack ...
随机推荐
- OpenWRT添加模块 Makefile和Config.in
添加模块编译 在网上找了一下,很多关于编译Openwrt系统的资料,不过这些事情芯片厂商提供的开发包都已经办得妥妥了,但是没有找到系统介绍的资料,添加一个包的介绍有不多,其中有两个很有参考价值: ht ...
- 【转】RAM 大全-DRAM, SRAM, SDRAM的关系与区别
http://blog.csdn.net/huleide/article/details/5506698 ROM和RAM指的都是半导体存储器,ROM是Read Only Memory的缩写,RAM是R ...
- 探索equals()和hashCode()方法
探索equals()和hashCode()方法 在根类Object中,实现了equals()和hashCode()这两个方法,默认: equals()是对两个对象的地址值进行的比较(即比较引用是否相同 ...
- LeetCode Questions List （LeetCode 问题列表）- Java Solutions
因为在开始写这个博客之前,已经刷了100题了,所以现在还是有很多题目没有加进来,为了方便查找哪些没加进来,先列一个表可以比较清楚的查看,也方便给大家查找.如果有哪些题目的链接有错误,请大家留言和谅解, ...
- [Scikit-learn] 2.1 Clustering - Variational Bayesian Gaussian Mixture
最重要的一点是:Bayesian GMM为什么拟合的更好? PRML 这段文字做了解释: Ref: http://freemind.pluskid.org/machine-learning/decid ...
- Linux系列教程（十）——Linux文本编辑器vim
通过前面几篇博客我们终于结束了Linux常用命令的介绍,Linux常用命令主要包括以下: ①.Linux文件和目录处理命令 ②.Linux链接命令和权限管理命令 ③.Linux文件搜索命令 ④.Lin ...
- js如何获取地址栏的参数
//获取参数的方法(利用正则表达式) function GetUrlParam(name){ var reg = new RegExp("(^|&)"+ name +&qu ...
- Windows环境下多线程编程原理与应用读书笔记（2）————面向对象技术
面向对象技术是学C++需要重点掌握的知识,因为我觉得自己的基础还是比较可以,这一章节的内容就只是粗略的读了一遍,在此就不做过多的笔记.
- 1034: [ZJOI2008]泡泡堂BNB
1034: [ZJOI2008]泡泡堂BNB Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 3234 Solved: 1655[Submit][St ...
- 【转载】以Java的视角来聊聊SQL注入
以Java的视角来聊聊SQL注入 原创 2017-08-08 javatiku Java面试那些事儿 在大二就接触过sql注入,之前一直在学习windows逆向技术,认为web安全以后不是自己的从业方 ...