babel与ES6环境的搭建
我们知道浏览器环境下直接运行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环境的搭建的更多相关文章
- 详解 Webpack+Babel+React 开发环境的搭建
1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具,能够把各种文件(例如:ReactJS.Babel.Coffeescript.Less/Sass等) ...
- react基于webpack和babel以及es6的项目搭建
项目demo地址https://github.com/aushion/webpack_reac_config 1.打开命令提示窗口,输入 mkdir react_test cd react_test ...
- ES6 环境的搭建
安装babel npm install --g babel-cli 在项目目录下输入 npm init -y 会自动创建package.json文件 babel src/index.js -o dis ...
- ES6 初体验 —— gulp+Babel 搭建ES6环境
ES6已经火了好久了,我却一直没有在项目中尝试过使用ES6写代码,只是写过几个Demo,在大型项目中使用ES6这件事,我一直不太敢做.最近公司要求做一个小的H5活动专题,我想不如就在这个小项目中使用E ...
- gulp+Babel 搭建ES6环境
Gulp是什么? Gulp是一个工作流的构建系统,开发者可以使用它在网站开发过程中自动执行常见任务.Gulp是基于Node.js构建的,因此Gulp源文件和你用来定义任务的Gulp文件都被写进了Jav ...
- es6开发环境搭建,babel 将es6转化成es5
工欲善其事,必先利其器.所以我们第1节就是搭建一个基本的ES6开发环境.现在的Chrome浏览器已经支持ES6了,但是有些低版本的浏览器还是不支持ES6的语法,这就需要我们把ES6的语法自动的转变成E ...
- ES6环境搭建及react-router学习
一.起因 ES6新纳入了很多振奋人心的新特性,真的很让人忍不住去尝试一下.不过,由于现在大部分的浏览器对ES6的支持程度都不是很好.所以如果想要放心地使用一些新特性,还需要用一些工具,将ES6或者ES ...
- react+webpack+babel+eslint+redux+react-router+sass 环境快速搭建
本文中的例子支持webpack-dev-server自动刷新及react热替换,使用了redux管理state,用react-router切换路由,用babel实现ES6语法书写,同时支持async/ ...
- React+Webpack+ES6环境搭建(自定义框架)
引言 目前React前端框架是今年最火的.而基于React的React Native也迅速发展.React有其独特的组件化功能与JSX的新语法,帮助前端设计有了更好的设计与便捷,而React Nati ...
随机推荐
- 分布式监控系统Zabbix-批量添加聚合图形
之前部署了Zabbix(3.4.4版本)监控环境,由于主机比较多,分的主机组也比较多,添加聚合图形比较麻烦,故采用python脚本进行批量添加聚合图形.脚本下载地址:https://pan.baidu ...
- HTML 5 拖放
拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 拖放事件 1. ...
- 最好使用%f输出浮点数据,acm
今天做题的时候发现使用%lf输出的时候总是wrong,而一旦改成%f就ac了,询问学长后知道,不要用%lf输出,浮点都用%f 然而我还是有疑惑,如果%f容不下输出的数据怎么办呢? 于是我就去百度 原来 ...
- 11.13 Daily Scrum
今天在实现餐厅列表时,原来使用的百度地图poi搜索接口无法返回餐厅的具体信息. 经过一番周折,找到了一个返回餐厅url的接口.我们调整了一下实现,在点击餐厅列表的某一项点击直接跳到和该餐厅信息有关的网 ...
- 2-Twentieth Scrum Meeting-20151220
任务安排 成员 今日完成 明日任务 闫昊 请假(数据库) 唐彬 请假(数据库) 史烨轩 尝试使用downloadmanager对notification进行更新 尝试使用downloadm ...
- Linux内核及分析 第八周 进程的切换和系统的一般执行过程
学习笔记: 一.进程调度与进程调度的时机分析 1.不同类型的进程有不同需求的调度需求: 第一种分类: —I/O-bound:频繁的进行I/O,通常会花费很多时间等待I/O操作的完成 —CPU-boun ...
- 《Linux内核分析》 第八节 进程的切换和一般的执行过程
张嘉琪 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 Linux内核分析 第八 ...
- 猫咪记单词Beta版使用说明
猫咪记单词Beta版使用说明 一.项目背景 英语四级考试.六级考试.托福.雅思等英语方面的考试是现在大学生必须面对的问题.同时因为学生对手机的使用越来越频繁,而且仅仅通过书本背诵单词又比较无聊坚持的时 ...
- There are no enabled repos.
今天要记录一下自己懵逼的一天,原来自己是Ubuntu系统,还以为是centos,导致命令错了 There are no enabled repos. Run "yum repolist al ...
- Maven项目中添加JDBC驱动
在pom.xml配置文件中添加: <dependency> <groupId>mysql</groupId> <artifactId>mysql-con ...