一、配置.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. 
						
  2. ES6学习之Babel的正确安装姿势
		
    开始学习ES6,写点东西放上博客^_^ 本文介绍Babel6.x的安装过程~ 首先呢,可以使用Babel在线转换 https://babeljs.io/repl/ 然后进入主题:安装Babel(命令行 ...
    
		
    3. 
						
  3. 1. 初探MongoDB —— 介绍、安装和配置
		
    一.写在前面 之前一直以来,都是使用关系型数据库.也很早就听闻,当数据量大的时候,关系型数据库使用起来会有很多问题.诸如查询数据慢,加载花费时间长等等. 也早就耳闻NOSQL(NoSQL = Not  ...
    
		
    4. 
						
  4. apollo1.7.1初探（一）安装apollo、创建并启动broker
		
    Apache Apollo是一个代理服务器,是在ActiveMQ基础上发展而来的,支持STOMP, AMQP, MQTT, Openwire, SSL, and WebSockets 等多种协议. A ...
    
		
    5. 
						
  5. (一)初探Maven之本地安装与配置本地仓库
		
    引言:          大多数IDE都会自带maven,如果你打开c盘用户目录,你会看到一个.m2文件这就是编译器自带maven的仓库父目录,但由于其在C盘和其他原因,一般我们会自己重新安装mave ...
    
		
    6. 
						
  6. Redis初探（windows/linux安装）
		
    最近在学习Redis,先看看简介: Redis 是完全开源免费的,遵守BSD协议(可以自由的使用,修改源代码的协议,当然需要满足一定的条件),是一个高性能的key-value数据库. 特点&& ...
    
		
    7. 
						
  7. Prometheus 初探和配置（安装测试）
		
    本文大纲: • Prometheus 官⽹下载• Prometheus 开始安装• Prometheus 启动运⾏• Prometheus 基本配置⽂件讲解• 安装第⼀个exporter =>  ...
    
		
    8. 
						
  8. [译]使用Babel和Browserify创建你的ES6项目
		
    原文地址:Setting up an ES6 Project Using Babel and Browserify JavaScript的发展日新月异,ES6很快就要接管JS了.很多著名的框架像Ang ...
    
		
    9. 
						
  9. babel的使用及babel与gulp结合工作流
		
    Babel 通过语法转换器支持最新版本的 JavaScript . 它有非常多的插件,这些插件能够允许我们立刻使用新语法,无需等待浏览器支持. 那我们怎么使用babel呢? 首先我们来了解babel基 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. python sort与sorted使用笔记
			
    Python list内置sort()方法用来排序,也可以用python内置的全局sorted()方法来对可迭代的序列排序生成新的序列 一,最简单的排序 1.使用sort排序 my_list = [3 ...
    
			
    2. 
						
  2. 这可能是最详细的 iOS 学习入门指南（含书目/文档/学习资料）
			
    1 零基础小白如何进行 iOS 系统学习 首先,学习目标要明确: 其次,有了目标,要培养兴趣,经常给自己一些正面的反馈,比如对自己的进步进行鼓励,在前期小步快走: 再次,学技术最重要的一点就是多动手. ...
    
			
    3. 
						
  3. 发送垃圾邮件的僵尸网络——药物（多）、赌博、股票债券等广告+钓鱼邮件、恶意下载链接、勒索软件+推广加密货币、垃圾股票、色情网站（带宏的office文件、pdf等附件）
			
    卡巴斯基实验室<2017年Q2垃圾邮件与网络钓鱼分析报告> 米雪儿 2017-09-07 from:http://www.freebuf.com/articles/network/1465 ...
    
			
    4. 
						
  4. JavaScript中的call、apply、bind是怎么回事？
			
    在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢.在说区别之前还是先总结一下三者的相似之处:1.都是用来改变函数的this对象的指向的.2.第一个参数都是this要指向的对 ...
    
			
    5. 
						
  5. ssh自动分发密匙脚本样板
			
    #!/bin/bash rom=/media/cdrom dir=/etc/yum.repos.d Use=$ mima=$ function yumj(){ [ -d "$rom" ...
    
			
    6. 
						
  6. UML_01_画图工具
			
    一.推荐工具 1.processon 在线画图,类型丰富 www.processon.com 2.StarUML staruml.io 破解方法 StarUML 3.0.2 (Crack + Keyg ...
    
			
    7. 
						
  7. SpringXML方式配置bean的懒加载lazy-init
			
    lazy-init(懒加载),表示该bean在容器初始化的时候不进行初始化. 例如: <bean name="role1" class="com.fz.entity ...
    
			
    8. 
						
  8. CentOS7 修改默认时区为 北京时间
			
    首先同步时间 yum install -y ntpdate ntpdate -u cn.pool.ntp.org 然后设置中国时区(北京时间) timedatectl set-timezone Asi ...
    
			
    9. 
						
  9. Mac工具整理
			
    记录一下这两年来使用Mac的一些很好的工具: 1.offic,mac的office还是很强大的,比openoffice要好很多,更比WPS要好. 2.Toad连接数据库用的,一般用来连接Oracle. ...
    
			
    10. 
						
  10. Xcode Server （Xcode9）搭建CI
			
    Xcode 9将Xcode Server集成进来了,这是Xcode一个新特性,不用去单独下载server了,server可以用来做CI.自动化Test等等.这里主要介绍搭建CI,相当简单 打开开关,新 ...
    
			
    11.