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. c#根据身份证获取身份证信息

    /// <summary> /// 根据身份证获取身份证信息 /// 18位身份证 /// 0地区代码(1~6位,其中1.2位数为各省级政府的代码,3.4位数为地.市级政府的代码,5.6位 ...

  2. ORA-01950:表空间“USERS”中无权限

    ORA-01950:表空间“USERS”中无权限 解决方案: A)确认给用户授权了resource角色 B)取消限制 ALTER USER "HCCPMS" QUOTA UNLIM ...

  3. Linux上传下载工具FileZilla(GNU软件) 文件传输和配置文件修改

  4. [NWPU2016][寒假作业][正常版第三组]R&&HDU1240

    题意是有个三维的地图,从起点到终点的最短路径.用bfs做,不过这个题坑的地方在于,开三维数组你要搞清楚纬度的关系.a[i][j][h] i是层,j是行,h是列.然后坐标呢,又是列,行,层,所以如果要用 ...

  5. 优化MyEclipse编译速度慢的问题

    转载大神的 https://www.cnblogs.com/luxd/p/5999217.html

  6. c++11 右值的学习

    从4行代码看右值引用 概述 简单的左值和右值的判断就是  看是否可以取得地址   可取得地址 是左值     不能则  是右值! c++98/03中的左值引用是这样的: int i = 0; int& ...

  7. (转)Linux下select, poll和epoll IO模型的详解

    Linux下select, poll和epoll IO模型的详解 原文:http://blog.csdn.net/tianmohust/article/details/6677985 一).Epoll ...

  8. Linux 运维培训笔记

    2018/01/05 权限管理:sudoers文件 KAIFA_ADMINS           ALL=(OP1)            KAIFACMD 用户(大写)                ...

  9. 如何更改Android的默认虚拟机地址(Android virtual driver路径设置)

    1.将其他目录下的.android复制到C:\Documents and Settings\Administrator路径下(具体的用户名看自己的).然后进入.android\avd打开avd.ini ...

  10. SpringCloud 分布式配置中心

    SpringCloud 分布式配置中心 服务端 创建工程并完善结构 国际惯例,把maven工程创建完善 pom.xml <?xml version="1.0" encodin ...