1,安装好node(需要使用npm包管理工具)

2,在本地项目路径下npm init,格式化成功后会在项目下生成一个配置文件package.json

3,本地安装bable npm install --save-dev babel-cli (如需卸载之前的babel使用命令  npm uninstall --global babel-cli),

  安装成功后,devDependencies(依赖)会出现一个"babel-cli": "^6.26.0"(命令行工具,这一步还只能使用命令行工具,并不能进行转译),

4,安装转译依赖 npm install  --save-dev babel-preset-env(

  安装成功后,devDependencies(依赖)会出现一个"babel-preset-env": "^1.7.0"

5,在package.json中配置babel ,转译规则需要安装依赖 
  (npm install --save-dev babel-preset-es2015)

{
"name": "es6-babel",
"version": "1.0.0",
"description": "",
"main": "index.js",
"directories": {
"lib": "lib"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel src -d lib"
},
//添加babel配置
"babel":{
//presets 定义转译规则
"presets":["es2015"]
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1"
}
}

6,在命令行中调用babel,在package.json 中添加

 "scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel src -d lib" //把src 下面的所有文件 转译放到lib 文件下面
},

7,编译es6代码,新建连个文件夹src 和 lib ,因为我们上面命令用的是 babel src -d lib,然后运行编译命令npm run build   就可以看到src 下面的文件被全部编译对应的放在lib文件夹下面,需要使用直接引入lib文件夹下面对应的文件

es6 babel 安装以及使用的更多相关文章

  1. babel安装

    大家都知道目前ES6不是浏览器全部都是支持的,所以要通过转码器先进行转码然后再编译代码.小心在学习ES6之前先安装了babel转码器,虽然当时安装的时候困难重重,遗憾的是没有把解决方案总结一下,别人询 ...

  2. es6 babel转码器安装配置及常见命令

    示例:在d盘,新建文件夹es6,文件夹里新建一个文件es6.js. (1)先全局安装babel-cli,输入命令npm install babel-cli -g (2)输入d:( 进入d盘),再输入c ...

  3. Babel安装在本地并用webstrom由ES6转Es5

    1进入到根目录 2安装babel npm install babel-cli --save-dev 3安装其他库 npm install --save-dev  babel-preset-env 4创 ...

  4. 在webstrorm中配置好es6 babel

    第一步,新建一个项目,我这里建立了基于express 的node项目 第二步:将JavaScript语言版本切换为ECMAScript6 点击File —>settings,弹出设置框.把js的 ...

  5. Babel 安装教程

    Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行. 这意味着,你可以现在就用 ES6 编写程序,而不用担心现有环境是否支持.下面是一个例子. // 转码前 inpu ...

  6. es6 babel编译

    本文主要参照阮一峰的es6入门,为提高自己写了一份随笔. 原文地址请戳这里  ECMAScript 6 入门 ECMAScript 6是JavaScript语言的下一代标准.因为当前版本的ES6是在2 ...

  7. ES6 Babel 简单使用

    ECMAScript 是 JS 的语言标准.而 ES6 是新的 JS 语法标准. PS:严格来说,ECMAScript 还包括其他很多语言的语言标准. ECMAScript 发展历史 1995年:EC ...

  8. ES6 - Babel编译环境搭建

    都看到这里了,我就不写什么node环境安装之类的了. 直接从新建项目文件夹后开始吧! 安装依赖: 命令行cd到项目文件夹之后,执行以下命令:(mac记得前边加sudo) npm init –y  // ...

  9. es6 ---- babel

    babel-polyfill是ES6的补丁,由于babel只支持ES6语法部分的编译,对于新增的类我们还需要安装额外的polyfill,虽然现在Chrome和Firefox都已经添加了Promise等 ...

随机推荐

  1. Git连接GitHub仓库详解

    [Annotation]本文将从标题八开始,因为前七个标题是关于Git的基本操作,如果对Git的基本操作不了解的话,可以点击下方链接先看一下Git怎么使用. 关于Git的详细使用 八:创建SSH Ke ...

  2. Geotools求shapefile路网中任意两点之间最短路径的距离

    前言:之前在博问求助过这个问题.经过几天的思考,算是解决了(但仍有不足),另一方面对Geotools不是很熟,有些描述可能不正确,希望大家批评指正. 问题:作为一个新手,我并没有发现Geotools中 ...

  3. spring+struts2引起的错误被记忆问题

    标题表述的比较模糊,详细情况是这样的: 目前开发的一个管理系统,当使用出现异常时会自动跳转到错误页.其处理流程是“发生异常——跳转到错误处理action——错误页”. 但是出现了一个bug,即某个操作 ...

  4. PHP---无限极分类数组处理

    $array = array(    0=>array('id'=>1,'uid'=>0,'menuname'=>'菜单1','url'=>0,'addtime'=> ...

  5. hdu 3549 Flow Problem (Dinic)

    Flow ProblemTime Limit: 5000/5000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Total ...

  6. Linux入门之简介

    1.啥是linux? Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和Unix的多用户.多任务.支持多线程和多CPU的操作系统. 它能运行主要的Unix工具软件.应用程序 ...

  7. ZeroC ICE的远程调用框架 代理引用地址

    在官方文档中称为Binding,协议-地址对的绑定.在Proxy模式中,一般地有三个参与者,Proxy,Subject以及RealSubject.Subject定义了Proxy(代理)和RealSub ...

  8. zip的压缩和解压命令

    以下命令均在/home目录下操作cd /home #进入/home目录 1.把/home目录下面的data目录压缩为data.zip zip -r data.zip data #压缩data目录   ...

  9. 关于虚拟机克隆之后IP重新设置

    由于要搭建一套环境,本来搭建好的后来搞崩了,因为之前的虚拟机没有克隆过以及创建快照,所以今天就重新创建一套环境创建虚拟机快照,以及要解决克隆之后的IP重新设置问题. 1.查看本机orcl IP:[ro ...

  10. 配置k8s集群context-rbac实践

    说明 在openshift环境中,可以通过oc project {project_name}命令来切换project,那么在k8s中式如何切换namespace的呢?(ocp的project即相当于k ...