一、配置.babelrc文件(没有名字的文件)

Babel的配置文件是.babelrc,存放在项目的根目录下。使用Babel的第一步,就是配置这个文件。

基本格式如下:

{
"presets": [],
"plugins": []
}
在windows系统中,好像是不能直接建立无名文件的,你可以打开命令行
type nul>.babelrc

二:安装
# ES2015转码规则
npm install --save-dev babel-preset-es2015 # ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个
$ npm install --save-dev babel-preset-stage-
$ npm install --save-dev babel-preset-stage-
$ npm install --save-dev babel-preset-stage-
$ npm install --save-dev babel-preset-stage-3
【---这意味着你的先安装一个node--】

三:改写.babelrc配置文件

 {
"presets": [
"es2015", "stage-2"
],
"plugins": []
}

 好了到此你的babel已经安装好了。。。。。。

接下来你可以试试demo

在目录中建立一个es6.js的文件,

 import 'babel-polyfill'; 
import a from "./common";
var b= a();
 "use strict";   [, , ].map( x=>
   x * x;
  }); var obj={
add(){
return b;
}
}

在命令行中,你可以输出来看看:

$ babel es6.js

结果:

但是一般而言,我们使用babel的目的是将es6语法的js文件转换成es5文件,而不是在命令行上输出

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

babel es6.js -o es5.js
或者
babel es6.js --out-file es5.js

将整个文件夹进行转换(编译整个src文件夹并输出到lib文件夹中(使用 -d 或 --out-dir ))

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

如果每一次更改文件,就得这样编译一次,很麻烦

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

监控文件:
$ babel es6.js -w --out-file es5.js
或者
$ babel es6.js --watch --out-file es5.js 监控文件夹:
$ babel src  -w  --out-dir lib

demo:(将src_new目录中的文件转义到src_new_lib中)

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

babel src --out-file es5.js

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

demo01:

 demo02:

执行:$  babel-node es6.js

es6.js

//import 'babel-polyfill'; 
import a from "./common";
var b= a();
 "use strict";var obj={
add(){
return b;
}
} /* var newArray=Array.from( {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
});
*/
var o=obj.add;

 console.log(o());

common.js

 export default  function(){
return ;
}

另一种方式:

在package.json中进行配置,直接使用命令行。

当我们按照上面的一步步走来时,基本上已经完成了99%,那么接下来就该试试其他方式了。

1)首先你的在命令行输入

npm init //生成一个package.json文件

2)配置文件

{ 
......
  "script": { "build": "babel src -d libs" } //将src文件转义到libs文件夹
.....
}

3)直接运行

npm run build

 

浏览器环境:

Babel也可以用于浏览器环境,但是据说babel6.0之后不再直接提供浏览器版本,要用构建工具构建出来。

当然也可以安装5.x版本的babel-core模块获取。

$ npm install babel-core@old

然后在你的项目目录下的node_modules中找文件,插到你的网页

<script src="node_modules/babel-core/browser.js"></script>
<script type="text/babel">
// Your ES6 code
</script>

demo :

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
</head>
<body>
<script src="node_modules/babel-core/browser.js"></script>
<script type="text/babel">
var newArray=Array.from( {
'': 'a',
'': 'b',
'': 'c',
length:
});
console.log(newArray);
</script>
</body>
</html>

关于:babel-polyfill

Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。

举例来说,ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill,为当前环境提供一个垫片。

$ npm install --save babel-polyfill

然后,在脚本头部,加入如下一行代码。

import 'babel-polyfill';
// 或者
require('babel-polyfill'); 参考:http://www.ruanyifeng.com/blog/2016/01/babel.html 一点补充:即使使用了babel,但是浏览器还是无法对import ,require进行识别
Babel 所做的只是帮你把‘ES6 模块化语法’转化为‘CommonJS 模块化语法’,其中的require exports 等是 CommonJS 在具体实现中所提供的变量。
任何实现 CommonJS 规范的环境(如 node 环境)可以直接运行这样的代码,而浏览器环境并没有实现对 CommonJS 规范的支持,所以我们需要使用打包工具(bundler)来进行打包,说的直观一点就是把所有的模块组装起来,形成一个常规的 js 文件。
常用的打包工具包括 browserify webpack gulp 等。
 
												

初探babel转换器的安装与使用的更多相关文章

  1. 【02】webstorm配置babel转换器+截图(by魔芋)

    [02]webstorm配置babel转换器+截图(by魔芋)   [02]魔芋的安装过程     01,配置babel.   02,用webstorm.注意webstorm的版本号.   03,使用 ...

  2. ES6学习之Babel的正确安装姿势

    开始学习ES6,写点东西放上博客^_^ 本文介绍Babel6.x的安装过程~ 首先呢,可以使用Babel在线转换 https://babeljs.io/repl/ 然后进入主题:安装Babel(命令行 ...

  3. 1. 初探MongoDB —— 介绍、安装和配置

    一.写在前面 之前一直以来,都是使用关系型数据库.也很早就听闻,当数据量大的时候,关系型数据库使用起来会有很多问题.诸如查询数据慢,加载花费时间长等等. 也早就耳闻NOSQL(NoSQL = Not ...

  4. apollo1.7.1初探(一)安装apollo、创建并启动broker

    Apache Apollo是一个代理服务器,是在ActiveMQ基础上发展而来的,支持STOMP, AMQP, MQTT, Openwire, SSL, and WebSockets 等多种协议. A ...

  5. (一)初探Maven之本地安装与配置本地仓库

    引言:          大多数IDE都会自带maven,如果你打开c盘用户目录,你会看到一个.m2文件这就是编译器自带maven的仓库父目录,但由于其在C盘和其他原因,一般我们会自己重新安装mave ...

  6. Redis初探(windows/linux安装)

    最近在学习Redis,先看看简介: Redis 是完全开源免费的,遵守BSD协议(可以自由的使用,修改源代码的协议,当然需要满足一定的条件),是一个高性能的key-value数据库. 特点&& ...

  7. Prometheus 初探和配置(安装测试)

    本文大纲: • Prometheus 官⽹下载• Prometheus 开始安装• Prometheus 启动运⾏• Prometheus 基本配置⽂件讲解• 安装第⼀个exporter => ...

  8. [译]使用Babel和Browserify创建你的ES6项目

    原文地址:Setting up an ES6 Project Using Babel and Browserify JavaScript的发展日新月异,ES6很快就要接管JS了.很多著名的框架像Ang ...

  9. babel的使用及babel与gulp结合工作流

    Babel 通过语法转换器支持最新版本的 JavaScript . 它有非常多的插件,这些插件能够允许我们立刻使用新语法,无需等待浏览器支持. 那我们怎么使用babel呢? 首先我们来了解babel基 ...

随机推荐

  1. JWT(JSON Web Token) Java与.Net简单编码实现

    参考 JWT(JSON WEB TOKENS)-一种无状态的认证机制 基于Token的WEB后台认证机制 各种语言版本的基于HMAC-SHA256的base64加密 Java与.Net实现实现 // ...

  2. linux中压缩、解压缩命令详解

    tar -c: 建立压缩档案-x:解压-t:查看内容-r:向压缩归档文件末尾追加文件-u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用其中一个.下面的 ...

  3. C#学习历程(五)[高阶概念]

    >>修饰符的访问权限 private : 私有成员, 在类的内部才可以访问. protected: 保护成员,该类内部和继承类中可以访问. public: 公共成员,完全公开,没有访问限制 ...

  4. 关于python中urllib.urlencode的时候出错:UnicodeEncodeError: ‘ascii’的记录

    原文我参见了:http://hi.baidu.com/setcookie/item/ddc6b694b1f13435336eeb3c 为毛我要费事的写下了,就是为了让自己记录一下,下面的也是直接摘录过 ...

  5. Week12《java程序设计》第12次作业总结

    Week12<java程序设计>第12次作业总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 面向系统综合设计-图书馆管理系统或购物车 ...

  6. Flask_script扩展调用的方式

    Flask中flask-script扩展的使用 通过使用Flask-Script扩展,我们可以在Flask服务器启动的时候,通过命令行的方式传入参数.而不仅仅通过app.run()方法中传参 Flas ...

  7. APUE学习笔记——11 线程同步、互斥锁、自旋锁、条件变量

    线程同步     同属于一个进程的不同线程是共享内存的,因而在执行过程中需要考虑数据的一致性.     假设:进程有一变量i=0,线程A执行i++,线程B执行i++,那么最终i的取值是多少呢?似乎一定 ...

  8. APUE学习笔记——5.5~5.7数据流的打开与读写

    1.open #include <stdio.h> FILE *fopen(const char *restrict pathname,const char *restrict type) ...

  9. Ubuntu 中sendmail 的安装、配置与发送邮件的具体实现

    一.安装 ubuntu中sendmail函数可以很方便的发送邮件,ubuntu sendmail先要安装两个包. 必需安装的两个包: 代码  sudo apt-get install sendmail ...

  10. 在初次安vs2008时设置的为C#现在怎么将其改为其他类型的界面

    如将C#改成C++, 工具 -> 导入和导出设置 -> 重置所有设置 -> 否,仅重置设置,从而覆盖我的当前设置 -> 重新选一个设置 -> 完成 选择完毕后,如新建MF ...