示例:在d盘,新建文件夹es6,文件夹里新建一个文件es6.js。

(1)先全局安装babel-cli,输入命令npm install babel-cli -g

(2)输入d:( 进入d盘),再输入cd es6(进入es6文件夹)

(3)输入npm init;(引导创建一个package.json文件,包括名称、版本、作者等这些信息)

(4)输入npm install --save-dev babel-cli(安装命令行转码babel-cli工具)

(5)es6文件里新建配置文件.babelrc

在windows系统中,不允许直接右键建立没有文件名的文件,可以通过cmd命令行创建,在当前文件夹打开cmd(shift键+鼠标右键,会有弹框,选择在此处打开命令窗口),并输入命令 type null>.babelrc 创建配置文件.babelrc

       复制代码 { "presets": [], "plugins": [] }到.babelrc 里

(6)输入npm install --save-dev babel-preset-es2015(安装es2015依赖项)

  将“es2015”加入到.babelrc,如{ "presets": [“es2015”], "plugins": [] }

(7)输入babel -h检测是否安装成功;

(8)如果安装成功,就可以将es6编译成es5

例:babel es6.js -o- es5.js

Babel常见的命令:

(1)转换es6.js文件并在当前命名行程序窗口中输出

   babel es6.js

(2)将es6.js转换后输出到es5.js文件中(使用 -o 或 --out-file )

   babel es6.js -o es5.js   

babel es6.js --out-file es5.js

(3)实时监控es6.js一有变化就重新编译(使用 -w 或 --watch )

babel es6.js -w --out-file es5.js

babel es6.js --watch --out-file es5.js

(4)编译整个src文件夹并输出到lib文件夹中(使用 -d 或 --out-dir )

babel src -d lib
  babel src --out-dir lib

(5)编译整个src文件夹并输出到一个文件中

babel src --out-file es5.js

(6)直接输入babel-node命令,可以在命令行中直接运行ES6代码

babel-node

es6 babel转码器安装配置及常见命令的更多相关文章

  1. Babel 转码器 § es6转换es5

    Babel 转码器 § es6转换es5 实时转码 /  Repl  -babel-node / babel-register(自动转码引入babel-register模块) 配置文件.babelrc ...

  2. ES6入门一:ES6简介及Babel转码器

    ES6简介 Babel转码器 Nodejs中使用ES6 WebPack中使用ES6及Babel转码插件 一.ES6简介与转码  1.1一个常见的问题,ECMAScript和JavaScript到底是什 ...

  3. ES6标准简介之Babel转码器解说

    ES6是ECMAScript 6的简称,是JavaScript语言的下一代标准,现在基于jquery库的前端开发js所使用的标准是ES5(ECMAScript 5).ES6已于2015年6月正式发布. ...

  4. ES6转ES5(Babel转码器)

    ES6转ES5(Babel转码器) 前提:必须在VScode中已经安装了Node.js 官网:https://nodejs.org/en/ 一.安装命令行转码工具 npm install --glob ...

  5. (Linux环境Kafka集群安装配置及常用命令

    Linux环境Kafka集群安装配置及常用命令 Kafka 消息队列内部实现原理 Kafka架构 一.下载Kafka安装包 二.Kafka安装包的解压 三.设置环境变量 四.配置kafka文件 4.1 ...

  6. 使用babel转码器,让浏览器支持es6语法

    ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,可是很多浏览器并不支持es6语法,所以我们需要一个转码工具, 把es6的语法转换成浏览器支持的javascr ...

  7. 在项目中ES6语法转ES5语法 babel转码器

    es6 babel 安装以及使用   1,安装好node(需要使用npm包管理工具) 2,在本地项目路径下npm init,格式化成功后会在项目下生成一个配置文件package.json 3,本地安装 ...

  8. babel的使用以及安装配置

    简介 babel是一个广泛使用的转码器,可以将ES6代码转化为ES5代码,从而在现有环境执行,这意味着,你可以现在就用ES6编写程序,而不用担心现有环境是否支持. 安装及配置 npm install  ...

  9. Babel转码器

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

随机推荐

  1. Elasticsearch 5.6.4 window 安装并简单使用head

    1.现在elasticsearch安装包 https://www.elastic.co/downloads/elasticsearch 2.解压elasticsearch-5.6.4.zip 到需要安 ...

  2. php表单字段

    在上一章节我们已经介绍了表的验证规则,我们可以看到"Name", "E-mail", 和 "Gender" 字段是必须的,各字段不能为空. ...

  3. light oj 1037 状压dp

    #include <iostream> #include <cstdlib> #include <cstring> #include <queue> # ...

  4. Activiti实战04_简单流程

    在Activiti实战03_Hello World中我们介绍了一个中间没有任何任务的流程,实现了流程的部署与查阅,而在本章中,将会为流程添加任务节点,是流程能够像个流程,变得更加丰满起来. 在上一节的 ...

  5. 【DM8168学习笔记1】帮您快速入门 TI 的 Codec Engine

    http://www.ti.com.cn/general/cn/docs/gencontent.tsp?contentId=61575 德州仪器半导体技术(上海)有限公司 通用DSP 技术应用工程师 ...

  6. spring MVC4 配置详解(个人记录)

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  7. jquery判断元素是否出现在可视区

      在我们的日常开发中,经常会遇到当元素出现在可视区的时候需要去出发某一事件的情况.我最近在优化环球网首页的时候,将非可视区的代码全部放入到webComponent中.打算当这个元素出现在可视区的时候 ...

  8. bzoj 3029 守卫者的挑战——概率期望dp+状态数思考

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3029 先随便写了个dfs,记录“前 i 次.成功 j 次.容量-残片=k”的概率.因为是否可 ...

  9. canvas绘制video

    html <video style="position: relative; object-fit: fill;" preload="auto" id=& ...

  10. PHP实现微信申请退款流程实例源码

    https://www.jb51.net/article/136476.htm 目录 前期准备: 前面讲了怎么实现微信支付,详见博文:PHP实现微信支付(jsapi支付)流程  和ThinkPHP中实 ...