我们知道浏览器环境下直接运行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. Python_试题_23

    # Python基础数据类型考试题# 考试时间:两个半小时 满分100分(80分以上包含80分及格)# 一,基础题.# 1,简述变量命名规范(3分)# 答:变量名是由数字.字母.下划线任意组合,变量名 ...

  2. Python-复习-习题-13

    复习 dict: dic = {'name':'alex'}增:dic['age'] = 21 存在就覆盖dic.setdefault() 存在什么也不做,没有就增加 删除:pop()按照key删除, ...

  3. 访谈：BugPhobia’s Brief Communication

    0x01 :采访的学长简介 If you weeped for the missing sunset, you would miss all the shining stars 梁野,北京航空航天大学 ...

  4. 《Linux内核设计与实现》读书笔记 1&2

    第一章    Linux内核简介 1.2追寻Linus足迹:linux简介 Linus开发.Linux是类Unix系统.Linux内核也是自由软件. 1.3操作系统和内核简介 操作系统:在整个系统中负 ...

  5. myeclipse从SVN检出项目报错

    今天是在公司实习的第一天,从SVN服务器检出项目后发现报错. 解决方法: 1. 右键项目,选择属性properties-->选择resource-->将others选中并换为UTF-8 2 ...

  6. shell脚本--循环结构

    shell的循环结构有while和for两种 for循环 #!/bin/bash #文件名:test.sh i=4 for i in 2 4 6 8 10 do echo $i done echo $ ...

  7. nginx gzip 以及 tcp 反向代理的 model

    同事为了提高性能发给我一model 简单改了一下. 记录一下 #user nobody; worker_processes ; events { worker_connections ; } http ...

  8. SQLserver 使用网络驱动器恢复数据库

    1. 公司内有多台虚拟机,因为公司提供出来的机器 硬盘总是不够大...所以想到了使用  映射网络驱动器的方式进行备份恢复工作. 学到的方法主要如下: 0. 首先打开sqlcmd 启动命令行界面 1. ...

  9. Lodop打印设计界面生成代码带”...(省略)”

    Lodop的设计界面中,菜单里的生成代码,如果打印项内容过多,后面会显示”...(省略)”,省略的是打印项的内容值,无论是纯文本还是超文本,都可以用选中打印项-右键-设置属性里找到该打印项的全部值,可 ...

  10. USDT（omniCore）测试环境搭建

    一.测试环境搭建. 注:由于window版本的omni出现同步不了的问题,推荐使用linux系统进行usdt测试链的搭建. 1.下载omnicore: wget https://bintray.com ...