https://www.fullstackreact.com/articles/what-are-babel-plugins-and-presets/

当开发react或者vuejs app时,开发者可能经常需要在不同的babel configuration(.bablerc)中切换。你应该在package.json文件中见到过以下代码:

// package.json
{
"babel": {
"presets": [
"es2015",
"stage-0"
]
}
}

或者在.babelrc文件中,可能看到下面的东西:

// .babelrc
{
"plugins": ["transform-class-properties"]
}

本文,我们就好好说道说道这个stage-x是个啥,以及为什么我们这样来配置babel,也就是说我们将探讨babel plugins和presets.

什么是Babel?

为了理解为什么会出现Babel,我们就需要了解一下javascript的历史了。。。

ES5,ES6,ES7

我们知道javascript是web语言,她在不同浏览器中运行,比如chrome,firefox,safari,edge,ie等。不同的浏览器会有不同的javascript解释器,js就由这些解释器引擎翻译和运行。由于js被internet界广泛接受,应用越来越多,随后就有了规范组织用于管理js语言本身的规范。js所遵循的sepec就称为ecmascript或者ES

其中的第5版被称为ES5.你可以将ES5想象为js语言本身的一个版本,该版本在2009年定稿,目前主流浏览器全部实现了ES5.

而第6个版本被称为ES6,最终在2015年定稿,目前主流浏览器大都还没有支持其功能。

ES7则是基于ES6做了更多的改进,最新版本于2016年初步定稿,ES7只有两个新的功能.

作为js的未来,我们希望直接在今天就开始使用ES6/ES7,但是我们也希望我们的代码能够在目前的主流浏览器中能够正确地运行,这就是Babel为什么能够产生地原因。(除了babel, typescript也可以实现类似地功能)babel允许我们完全以ES6/ES7规范来写js代码,同时编译成es5地代码,以便最终可以在当前并未实现es6规范的浏览器上运行

使用babel

在项目中,我们可以以几种方式来使用babel.最简单和快捷的方式是使用一个package babel-standalone.你可以通过一个script tag来引用它。

<script
src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.18.1/babel.min.js"
></script>

引入babel以后,babel就会自动将任何以text/babel为type的script进行stranpile

<div id="output"></div>

<script type="text/babel">
const getMessage = () => "Hello World"; // ES6!
document.getElementById('output').innerHTML = getMessage();
</script>

像create-react-app这样的项目会自动地引用并且配置好babel,因此你可以0配置开始写react components

Babel Plugins和presets

babel提供了一种开放的架构,通过plugin来对不同的feature做transformation.由于feature特别多,那么就会对应着bable plugin特别多,如何管理好这些plugin也是一个挑战。

在babel中,a preset is a set of plugins used to support particular language features.

Presets are sharable .babelrc configs or simply an array of babel plugins.

有两个preset会被babel默认使用:

es2015: 增加对ES2015功能地支持

react: 支持JSX

记住:ES2015仅仅是ES6的另外一种叫法,我们使用ES2015 preset因为我们不会使用ES7的新功能

除了ES7,js features可以在不同的stages中存在。一个feature可以是一种experimental proposal(实验性质)的,也就是说社区还在就一些细节进行研究(stage1).

experimental proposals有非常大的风险会被舍弃或者大幅修改。一个feature也可能是ratified状态的(批准),将会被在下一个js的release中包含("stage4")

具体地:

TC39工作组将proposals分门别类为以下stages:

  • stage-0 - Strawman: just an idea, possible Babel plugin.
  • stage-1 - Proposal: this is worth working on.
  • stage-2 - Draft: initial spec.
  • stage-3 - Candidate: complete spec and initial browser implementations.
  • stage-4 - Finished: will be added to the next yearly release.

我们可以通过使用presets或/和 plugins配置babel来尝鲜或者使用这些即将到来的或者说实验性质的功能.

哪些plugins或者presets是"safe"的?

babel会针对那些早于stage-3的feature做出警告,因为他们可能会被废弃或者大幅修改。特别是如果你从事教育工作,最好不要教授那些feature,因为很有可能会舍弃

如何使用babel plugin和presets

有两种主要的配置babel方式。

  1. 在package.json文件中

你可以像下面的package.json文件一样罗列出对应的presets和plugins列表:

// package.json
{
"babel": { // nest config under "babel"
"presets": [
"es2015",
"react",
"stage-3"
],
"plugins": ["transform-class-properties"]
}
}

    2..babelrc

// .babelrc
{
"presets": [
"es2015",
"react",
"stage-3"
],
"plugins": ["transform-class-properties"]
}

一般比较推荐通过.babelrc方式来配置babel

babel plugin和presets是什么,怎么用?的更多相关文章

  1. 简单 babel plugin 开发-使用lerna 工具

    babel在现在的web 应用开发上具有很重要的作用,帮助我们做了好多事情,同时又有 比较多的babel plugin 可以解决我们实际开发上的问题. 以下只是学习下如果编写一个简单的babel pl ...

  2. [Javascript AST] 1. Continue: Write a simple Babel plugin

    We want to write a Babel Plugin, which move 'const versionRegex = /(/d+)\.(/d+)\.(/d+)/gi' out of fu ...

  3. [AST Babel Plugin] Transform code, add line:column number for console log

    For example we have current code: function add(a, b) { console.log(a, b) return a + b } function sub ...

  4. [Javascirpt AST] Babel Plugin -- create new CallExpression

    The code we want to trasform: 2 ** 3; a ** b; a **b * c; a ** b ** c; (a+1) ** (b+1); transform to: ...

  5. babel plugin

    a = () => {}, // Support for the experimental syntax 'classProperties' isn't currently enabled ya ...

  6. [AST Babel Plugin] Hanlde ArrowFunction && FunctionExpression

    Continue with previous post: https://www.cnblogs.com/Answer1215/p/12342540.html Now we need to think ...

  7. [转] 如何写好.babelrc?Babel的presets和plugins配置解析

    什么是Babel The compiler for writing next generation JavaScript. 官网是这么说的,翻译一下就是下一代JavaScript 语法的编译器. 作为 ...

  8. 如何写好.babelrc?Babel的presets和plugins配置解析

    什么是Babel The compiler for writing next generation JavaScript. 官网是这么说的,翻译一下就是下一代JavaScript 语法的编译器. 作为 ...

  9. Babel配置中的presets、plugins、各个阶段stage的含义

    什么是Babel Babel 官方文档: https://babeljs.io/ Babel 中文文档:https://www.babeljs.cn/ 我们知道各个浏览器对JavaScript版本的支 ...

随机推荐

  1. 阿里云部署SSL证书

    查找中间证书 为了确保兼容到所有浏览器,我们必须在阿里云上部署中间证书,如果不部署证书,虽然安装过程可以完全也不会报错,但可能导致Android系统,Chrome 和 Firefox等浏览器无法识别. ...

  2. chrony服务配置

    chrony软件使用说明 chrony简介 chrony是一个开源的自由软件,它能保持系统时钟与时间服务器(ntp)同步,让时间保持精确. 它由两个程序组成:chrongd和chronyc. chro ...

  3. js闭包和原型链好文

    http://www.cnblogs.com/wangfupeng1988/p/3977924.html

  4. 搭建pikachu平台及暴力破解

    一.先将Pikachu文件放在网站根目录下 二.修改pikachu网站的配置文件  inc/config.inc.php define('DBUSER', 'user'); define('DBPW' ...

  5. 【使用篇二】SpringBoot异常处理(9)

    异常的处理方式有多种: 自定义错误页面 @ExceptionHandler注解 @ControllerAdvice+@ExceptionHandler注解 配置SimpleMappingExcepti ...

  6. Gym101667 H. Rock Paper Scissors

    将第二个字符串改成能赢对方时对方的字符并倒序后,字符串匹配就是卷积的过程. 那么就枚举字符做三次卷积即可. #include <bits/stdc++.h> struct Complex ...

  7. jvm内存结构及对象漫谈(较全)

    最近想整理一下GC相关的知识和经验,在整理之前先整理一下jvm的内存结构,后续会持续更新. jvm内存结构重要由两部分组成:线程共享区域与线程私有区域,如下图所示: 其中方法区和堆为线程共享区域,栈与 ...

  8. [LeetCode] 300. Longest Increasing Subsequence 最长递增子序列

    Given an unsorted array of integers, find the length of longest increasing subsequence. Example: Inp ...

  9. requests获取图片的宽和高

    try: if cover: resp = requests.get('%s?x-oss-process=image/info' % (url), timeout=30) if resp.status ...

  10. Xamarin.Forms移动开发系列4 :XAML基础

    摘要 本文介绍Xamarin.Forms创建用户界面的语言:XAML基础部分. 前言 本文介绍Xamarin.Forms定义用户界面的语言:XAML. 本篇篇幅较长,主要讲述XAML语法,以及对其他基 ...