我们知道浏览器环境下直接运行ES6是存在一些兼容性问题的。那么把ES6变成ES5不就行了吗？
那如何将ES6转换成ES5呢？我们来搭建它的转换环境吧~
第一步：初始化项目，建立写注意事项的README.md文件，初始化package.json文件。

第二步：创建index.html文件，创建src文件夹放js文件，dist文件夹放编译之后的js文件（这个也是html文件要引入的js文件）。
记得要修改package.json文件。


第三步：安装es2015preset，创建.babelrc文件，添加preset。最后运行代码。



编译之后的文件

很想把完整的demo也给大家看，已经上传到github了：https://github.com/JserJser/reactDemo/tree/master/react-project/es6-course

babel与ES6环境的搭建的更多相关文章

  1. 详解 Webpack+Babel+React 开发环境的搭建

    1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具,能够把各种文件(例如:ReactJS.Babel.Coffeescript.Less/Sass等) ...

  2. react基于webpack和babel以及es6的项目搭建

    项目demo地址https://github.com/aushion/webpack_reac_config 1.打开命令提示窗口,输入 mkdir react_test cd react_test ...

  3. ES6 环境的搭建

    安装babel npm install --g babel-cli 在项目目录下输入 npm init -y 会自动创建package.json文件 babel src/index.js -o dis ...

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

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

  5. gulp+Babel 搭建ES6环境

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

  6. es6开发环境搭建，babel 将es6转化成es5

    工欲善其事,必先利其器.所以我们第1节就是搭建一个基本的ES6开发环境.现在的Chrome浏览器已经支持ES6了,但是有些低版本的浏览器还是不支持ES6的语法,这就需要我们把ES6的语法自动的转变成E ...

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

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

  8. react+webpack+babel+eslint+redux+react-router+sass 环境快速搭建

    本文中的例子支持webpack-dev-server自动刷新及react热替换,使用了redux管理state,用react-router切换路由,用babel实现ES6语法书写,同时支持async/ ...

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

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

随机推荐

  1. Session会话与Cookie简单说明

    会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端 ...

  2. Centos6下关于系统用户密码规则-运维笔记

    随着linux使用的普遍,对于linux用户以及系统的安全要求越来越高,而用户密码复杂程度是系统安全性高低的首要体现.因此如何对linux下用户的密码进行规则限制,以保证用户必须使用复杂的密码,杜绝用 ...

  3. Maven 项目生成或者update jdk变为1.5的问题

    在使用Maven构建项目时,生成的maven项目jdk默认使用的是jdk1.5. 在手动修改了jdk之后,update project之后jdk又会变为1.5. 或者用eclipse的Maven插件生 ...

  4. 腾讯QQ的商业模式

    近期听到许多关于腾讯QQ的报道,然后想到之前自己在QQ上遇到的一些问题,一瞬间感觉大脑的所有想法喷涌而出. 以前总觉得QQ是个很好的平台,我们可以通过QQ和自己的亲人朋友爱人聊天,有时候还可以在自己的 ...

  5. 对我们最常用的软件QQ的看法

    QQ聊天软件是我使用的第一款聊天软件,早在我上小学6年级的时候就开始接触这款软件了,可以说是陪伴我最久的一款软件. 相对于其他的聊天软件,QQ更加的方便,使用简单,界面也好操作,所以我爱上了这款软件. ...

  6. What is 软件工程

    话说新的一学期,有一门叫软件工程的专业课,作为计算机科学与技术专业的学生,在上课前有几个问题 1.软件工程顾名思义是学软件,可是软件这个词范围还是挺大的,那到底学的是哪方面,是编程?设计APP?还是一 ...

  7. HDOJ2099_整数的尾数

    一道我以为不会这么简单,然后暴力盲打竟然给过了的题. HDOJ2099_整数的尾数 #include<stdio.h> #include<stdlib.h> #include& ...

  8. [转帖]IBM POWER系列处理器的前世今生

    IBM POWER系列处理器的前世今生 Power是Power Optimization With Enhanced RISC的缩写,是由IBM开发的一种RISC指令集架构(ISA). IBM的很多服 ...

  9. SP5973 SELTEAM - Selecting Teams

    SP5973 SELTEAM - Selecting Teams [题目描述] 他已经有 n 个心仪的妹子了,但随着时间的流逝,只有 m(1<=m<=k)个直伴随在他的身边,而小小迪发现他 ...

  10. VS2013编译报错error C4996: 'sprintf': This function or variable may be unsafe. Consider using sprintf_s instead. To disable deprecation, use _CRT_SECURE_NO_WARNINGS.

    解决方法有两个: 1. 在预编译头文件stdafx.h里(在没有include任何头文件之前)定义下面的宏: #define _CRT_SECURE_NO_DEPRECATE 2. 将sprintf函 ...