babel-preset-react_babel-loader

babel-preset-react_babel-loaderhttps://www.fullstackreact.com/articles/what-are-babel-plugins-and-presets/当开发react或者vuejsapp时,开发者

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

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

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/167519.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • PyCharm如何设置 “ctrl+滚轮” 实现字体的放大和缩小「建议收藏」

    PyCharm如何设置 “ctrl+滚轮” 实现字体的放大和缩小「建议收藏」一、PyCharm字体放大的设置File–>setting–>Keymap–>在搜索框中输入increase—>IncreaseFontSize(双击)–>在弹出的对话框中选择AddMouseShortcut–>弹出的对话框后按住ctrl键的同时鼠标滚轮向上滑。二、Pycharm字体缩小的设置:File–>setting–>Keymap–>在搜索框中输入decrease—>

  • mysql 获取分区的最大值_MySQL分区表测试「建议收藏」

    mysql 获取分区的最大值_MySQL分区表测试「建议收藏」MYSQL分区表功能测试。1.查看Mysql版本是否支持分区SHOWVARIABLESLIKE’%partition%’;+——————-+——-+|Variable_name|Value|+——————-+——-+|have_partitioning|YES|+——————…

  • html怎么让无序列表横向排列_一个人把敌人的炮兵阵地

    html怎么让无序列表横向排列_一个人把敌人的炮兵阵地司令部的将军们打算在 N×M 的网格地图上部署他们的炮兵部队。一个 N×M 的地图由 N 行 M 列组成,地图的每一格可能是山地(用 H 表示),也可能是平原(用 P 表示),如下图。在每一格平原地形上最多可以布置一支炮兵部队(山地上不能够部署炮兵部队);一支炮兵部队在地图上的攻击范围如图中黑色区域所示:如果在地图中的灰色所标识的平原上部署一支炮兵部队,则图中的黑色的网格表示它能够攻击到的区域:沿横向左右各两格,沿纵向上下各两格。图上其它白色网格均攻击不到。从图上可见炮兵的攻击范围不受地形的影响

  • Java经典23种设计模式之创造型模式(一)

    Java经典23种设计模式之创造型模式(一)

  • 免费防火更强大 十大免费防火墙软件大盘点

    前不久,总结了目前“十大免费杀毒软件”。由于一般情况下免费杀毒软件是不带防火墙的,因此,现在特地搜索收集目前比较流行的防火墙,以便于使用免费杀毒软件的朋友搭配使用。免费杀毒软件+免费防火墙=互联网套装。  1、ComodoFirewall  ComodoFirewall免费防火墙当中的佼佼者,昔日霸主。目前Comodo基于其出色的防火墙技术还开发了新一代的安全互…

  • javaScript-touch事件详解(touchstart、touchmove和touchend)-滑动事件案例

    javaScript-touch事件详解(touchstart、touchmove和touchend)-滑动事件案例HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件:touchstart、touchmove和touchend。一开始触摸事件touchstart、touchmove和touchend是iOS版Safari浏览器为了向开发人员传达一些信息新添加的事件。因为ios设备既没有鼠标也没有键盘,所以在为移动Safari浏览器开发交互性网页的时候,PC端

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号