我们知道浏览器环境下直接运行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. 分布式监控系统Zabbix-3.0.3-完整安装记录（1）

    分布式监控系统Zabbix-3.0.3的安装记录 环境说明zabbix-server:192.168.1.30     #zabbix的服务端(若要监控本机,则需要配置本机的Zabbix agent, ...

  2. Spring RPC 入门学习（1）-HelloWorld入门

    Spring搭建RPC环境 第一,下载所需要的jar包,下载地址:https://yunpan.cn/cPErQeANrSMyB (提取码:63e5),见下图: 第二,新建动态WebProject,把 ...

  3. React++ node.js ++SQL Sever ++MySQL++ python ++ php ++ java ++ c++ c#++ java ++ android ++ ios ++Linux+

    "C语言在它诞生的那个年代,是非常不错的语言,可惜没有OOP.当项目臃肿到一定程度,人类就不可控了. 为了弥补这个缺陷,C++诞生了.而为了应对各种情况,C++设计的大而全,太多复杂的特性, ...

  4. Linux实践：ELF文件格式分析

    标签(空格分隔): 20135321余佳源 一.基础知识 ELF全称Executable and Linkable Format,可执行连接格式,ELF格式的文件用于存储Linux程序.ELF文件(目 ...

  5. 开源RabbitMQ操作组件

    开源RabbitMQ操作组件 对于目前大多的.NET项目,其实使用的技术栈都是差不多,估计现在很少用控件开发项目的了,毕竟一大堆问题.对.NET的项目,目前比较适合的架构ASP.NET MVC,ASP ...

  6. 第五届蓝桥杯C++B组 地宫取宝

    代码: #include <bits/stdc++.h> using namespace std; #define ll long long const ll mod = 1e9 + 7; ...

  7. C语言复制文件的两种简单的方法【从根本解决问题】

    网上的方法大致有这样几种: 1.使用操作系统提供的复制文件的API 2.使用C语言本身提供的复制文件的函数 3.直接读写文件,从文件角度来操作,从而直接将一个文件复制 这里我们使用的就是这第三种. 复 ...

  8. Fantacy团队周二站立会议

    词频分析模型 1.这次站会是周二开的,但是由于我个人的疏忽,哎,不说了. 2.会议时间:2016年3月29日12:03~12:30. 持续时长:27分钟 会议参加成员:组长:杨若鹏 http://ww ...

  9. Maven Archetype简介以及搭建

    为什么会写这篇文章,因为公司先在构建项目骨架都是用的 maven archetype ,身为一个上进的渣渣猿,自己还是有必要了解下这个东西的. Archetype介绍 Archetype 是一个 Ma ...

  10. Java代码redis基础操作

    maven依赖包: <dependency> <groupId>redis.clients</groupId> <artifactId>jedis< ...