babel是什么

摘抄自 https://blog.csdn.net/houdabiao/article/details/78620202

1、babel是什么？

babel官网正中间一行黄色大字写着“babel is a javascript compiler”，翻译一下就是babel是一个javascript转译器。为什么会有babel存在呢？原因是javascript在不断的发展，但是浏览器的发展速度跟不上。以es6为例，es6中为javascript增加了箭头函数、块级作用域等新的语法和Symbol、Promise等新的数据类型，但是这些语法和数据类型并不能够马上被现在的浏览器全部支持，为了能在现有的浏览器上使用js新的语法和新的数据类型，就需要使用一个转译器，将javascript中新增的特性转为现代浏览器能理解的形式。babel就是做这个方面的转化工作。

这里。

这里。

4.1、创建bebel项目

在本地磁盘上创建一个文件夹es6（名字任意），在该文件夹下打开命令行工具，初始化项目。

D:\webpack\demo\es6>npm init -y

这个命令目的就是创建一个默认的package.json文件。

5.2、本地安装babel命令行工具

安装babel的命令行工具的目的是为了在命令行使用babel。 

babel命令行工具可以全局安装也可以本地安装，官方文档推荐本地安装，原因有2点；

1. 本地安装不同的项目可以使用不同版本的babel，你也可以单独对某个项目的babel进行升级等操作

2. 每个项目单独安装的意味着对计算机环境没有依赖，便于移植

在命令行中继续执行如下命令

npm install --save-dev babel-cli

如果你已经全局安装了babel，可以使用如下的命令进行卸载

npm uninstall --global babel-cli

这样就已经在本地安装好babel了。

此时我的package.json文件如下（请忽略main字段）。

1.   {
2.   "name": "es6",
3.   "version": "1.0.0",
4.   "description": "",
5.   "main": "arrow.js", //请忽略main字段
6.   "scripts": {
7.   "test": "echo \"Error: no test specified\" && exit 1"
8.   },
9.   "keywords": [],
10.   "author": "",
11.   "license": "ISC",
12.   "devDependencies": {
13.   "babel-cli": "^6.24.1"
14.   }
15.   }

4.3、在命令行中调用babel

本地安装的babel是不能够在直接命令行中运行的，为了在命令行中运行babel，我们有两个方法，1是需要配置下package.json文件的scripts项。比如如下代码，配置了一个build命令，运行该命令(npm run build)的时候就会在命令行执行babel src -d lib

1.   {
2.   "name": "es6",
3.   "version": "1.0.0",
4.   "description": "",
5.   "main": "arrow.js",
6.   "scripts": {
7.   "bulid": "babel src -d lib"
8.   },
9.   "keywords": [],
10.   "author": "",
11.   "license": "ISC",
12.   "devDependencies": {
13.   "babel-cli": "^6.24.1"
14.   }
15.   }

第2个方法是你需要可以进入node_modules文件夹，再进入.bin文件夹，然后执行在命令行中执行babel src -d lib。

推荐使用npm run build的方法。

这里需要解释babel src -d lib这个命令的意思。这个命令目的是把src文件夹下的文件都转译，转译后的文件放到lib目录下。

关于babel的命令行使用方法请点这里

ps:此时无论你是运行npm run build 还是运行babel src -d lib命令（其实两个方法本质上都是一样的，都是运行babel src -d lib）命令行都会报错，原因是现在还没有src文件夹。可以先不用管它，稍后我们再新建src文件夹。

4.4、创建.babelrc配置文件

在cmd中键入以下命令。

D:\webpack\demo\es6>type nul>.babelrc

这个时候你的文件夹里就多了一个.babelrc文件了。windows是不能直接创建空文件名的文件的，所以必须通过命令行创建。

4.5、安装babel的转译器

这里我们以babel-preset-env为例。

在命令行中执行如下代码就会安装babel-preset-env转译器。

D:\webpack\demo\es6>npm install babel-preset-env --save-dev

注意：babel命令行工具（babel-cli）跟babel转译器是两个不同的东西，命令行工具并不具有转译代码的功能，只是为了在命令行中使用babel。要转码必须安装转译器，比如babel-preset-env转译器或者babel-preset-react转译器。要转译的时候，还要在.babelrc文件或者命令行中配置这些转译器(presets)选项

4.6、配置.babelrc文件

.babelrc用于配置除回调以外的所有babel api 选项。例如plugins和presets。plugins用于配置我们转译所需要的插件，presets用于配置我们所需要的转译器。

.babelrc不是必须的，我们在.babelrc中配置的选项都可以通过命令行添加，比如在命令行执行 babel src -d lib --presets=env 等价于在.babelrc中配置 "presets":["env"]。当然.babelrc要明显方便很多。

babel在转译代码的过程中会自动读取当前目录.babelrc配置文件，如果当前目录没有的话就遍历整个目录树去寻找，直到找到.babelrc文件或者含有"babel"字段的package.json文件，然后使用这些配置选项来转译代码。

关于.babelrc的注意点如下。

1、如果没有.babelrc文件，或者没有在其他文件中设置过babel的presets的配置选型，并且命令行中也没有配置--presets，那么代码是不会转译的。原es6代码什么样，转译后的代码还是什么样。

2、如果你的.babelrc或者你的命令行使用了你没有安装的转译器（presets），代码就会报错

3、但.babelrc中的配置跟你在命令行中使用的配置冲突的时候，以.babelrc中的配置为准

1.   {
2.   "presets":["env"]
3.   }

关于.babelrc文件的更多使用方法请点击这里

4.7、.babelrc的替代方案

如果你不想生成.babelrc文件，你可以在你的package.json文件中对babel进行配置。如果你使用gulp或者webpack之类的管理工具的话，也可以在这里工具的配置选项里添加babel的配置选项。

以下以在package.json中配置为例。

1.   {
2.   "name": "es6",
3.   "version": "1.0.0",
4.   "description": "",
5.   "main": "arrow.js",
6.   "scripts": {
7.   "build": "babel src -d lib --comments=true"
8.   },
9.   "babel":{
10.   //babel选项
11.   "presets":["es2015"],
12.   "comments":false
13.   },
14.   "keywords": [],
15.   "author": "",
16.   "license": "ISC",
17.   "devDependencies": {
18.   "babel-cli": "^6.24.1",
19.   "babel-loader": "^7.1.1",
20.   "babel-preset-env": "^1.6.0",
21.   "babel-preset-es2015": "^6.24.1",
22.   "babel-preset-react": "^6.24.1",
23.   "webpack": "^3.2.0"
24.   }
25.   }?

在package.json中配置babel等同于使用.babelrc文件

4.8、编写es6代码

因为我们使用的babel命令是babel src -d lib 所以我们需要在目录中创建一个叫src的文件夹。目录结构如下：

|-node_modules
|-src
|-.babelrc
|-package.json

在src文件夹下我们创建一个person.js文件（文件名任意），编写如下es6代码（代码任意，只有是es6代码即可，方便看出编译后的效果）。编辑好代码后保存。

1.   class Person{
2.   constructor(){
3.   this.name="bigbigStrong"
4.   }
5.   sayName(){
6.   console.log(`my name is ${this.name}`);
7.   }
8.   }
9.   var p = new Person();
10.   p.sayName();

4.9、转译es6代码

在命令行工具中执行npm run build 就可以发现目录中多了一个lib文件夹，lib文件夹下有一个person.js的文件，这个文件就是src下的person.js文件转译后的代码。

D:\webpack\demo\es6>npm run build

转译后的代码如下：

1.   "use strict";
2.   ?
3.   var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
4.   ?
5.   function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
6.   ?
7.   var Person = function () {
8.   function Person() {
9.   _classCallCheck(this, Person);
10.   ?
11.   this.name = "bigbigStrong";
12.   }
13.   ?
14.   _createClass(Person, [{
15.   key: "sayName",
16.   value: function sayName() {
17.   console.log("my name is " + this.name);
18.   }
19.   }]);
20.   ?
21.   return Person;
22.   }();
23.   ?
24.   var p = new Person();
25.   p.sayName();

这里

1.   {
2.   "presets": [
3.   ["env", {
4.   "targets": {
5.   "browsers": ["last 2 versions", "safari >= 7"]
6.   }
7.   }]
8.   ]
9.   }

5.2、babel-preset-es2015

转译器，将es2015版本的js代码转译为es5代码，对于es2016版本的代码或者es2017版本的代码不转译。

5.3、babel-preset-latest

转译器，将最新版本的js代码转译为es5代码。不推荐使用，已经废除。建议使用babel-preset-env代替

5.4、babel-preset-react

转译器，剥离流类型并将JSX转换为createElement调用，主要在转译react代码的时候使用。

5.5、兼容ie浏览器的转译器

要兼容老版本的ie浏览器，可以使用对应的es3和es5插件

• es3-member-expression-literals

• es3-property-literals

• es5-property-mutators

5.6、总结

转译器就是一堆转译插件的集合。babel转译器很多，但是我们常用的就那几个。如果要转译新版本的js的话，只需要使用babel-presets-env这一个转译器就可以了。

关于babel的更多转译器介绍，可以点击这里查看。你可以点击每一个转译器进去查看转译器的适用场景是使用方法

这里查看。我这里只介绍几个常见的。

6.1、babelrc

默认值为true，用于配置是否适用.babelrc和.babelignore文件，当命令行中添加--no-babelrc选项的时候，表示忽略.babelrc和.babelignore文件。在.babelrc文件中配置babelrc个人测试没有卵用。

6.2、env

默认值为一个空对象{}. env用于配置代码需要兼容的环境，比如你的代码要在chrome52上运行，可以这样配置.babelrc。

1.   {
2.   "presets": [
3.   ["env", {
4.   "targets": {
5.   "chrome": 52
6.   }
7.   }]
8.   ]
9.   }

配置代码兼容最新的node，可以这样设置.babelrc

1.   {
2.   "presets": [
3.   ["env", {
4.   "targets": {
5.   "node": "current"
6.   }
7.   }]
8.   ]
9.   }

6.3、ignore

忽略某些文件,默认值为null，比如src文件夹下有person.js和foo.js两个文件，转译的时候你要忽略src文件夹下的foo.js，可以这样配置.babelrc。这样就不再转译foo.js文件了

1.   {
2.   "presets":["env"],
3.   "ignore":["foo.js"]
4.   }

与ignore相对应的是only选项，only表示只转译某些文件。

6.4、minified

是否压缩转译后的代码，默认值为false

1.   {
2.   "presets":["env"],
3.   "ignore":["foo.js"],
4.   "minified":true
5.   }

6.5、plugins

配置转译所需要的插件。使用插件的顺序是按照插件在数组中的顺序依次调用的。比如如下命令，转译的时候先使用transform-decorators-legacy转译，再使用transform-class-properties转译

1.   {
2.   "plugins": [
3.   "transform-decorators-legacy",
4.   "transform-class-properties"
5.   ]
6.   }

6.6、presets

配置你要使用的转译器。使用转译器的顺序是按照转译器在数组中的反顺序进行调用的。先使用数组最末尾的转译器，然后使用倒数第2个，倒数第3个，依次类推。比如使用下面命令的时候，先使用stage-2转译器转译，再react转译器转译，最后使用es2015转译器转译。

1.   {
2.   "presets": [
3.   "es2015",
4.   "react",
5.   "stage-2"
6.   ]
7.   }

6.7、补充：plugins和presets的顺序

详情点这里

• 如果同时存在plugins和presets，则先使用plugins转译

• plugin的调用顺序是从第一个到最后一个，

• presets的调用的顺序是相反的，从最后一个到第一个

这里

7.2、babel-register

引用自阮一峰babel讲解

babel-register模块会改写require命令，为它加上一个钩子。此后每当使用require加载.js、.jsx、.es、.es6后缀名文件的时候，都会先用babel进行转码

安装

$ npm install --save-dev babel-register

使用的时候必须先加载babel-register。

1.   require("babel-register");
2.   require("./index.js");

然后，就不需要手动对index.js转码了。

需要注意的是，babel-register只会对require命令加载的文件转码，而不会对当前文件转码。另外，由于它是实时转码，所以只适合在开发环境使用。

babel-register的详细使用方法点击这里

7.3、babel-core

babel-core主要在node等环境中使用，可以用来开发自己的babel转译器。直接调用babel的api对某些代码或者某些文件进行转译。

安装

npm install babel-core --save

使用方法

1.   var babel =require(‘babel-core‘);
2.   babel.transform(code,options);//转译程序片段
3.   babel.transform(filename,options,callback); //转译文件

babel-core的详细使用方法点击这里

webpack文档

babel官方文档。