【工具向】我所知道的babel总结

Leo_chen 发布于2019-08-22 16:32 / 1949人阅读

摘要：这两天研究了一下这个工具，因为平时项目基本都是脚手架生成的配置文件，真正自己想写点东西的时候，亲自去配却是一脸懵逼，写下这篇博客记录一下我的认知范围内的总结。

这两天研究了一下babel这个工具，因为平时项目基本都是脚手架生成的babel配置文件，真正自己想写点东西的时候，亲自去配却是一脸懵逼，写下这篇博客记录一下我的认知范围内的babel总结。
首先，先看几个平时常见的babel配置

图一：vue的webpack-template生成的babel配置
图二：react的create-react-app脚手架eject模式生成的babel配置
图三：一个常见的普通配置，有presets和plugins
这三张图看完文章应该都可以理解了

babel-core

首先什么是babel？
官网的介绍是：Use next generation JavaScript, today.
简单的说，就是让你可以在此时此刻此地使用下一代JavaScript语法和API，babel可以帮助你转换成浏览器可以运行的稳定的版本，因为各大浏览器对es6+的支持并不都很好。
且从babel6以及更高版本，babel自身不负责转换工作，具体的转换工作由插件来实现，babel只提供babel-core来把JavaScript代码分析为AST（抽象语法树），供插件做转换。

如何使用babel

通用的方式是在项目中写 .babelrc文件，或者在package.json中配置"babel"选项（图二react脚手架就是这么做的）

plugins、presets、transform-runtime、stage-X、env和babel-polyfill

先 npm install babel-core --save-d
写一个这样的例子

let a = "a";
let assign = Object.assign({name: "jack"}, {name: "bob"});
let f = () => {
  console.log("arrow func");
}
let i = [].includes;
let p = new Promise();
var q = async function q() {
  console.log("async");
};

这是一段典型的es6语法的代码，为了将它转换为es5代码，我们需要使用插件来转换。

可以看到这有许多的插件供选择，只需要挑选合适的插件即可，
.babelrc文件配置如下：

{
  "plugins": [
    "some plugin",
    "some plugin",
    ...
  ]
}

但是如果需要很多很多插件的话，一个一个写是很费力的
所以，presets可以拯救我们，presets可以理解为plugin的集合
继续配置.babelrc文件：

{
  "presets": [
    "es2015",
  ],
  "plugins": [
  ]
}

编译完的结果为

可以看到只转换了let、箭头函数这样的语法，assign、includes、Promise、async被原样输出
这个时候就需要transform-runtime了

{
  "presets": [
    "es2015"
  ],
  "plugins": [
    "transform-runtime"
  ]
}

编译完的结果为：

可以看到let、箭头函数、Object.assign、Promise都被正确编译，但是async、includes依然没有变化
此时可以引入stage-X的概念了，Stage-x preset 中的任何转换都是对未被批准为 JavaScript 版本一部分的语言的变化，大白话就是还未被发布的版本中的语法，比如现在JavaScript的最新规范版本的es6，所以es7的一些语法我们就需要引入stage-X来使用，比如async这样的语法。
不成熟的想法(stage-0:Strawman)——>通过之后变成提议(stage-1:Proposal)——>通过进入草案(stage-2: Draft）——>通过进入候选(stage-3: Candidate)——>进入标准(stage-4:finished)可以看到这里面有个层层筛选的过程，所以stage-0包含的功能最多，要是不知道哪个阶段的功能，直接stage-0
至于stage-0、stage-1、stage-2、stage-3分别具体的使用，看文档babel-stage
继续配置.babelrc

{
  "presets": [
    "es2015"
    "stage-0"
  ],
  "plugins": [
    "transform-runtime"
  ]
}

编译结果：

图虽然没截全，但是可以看到async方法被转换过来了，然而includes方法依然没有转换。
此时就要使用babel-polyfill了，babel-polyfill会仿效一个完整的 ES2015+ 环境，这意味着你可以使用新的内置对象比如 Promise 或者 WeakMap, 静态方法比如 Array.from 或者Object.assign, 实例方法比如 Array.prototype.includes 和生成器函数。简言之，babel-polyfill就像lodash这种库一样，引入之后可以随心所欲的使用es6+的方法。
使用方法：

import "babel-polyfill"

或

module.exports = {
    entry: ["babel-polyfill", "./index.js"]
};

最后，env是什么意思呢？它是environment的缩写，根据你支持的环境自动决定适合你的 Babel 插件的 Babel presets，其实就是根据你的环境来自动决定插件集合。

总结

plugin：真正做转换工作的，写在plugins数组中，实现一些语法的转换
presets：一组插件
stage-X：转换一些还未正式发布的语法，例如async
presets-env：根据你支持的环境自动决定适合你的 Babel 插件的 Babel presets
transform-runtime：转换一些对象以及方法，例如Promise、Set，并且它动态提供你所使用的插件，且不会强行的修改全局对象的prototype，但是runtime不会转换实例方法，只会转换静态方法。最后，写工具库的时候考虑使用transform-runtime，不会冲突
babel-polyfill：这是一个库，安装的时候我们需要让它成为一个 dependency, 而不是一个 devDependency，且它直接在全局对象上扩展，可以很自由的使用es6+，可以转换实例方法和静态方法，使用它可以取代transform-runtime和presets。但是它的问题是体积较大回带来许多我们并用不到的东西以及可能会带来冲突，需要兼容平台和环境较多时考虑使用

参考：
https://juejin.im/entry/5a290...
https://github.com/youngwind/...
https://segmentfault.com/a/11...

GPU云服务器云服务器我所知道你不知道的我所你不知道的javascript

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94434.html

【译】使用TypeScript两年后-值得吗？

摘要：弄了一个持续更新的笔记，可以去看看，链接地址此篇文章的地址使用两年后值得吗基础笔记的地址可以也可以。使用，你可以使用抽象类等功能。有关抽象类的更多信息支持，和方法，只读属性。弄了一个持续更新的github笔记，可以去看看，链接地址：Front-End-Basics 此篇文章的地址：使用TypeScript两年后-值得吗？基础笔记的github地址：https://githu...

RyanQ 2019-08-23 16:56 评论0 收藏0
Vue 2.x 实战之后台管理系统开发（一）

摘要：导语下文实战之后台管理系统开发二该文章将从头到尾梳理我是如何使用开发一个后台管理项目的，我会将自己遇到的问题贴出，希望可以帮助到其他人。构建项目框架准备对于大陆用户，建议将的注册表源设置为国内的镜像，如淘宝镜像，可以大幅提升安装速度。 1. 导语下文：Vue 2.x 实战之后台管理系统开发（二）该文章将从头到尾梳理我是如何使用 Vue 2 开发一个后台管理项目的，我会将自己遇到的问...

darkbaby123 2019-08-20 16:49 评论0 收藏0
我所理解的简单的项目结构

摘要：将图片都放入文件夹下指定公共的名字。匹配删除的文件根目录开启在控制台输出信息启用删除文件插入开关说一些可能没用的站在前端角度不懂的很多很多时候一个项目都是由一个小组完成的，小组成员可能包括产品，前端，后端，测试，运营等等。不急，先听我唠会嗑~ 随着js发展的如此迅速，市场上越来越多的前端框架可以方便开发者使用。本人大四渣渣一名，先后实习了两个地方，第一家公司用vuejs，实话...

_DangJin 2019-08-22 16:17 评论0 收藏0
查漏补缺 - 收藏集 - 掘金

摘要：酝酿许久之后，笔者准备接下来撰写前端面试题系列文章，内容涵盖浏览器框架分钟搞定常用基础知识前端掘金基础智商划重点在实际开发中，已经非常普及了。这道题--致敬各位10年阿里的前端开发 - 掘金很巧合，我在认识了两位同是10年工作经验的阿里前端开发小伙伴，不但要向前辈学习，我有时候还会选择另一种方法逗逗他们，拿了网上一道经典面试题，可能我连去阿里面试的机会都没有，但是我感受到了一次面试1...

YuboonaZhang 2019-08-29 12:56 评论0 收藏0
利用vscode调试nodejs代码实践总结

摘要：支持，和三种环境，并且可以安装扩展插件，因而可以满足绝大多数人的要求，安装配置非本文所要讲述的内容，请自行查找，本文着重讨论如何用更好的调试代码，希望能对大家有所帮助。 2018.5.12更新最近在用vscode 1.23版本的时候发现outDir不可以使用了，建议这么改吧，直接program采用编译后的文件，然后打开sourceMaps，同时在babel编译的时候自己搞--watc...

chenatu 2019-08-21 17:42 评论0 收藏0