babel 7 的使用的个人理解

原文: https://www.jianshu.com/p/cbd48919a0cc

babel 7 的使用的个人理解

最近看了很多关于babel的使用方法，大部分在一些点上都没有说明白，同时给出的代码也很难再现，为了能够理解和防止以后自己遗忘，特写此文。
首先我们要明白babel存在的意义，babel的目的就是为了解决浏览器的自身对于es语言的差异性而带来的一款工具，有了babel就首先不用担心浏览器不支持es语言这件事（当然现在的浏览器尤其是chrome对es6的支持越来越好），其实最重要的不是支持，而是解决差异性，这种差异性不仅介于浏览器之间，对于node这样的环境也会存在这样的问题，各个node版本对于es的支持，或者对于es的一些尚未提交的草案的支持都是不同的，所以不论是浏览器下还是node下都需要到使用babel的场景。

我这里就以node下的使用为例，来介绍babel的具体使用
首先在node项目里创建的index.js文件：

console.log([1,2,3].findIndex(x => x == 4))

console.log('abc'.padStart(10)) 

const alertMe = (msg) => {
    console.log(msg)
}
class Robot {
    constructor (msg) {
        this.message = msg
    }
    say () {
        alertMe(this.message)
    }
}
const marvin = new Robot('hello babel')
marvin.say()

这段代码很简单，没有特别含义，主要是测试babel对es6下的转义能力
在具体使用babel之前，必须介绍一下babel的各个组成部分，注意这里我们使用babel7

  • @babel/cli
  • @babel/core
  • @babel/preset-env
  • @babel/polyfill
  • @babel/runtime
  • @babel/plugin-transform-runtime
  • @babel/plugin-transform-xxx
    以上这些就是我们以后常常会使用的babel的各个重要部分了
    这里要注意一下这个@这个符号，这个是只有babel7才特有的，babel6都木有，市面上大量代码都是基于6的所以要特别注意，安装的时候要使用 npm install i -S @babel\cli 而不能是npm install i -S babel-cli了
    这是 babel 7 的一大调整，原来的 babel-xx 包统一迁移到babel域 下 - 域由 @ 符号来标识
    搞懂了这个之后，我们来一个一个看他们的使用：

@babel/cli

@babel/cli是babel提供的内建的命令行工具，主要是提供babel这个命令来对js文件进行编译，这里要注意它与另一个命令行工具@babel/node的区别，首先要知道他们二者都是命令行工具，但是官方文档明确对他们定义了他们各自的使用范围：
@babel/cli 是一个适合安装在本地项目里，而不是全局安装

While you can install Babel CLI globally on your machine, it's much better to install it locally project by project.

@babel/node 跟node cli类似，不适用在产品中，意味着适合全局安装

babel-node is a CLI that works exactly the same as the Node.js CLI
You should not be using babel-node in production

除了这个不同以外，他们还有一个共同点就是，直接使用它们编译，上来就会报个错（找不到@babel/core），原因是@babel/cli是依赖一个叫@babel/core的包文件的，没有这个包文件是绝对不能执行任何编译操作的（因为执行编译的transform方法在这个包里），好吧，那我们就赶紧npm install --save @babel/core，接着再来执行babel编译，结果！结果是编译了之后都不会产生任何的编译效果，例如下面这个箭头函数所在的文件：test.js

let fun = () => console.log('hello babel')

我们在安装了@babel/cli或者@babel/node之后
使用@babel/cli编译
$ babel test.js
使用@babel/node编译
$ babel-node test.js
两个的编译结果都是该文件无任何变化
这个问题的发生来自 babel 6 。Babel 6 做了大量模块化的工作，将原来集成一体的各种编译功能分离出去，独立成插件。这意味着，默认情况下，当下版本的 babel 不会编译代码。

这里就扯淡了。。。你不能将箭头函数编译成es5，那搞个毛呀。。。

好吧，既然安装了@babel/core,安装了@babelb/cli这两个还是不行，那就说明它还需要别人配合，这也就是所谓的光有刀（@babel/core，@babelb/cli）不行，还得有料（@babel/plugin-transform-xxx）才行，一堆配合前两者，真正发挥作用的插件（@babel/plugin-transform-xxx）就登场了。
例如我们要将上面的箭头函数编译，我们需要这个插件
@babel/plugin-transform-arrow-functions
npm install --save-dev @babel/plugin-transform-arrow-functions
在安装这个插件之后，再次使用babel命令行工具@babel/cli
babel test.js --plugins @babel/plugin-transform-arrow-functions
结果是箭头函数成功的被成功编译成了：

let fun = function () {
     return console.log('hello babel');
};

这说明要使用各种真正的编译功能是需要配合各种插件的，要将箭头函数编译成普通函数需要使用@babel/plugin-transform-arrow-functions，要将const或者let变量编译成var变量需要@babel/plugin-transform-block-scoping，要将class关键字转化成传统基于原型的类需要@babel/plugin-transform-classes，所以为了真正的编译我们是可能需要大量各种的插件的，具体插件有哪些请点这里

使用插件是可以编译了，但是大量的使用插件会产生两个问题：
  • 第一个问题是在使用babel 调用插件采用的是命令行参数的形式
    如上面的：--plugins @babel/plugin-transform-arrow-functions
    这种写法在单个插件的情况下还好，多个插件的使用就是噩梦了，所以为了解决第一种问题，出现了一个叫.babelrc的配置文件，我们可以将多个插件的信息写入到配置文件中，因为@babel/cli在调用之时都会去调用.babelrc文件，这样就不用写老长的命令行参数了。
    例如我们同样是编译这段代码：let fun = () => console.log('hello babel')
    我们在.babelrc文件中写上
{
  "plugins": [
    "@babel/plugin-transform-arrow-functions"
    "@babel/plugin-transform-block-scoping" 
  ]
}

这样我们就可以将代码编译成下面的样子：

var fun = function () {
  return console.log('hello babel');
};

这样第一个问题就解决了，好了第二个问题是什么了？

  • 第二个问题是同样是关于多个插件的使用的，如果我的代码中大量使用插件，那我依然避免不了在配置文件中大量填写插件信息的工作，但是伟大的babel为了让程序员们有更多的时间做自己喜爱的事情，而不是浪费生命在一个一个的挑选插件，然后把它们写在.babelrc上，它提供了一个叫做preset的概念，说好听点叫预设，直白点就是插件包的意思，意味着babel会预先替我们做好了一系列的插件包，例如下面这些babel认为程序员会用到的常用的插件包：

  • @babel/preset-env

  • @babel/preset-flow

  • @babel/preset-react

  • @babel/preset-typescript

注意呀，除了这些插件包外，还有很多别的哦，这些只是常用的而已

我们这里主要介绍这个叫@babel/preset-env的插件包
我们还是通过示例来研究研究：
代码是什么了，是我们在文章之初就创建的那个index.js文件，里面可有大量es6的语法代码，那么我们在安装了@babel/preset-env，并且在.babelrc中配置了@babel/preset-env之后

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "4"
        }
      }
    ]
  ]
}

这时候运行babel index.js之后，我们就可以带到index.js被编译之后的结果：

"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

console.log([1, 2, 3].findIndex(function (x) {
  return x == 4;
}));
console.log('abc'.padStart(10));

var alertMe = function alertMe(msg) {
  console.log(msg);
};

var Robot =
/*#__PURE__*/
function () {
  function Robot(msg) {
    _classCallCheck(this, Robot);

    this.message = msg;
  }

  _createClass(Robot, [{
    key: "say",
    value: function say() {
      alertMe(this.message);
    }
  }]);

  return Robot;
}();

var marvin = new Robot('hello babel');
marvin.say();

妈呀，吓死哥哥了，居然产生了这么多鬼东西，我不要看这些，我要看es6

这说明在node下我们成功将es6的代码转化成了编译后的js代码。
这时候我们再回过头来看@babel/preset-env这个插件包

Without any configuration options, babel-preset-env behaves exactly the same as babel-preset-latest (or babel-preset-es2015, babel-preset-es2016, and babel-preset-es2017 together).

默认情况下，babel-preset-env 等效于三个插件包，而不巧我们前面提到的单个的插件已经囊括在 babel-preset-es2015 中。
当然现在编译结果已经出来了，但是马上就有眼尖的同学发现新的问题，

  • 第一个问题是这个：
{
 "targets": {
      "node": "4"
  }
}

这个是什么鬼？这个targets实际上是针对上面的@babel/preset-env这个插件包的一个配置参数，它所代表的是你编译代码所针对的目标平台，我们这里的目标是版本号为4的node(友情提示：node -v 命令可以检查node的版本)，也就是我编译之后的代码能够在node版本号为4的环境下运行，同样大家可以做个试验，如果将node这个4改为6，再次编译，你会发现编译之后的代码和编译之前的代码没有任何变化，这表明原始的代码实际上已经可以直接在版本为6的node上直接运行，不需要babel的编译了。
当然这里的targets参数配置除了可以设置node环境外，还可以设置针对各个浏览器环境的配置，例如：

{
  "targets": {
    "chrome": "58",
    "ie": "11"
  }
}

当然针对浏览器差异的设置比node更多更灵活和复杂，感兴趣的同学可以点这里看所有的配置参数信息。
好了，第一个问题解决了，我们可以引出第二个问题。

  • 第二个问题眼尖的同学可以在代码编译之后的结果中找到，那就是代码中的
    findIndex方法和padStart方法，这两个方法作为es6提出的新方法，居然没有被babel编译解析，这样如果我直接使用node命令执行编译后的index.js文件，那么必然是会报错的，因为我版本为4的node环境哪里认识什么findIndex和padStart，那这样就很尴尬了，所以光是使用@babel/preset-env是不够的，我们还需要一个叫@babel/polyfill的包来解决。

引用别人的一段理解：解释的很好
babel 编译过程处理第一种情况 - 统一语法的形态，通常是高版本语法编译成低版本的，比如 ES6 语法编译成 ES5 或 ES3。而 babel-polyfill 处理第二种情况 - 让目标浏览器支持所有特性，不管它是全局的，还是原型的，或是其它。这样，通过 babel-polyfill，不同浏览器在特性支持上就站到同一起跑线。

我对polyfill的理解：polyfill我们又称垫片，见名知意，所谓垫片也就是垫平不同浏览器或者不同环境下的差异，因为有的环境支持这个函数，有的环境不支持这种函数，解决的是有与没有的问题，这个是靠单纯的@babel/preset-env不能解决的，因为@babel/preset-env解决的是将高版本写法转化成低版本写法的问题，因为不同环境下低版本的写法有可能不同而已。

所以我们要使用node命令正常运行编译后的index.js，那么要在编译后的代码里加上require('@babel/polyfill')这句

"use strict";
require('@babel/polyfill')
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

console.log([1, 2, 3].findIndex(function (x) {
  return x == 4;
}));
console.log('abc'.padStart(10)); 

var alertMe = function alertMe(msg) {
  console.log(msg);
};

var Robot =
/*#__PURE__*/
function () {
  function Robot(msg) {
    _classCallCheck(this, Robot);

    this.message = msg;
  }

  _createClass(Robot, [{
    key: "say",
    value: function say() {
      alertMe(this.message);
    }
  }]);

  return Robot;
}();

var marvin = new Robot('hello babel');
marvin.say();

再次执行node命令，就可以看到结果了

image

再介绍完以上的babel包之后我们还剩最后两个包给大家介绍一下，分别是：

  • @babel/runtime
  • @babel/plugin-transform-runtime
    @babel/runtime的作用是提供统一的模块化的helper，那什么是helper，我们举个例子：
    我们编译之后的index.js代码里面有不少新增加的函数，如_classCallCheck，_defineProperties，_createClass，这种函数就是helper。那这种helper跟我们的@babel/runtime有什么关系了，我们接着看，比如像这个_createClass就是我们将es6的class关键字转化成传统js时生成的一个函数，那么如果我有很多个js文件中都定义了class类，那么在编译转化时就会产生大量相同的_createClass方法，那这些_createClass这样的helper方法是不是冗余太多，因为它们基本都是一样的，所以我们能不能采用一个统一的方式提供这种helper，也就是利用es或者node的模块化的方式提供helper，将这些helper做成一个模块来引入到代码中，岂不是可以减少这些helper函数的重复书写。
    那我们现在就
    npm install --save @babel/runtime @babel/plugin-transform-runtime
    然后就只需要在.babelrc中写上：
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "4"
        }
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

这次再次使用babel命令编译index.js就可以得到以下结果：

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

console.log([1, 2, 3].findIndex(function (x) {
  return x == 4;
}));
console.log('abc'.padStart(10)); 

var alertMe = function alertMe(msg) {
  console.log(msg);
};

var Robot =
/*#__PURE__*/
function () {
  function Robot(msg) {
    (0, _classCallCheck2.default)(this, Robot);
    this.message = msg;
  }

  (0, _createClass2.default)(Robot, [{
    key: "say",
    value: function say() {
      alertMe(this.message);
    }
  }]);
  return Robot;
}();

var marvin = new Robot('hello babel');
marvin.say();

注意：我们这里要在编译结果后人为添加require('@babel/polyfill')之后才可以用node命令去正常执行index.js

重点在：

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

这一类helper已经是被从@babel/runtime包require进来了，这都是@babel/runtime的功劳，但是事情还没完，我们还有个包@babel/plugin-transform-runtime没提到就用了，这个包的作用其实就是辅助@babel/runtime的，因为有了@babel/plugin-transform-runtime它会帮我自动动态require @babel/runtime中的内容，如果没有这个@babel/plugin-transform-runtime，那么我们要使用@babel/runtime中的内容，就只有像require('@babel/polyfill')那样人工去手动添加了，所以@babel/plugin-transform-runtime非常方便，由于@babel/plugin-transform-runtime是一个插件，所以它是需要配置到.babelrc中的，这一点要记住。

好了自此关于babel的知识就暂时告一段落，关于babel的内容肯定还有很多很多，但常用的这些相信也够理解它的主要意义和基本使用了。

最后放上本人在gitee上的代码例子：点这里哦
友情提示：使用npm run build来编译哦，使用node命令执行lib/index.js就ok了

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,362评论 5赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,330评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,247评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,560评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,580评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,569评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,929评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,587评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,840评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,366评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,945评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2赞 342