初探es6
es6环境
现在的JavaScript 引擎还不能完全支持es6的新语法、新特性。所以要想在页面中直接使用,是会报错的,这时候就需要使用babel将es2015的特性转换为ES5 标准的代码。
1、全局安装 babel-cli
cnpm install -g babel-cli
(这里我使用的是淘宝镜像,比较快,也可以直接npm)
想看是否安装成功,可以通过查看版本babel -V(大写V),或者直接babel,会有许多命令行提示,说明安装成功了。否则就安装失败了。
2、本地安装 babel-preset-es2015 babel-cli
仅全局安装babel-cli是转码不够的,还需要本地安装babel-preset-es2015 babel-cli 两个模块
安装这两个模块之前,先在本地新建一个文件夹叫es6,再新建一个index.js文件,随便写个箭头函数。
然后再在当前的cmd或者bash窗口输入 babel index.js 看看有没有成功。显然是没有成功的,嘿嘿。
题外话,补充几个babel的命令行参数 方便使用:
-o : 参数指定输出文件
-s : 参数生成source map文件 eg:babel src/index.js -o dist/index.js -s
-d : 参数指定输出目录,可整个目录下的文件对应转码 eg: babel src -d dist
babel 不带任何参数,eg:babel src/index.js 直接在窗口下转码输出
2.1 npm 初始化
npm init -y
npm init会初始化一个package.json文件,-y 表示默认都同意,不用一个个问题确认。如下:
2.2 本地安装 babel-preset-es2015 babel-cli
cnpm install --save-dev babel-preset-es2015 babel-cli
--save-dev 会自动保存到package.json的devDependencies选项中。
2.3 新建.babelrc文件
在根目录下新建.babelrc文件,注意别写错名字了,不然转码也会不成功的,因为读的就是babelrc这个文件。并填写如下:
presets: 设定转码规则
2.4 大功告成
以上步骤都完成的话,就基本大功告成啦。
最后在根目录中新建一个输出文件叫dist.js,然后在窗口输入babel index.js -o dist.js。如果没什么提示,说明ok了。如下图,左边是index.js用了箭头函数,右边是转码之后的dist.js,搞定。
初探es6的更多相关文章
- 前端 ----- 初探ES6 Promise
前段时间做项目,在调用接口的时候,遇到了异步问题.开始是使用定时器,发现效果并不理想,于是又用了回调,效果还好但是,很明显的影响了代码的整洁性. 于是我想起了在面试的那段时间,背过的面试题里,出现过一 ...
- Sublime插件支持Sass编译和Babel解析ES6 & .sublime-build文件初探
用Sublime Text蛮久了,配置配来配去的,每次换电脑都得重头再配过,奈何人老了脑子不中用了,得好好整理一些,下次换电脑就有得参考了.. 同事说,他的WebStorm简直太方便,自身集成了很多方 ...
- es6+react.js组件入门初探
React是一个用于构建用户见面的javascript库. React主要用于构建UI,许多人认为React是MVC中的V(视图) React起源于Facebook的内部项目,用来架设Instagra ...
- Sublime插件支持Sass编译和Babel解析ES6 & .sublime-build文件初探(转载自imwtr)
原文请看:http://www.cnblogs.com/imwtr/p/6010550.html 用Sublime Text蛮久了,配置配来配去的,每次换电脑都得重头再配过,奈何人老了脑子不中用了 ...
- ES6初探——编译环境搭建
不好意思我又要来写操作文档了,看起来更像wiki的博客(如果你想深入学习,请阅读文末列的参考资料).本文将示例如何把ES6编译成ES5. 首先,你要自行查阅什么是ES6,和ES5.javascript ...
- JavaScript初探系列(十一)——ES6
一.前言 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了.它的目标,是使得 JavaScript 语言可以用来编写复 ...
- webpack打包,同时将ES6转为ES5,初探
webpack打包,同时将ES6转为ES5,第一次尝试搞了一下午才弄好,所有的问题均来自ES6转es5上面,可能天分不够把,但愿各大浏览器快点支持ES6吧!忽略nodejs安装. 第一,新建一个项目文 ...
- ES6转换器之Babel
ES6部分功能没有支持,所以想学习ES6,得先有个转换器,就是将ES6的代码转换为ES5. 我这里用的是Gulp + Bable的形式来将ES6转换为ES5的. 前提: (1).Gulp和Bable都 ...
- React Native初探
前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...
随机推荐
- 36小时极客嘉年华!FISCO BCOS黑客马拉松报名启动
FISCO BCOS是完全开源的联盟区块链底层技术平台,由金融区块链合作联盟(深圳)(简称金链盟)成立开源工作组通力打造.开源工作组成员包括博彦科技.华为.深证通.神州数码.四方精创.腾讯.微众银行. ...
- LCS最大公共子序列【转载】
在两个字符串中,有些字符会一样,可以形成的子序列也有可能相等,因此,长度最长的相等子序列便是两者间的最长公共字序列,其长度可以使用动态规划来求. 以s1={1,3,4,5,6,7,7,8},s2={3 ...
- ignoring option MaxPermSize=256m; support was removed in 8.0 - unsupported JVM property
MaxPermSize 在JVM8 中已经被删除. 可以使用 JAVA_OPTS="-Xms1303m -Xmx1303m -XX:MaxPermSize=256m 参考 https://b ...
- BZOJ 2288: 【POJ Challenge】生日礼物 堆&&链表
就是堆+链表,十分像 数据备份 对吧? 把相邻的正数和相邻的负数合并成一整个正数块和负数块,最后只剩一些交替相间的正块与负块了吧? 显然,正块的个数<=m时,全部选走就获得了最大权值,否则我们可 ...
- MapReduce作业的执行流程
MapReduce任务执行总流程 一个MapReduce作业的执行流程是:代码编写 -> 作业配置 -> 作业提交 -> Map任务的分配和执行 -> 处理中间结果 -> ...
- hadoop集群启动时DataNode节点启动失败
错误日志如下: ************************************************************/ 2018-03-07 18:57:35,121 INFO o ...
- AnyCAD OpenSource 版本下载和编译
下载: SVN下载地址:https://anycad.svn.codeplex.com/svn 或者直接下载:http://anycad.codeplex.com/SourceControl/late ...
- idea远程debug:tomcat
在tomcat的bin/startup.sh中添加: 27780debug的端口 declare -x CATALINA_OPTS="-server -Xdebug -Xnoagent -D ...
- es6+字符串string的新增方法函数
String.includes("xxx") 返回true/false [es5的字符串查找方法:String.indexOf() ] String.startsWit ...
- 【extjs6学习笔记】1.8 初始: ExtJS命名约定
Convention for Description Example Class 类名应该在CamelCase中 MyCustomClass 类名应包含字母数字字符. 如果属于技术术语,则允许使用数字 ...