Babel
文章平均质量分 71
大前小白
哪有什么天才!
坚持做自己喜欢做的事情,这本身就是一种天赋。
展开
-
Babel register
本节我们来讲一下 @babel/register。使用 Babel 的方法之一就是通过 require 钩子(hook),require 钩子将自身绑定到 node 的 require 模块上,并在运行时自动编译文件。这和 CoffeeScript 的 coffee-script/register 类似。安装@babel/register 只有一个功能,就是重写 node 的 require 方法。安装命令如下所示:npm install @babel/core @babel/register --原创 2021-07-18 22:07:37 · 538 阅读 · 0 评论 -
Babel transform-runtime
Babel @babel/plugin-transform-runtime本节我们来学习 @babel/plugin-transform-runtime 和 @babel/runtime 。Babel 中使用辅助函数来实现常见功能,例如 _extend() 函数,每个编译后的文件都需要定义它所需要使用的辅助函数。但这样显然会造成很多重复,所以 Babel 把所有的辅助函数都封装于 @babel/runtime,每个编译后的文件只需要引用 @babel/runtime 即可。@babel/runtim原创 2021-07-16 22:43:19 · 628 阅读 · 0 评论 -
Babel @babel/polyfil
Babel 中默认只转换新的 JavaScript 句法,例如箭头函数、扩展运算符等。但是不会转换新的 API,像是Set、Maps、Iterator、Generator 、Symbol、Reflect 等全局对象,以及一些定义在全局对象上的方法都不会进行转译。如果想使用这些新的对象和方法,则需要为当前环境提供一个 polyfill 垫片。举一个例子,例如 ES6 在 Array 对象上有一个新增的 Array.from 方法,因为这个方法是全局对象上的方法,所以 Babel 就不会对这个方法进行转译。如原创 2021-07-13 23:17:26 · 381 阅读 · 0 评论 -
Babel 预设
本节我们来学习 Babel 中的预设 Presets。如果我们不想手动的组合插件,可以使用 preset 作为 Babel 插件的组合,或者共享 options 配置。Babel7.8 官方的插件和预设有一百多种,如果我们一个个学习那需要大量的时间。但是我们也没必要全部学习,因为在实际使用中,常用的预设和插件也只有那几个,我们重点掌握这些常用的即可,掌握后这样其他的插件和预设就变得简单啦。官方Preset官方针对常用的环境编写了一些 preset,如下所示:@babel/preset-env@b原创 2021-07-11 20:39:24 · 124 阅读 · 0 评论 -
Babel 插件
Babel 是一个编译器,和其他编译器一样,编译过程分为三个阶段,分别是解析(parsing)、转换(transforming)和生成(generate)。其中分析和生成阶段由 Babel 核心完成,而转换阶段,则由Babel插件完成。所以如果我们要实现代码的转换,需要为 Babel 添加插件。Babel 也提供了很多的接口来供我们编写自身的插件来转换我们的实际代码。插件的介绍下面是一个典型的 Babel 插件结构:export default function({ types: babelTypes原创 2021-07-06 15:46:18 · 859 阅读 · 0 评论 -
Babel 配置文件
本节我们学习 Babel 的配置,许多工具都有自己的配置文件,例如ESLint 的配置文件为 .eslintrc,Prettier 的配置文件为 .prettierrc。Babel 也有配置文件, Babel 的配置文件是 Babel 执行时默认会在当前目录寻找的文件,主要有 .babelrc、.babelrc.js、babel.config.js、package.json 文件。.babelrc.babelrc 文件前面我们使用过,我们可以在项目根目录下创建一个 .babelrc 文件,然后输入如下原创 2021-07-04 21:50:26 · 717 阅读 · 0 评论 -
Babel 编辑器
我们在学习 Babel 的使用可以选择一个编辑器。现在很多流行的编辑器都支持 ES2015+ 语法高亮显示,并且此功能开箱即用,然后有一些编辑器则需要安装额外的扩展。我们可以选择的编辑器有:Sublime Text 3AtomVimVisual Studio CodeWebStorm在这几个编辑器中,选择一个你喜欢的下载安装,例如 Visual Studio Code 编辑器。安装Visual Studio CodeVisual Studio Code 下载地址:h原创 2021-07-01 23:09:35 · 108 阅读 · 0 评论 -
Babel 安装
本节我们来学习如何安装 Babel。安装 Babel 后我们就可以将使用 ES2015 + 语法的 JavaScript 应用程序代码,编译为可在当前浏览器中使用的代码。本教程我们学习 Babel7 版本的知识。准备工作Babel 是基于 Node.js 的,如果我们要安装 Babel ,那么需要先安装好 Node.js。Node.js 的官网地址:https://nodejs.org/en/。然后按照提示进行安装即可。安装好后,我们可以在命令工具中输入 node -v 和 npm -v 来检测一下原创 2021-06-29 16:34:58 · 856 阅读 · 0 评论