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的更多相关文章

  1. 前端 ----- 初探ES6 Promise

    前段时间做项目,在调用接口的时候,遇到了异步问题.开始是使用定时器,发现效果并不理想,于是又用了回调,效果还好但是,很明显的影响了代码的整洁性. 于是我想起了在面试的那段时间,背过的面试题里,出现过一 ...

  2. Sublime插件支持Sass编译和Babel解析ES6 & .sublime-build文件初探

    用Sublime Text蛮久了,配置配来配去的,每次换电脑都得重头再配过,奈何人老了脑子不中用了,得好好整理一些,下次换电脑就有得参考了.. 同事说,他的WebStorm简直太方便,自身集成了很多方 ...

  3. es6+react.js组件入门初探

    React是一个用于构建用户见面的javascript库. React主要用于构建UI,许多人认为React是MVC中的V(视图) React起源于Facebook的内部项目,用来架设Instagra ...

  4. Sublime插件支持Sass编译和Babel解析ES6 & .sublime-build文件初探(转载自imwtr)

    原文请看:http://www.cnblogs.com/imwtr/p/6010550.html   用Sublime Text蛮久了,配置配来配去的,每次换电脑都得重头再配过,奈何人老了脑子不中用了 ...

  5. ES6初探——编译环境搭建

    不好意思我又要来写操作文档了,看起来更像wiki的博客(如果你想深入学习,请阅读文末列的参考资料).本文将示例如何把ES6编译成ES5. 首先,你要自行查阅什么是ES6,和ES5.javascript ...

  6. JavaScript初探系列(十一)——ES6

    一.前言 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了.它的目标,是使得 JavaScript 语言可以用来编写复 ...

  7. webpack打包,同时将ES6转为ES5,初探

    webpack打包,同时将ES6转为ES5,第一次尝试搞了一下午才弄好,所有的问题均来自ES6转es5上面,可能天分不够把,但愿各大浏览器快点支持ES6吧!忽略nodejs安装. 第一,新建一个项目文 ...

  8. ES6转换器之Babel

    ES6部分功能没有支持,所以想学习ES6,得先有个转换器,就是将ES6的代码转换为ES5. 我这里用的是Gulp + Bable的形式来将ES6转换为ES5的. 前提: (1).Gulp和Bable都 ...

  9. React Native初探

    前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...

随机推荐

  1. 36小时极客嘉年华!FISCO BCOS黑客马拉松报名启动

    FISCO BCOS是完全开源的联盟区块链底层技术平台,由金融区块链合作联盟(深圳)(简称金链盟)成立开源工作组通力打造.开源工作组成员包括博彦科技.华为.深证通.神州数码.四方精创.腾讯.微众银行. ...

  2. LCS最大公共子序列【转载】

    在两个字符串中,有些字符会一样,可以形成的子序列也有可能相等,因此,长度最长的相等子序列便是两者间的最长公共字序列,其长度可以使用动态规划来求. 以s1={1,3,4,5,6,7,7,8},s2={3 ...

  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 ...

  4. BZOJ 2288: 【POJ Challenge】生日礼物 堆&&链表

    就是堆+链表,十分像 数据备份 对吧? 把相邻的正数和相邻的负数合并成一整个正数块和负数块,最后只剩一些交替相间的正块与负块了吧? 显然,正块的个数<=m时,全部选走就获得了最大权值,否则我们可 ...

  5. MapReduce作业的执行流程

    MapReduce任务执行总流程 一个MapReduce作业的执行流程是:代码编写 -> 作业配置 -> 作业提交 -> Map任务的分配和执行 -> 处理中间结果 -> ...

  6. hadoop集群启动时DataNode节点启动失败

    错误日志如下: ************************************************************/ 2018-03-07 18:57:35,121 INFO o ...

  7. AnyCAD OpenSource 版本下载和编译

    下载: SVN下载地址:https://anycad.svn.codeplex.com/svn 或者直接下载:http://anycad.codeplex.com/SourceControl/late ...

  8. idea远程debug:tomcat

    在tomcat的bin/startup.sh中添加: 27780debug的端口 declare -x CATALINA_OPTS="-server -Xdebug -Xnoagent -D ...

  9. es6+字符串string的新增方法函数

    String.includes("xxx")   返回true/false     [es5的字符串查找方法:String.indexOf() ] String.startsWit ...

  10. 【extjs6学习笔记】1.8 初始: ExtJS命名约定

    Convention for Description Example Class 类名应该在CamelCase中 MyCustomClass 类名应包含字母数字字符. 如果属于技术术语,则允许使用数字 ...