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)


相关推荐

  • latex大括号错位显示_LaTeX表格

    latex大括号错位显示_LaTeX表格amsmath中\smash妙用样例-大括号错位显示。原始大括号显示\[\text{机器学习}\begin{cases}\text{~~监督学习~}{\begin{cases}\text{回归算法}\\\text{分类算法}{\begin{cases}\text{生成模型}\\\text{判别模型}\end{cases}}

    2022年10月11日
  • 32.HttpRequest对象的学习

    32.HttpRequest对象的学习引言——在前面你也跟着本博主编写了那么多的视图函数,但是每个视图函数它都会接收一个名为request的参数。是不是很好奇:视图函数接收到的request到底是个什么对象!!!HttpRequest对象1.我们可以打印这个request对象,看一下:<WSGIRequest:GET’/music/test3/’>我们知道WSGIRequest是一个HTTP请求对象,里面包括了提交的方式和URL路径。综上可知:服务器接收到http协议的请求后,会根据报文创建HttpReq.

  • Qt编写安防视频监控系统(界面很漂亮)「建议收藏」

    Qt编写安防视频监控系统(界面很漂亮)「建议收藏」一、前言视频监控系统在整个安防领域,已经做到了烂大街的程序,全国起码几百家公司做过类似的系统,当然这一方面的需求量也是非常旺盛的,各种定制化的需求越来越多,尤其是这几年借着人脸识别的东风,发展更加迅猛,人脸识别相关的技术和应用这几年处于风口浪尖,衍生了特别多的应用产品,各种人脸识别的产品遍地开花,刷脸门禁,车站机场人脸识别,刷脸取票等,但是其实大部分内行人士可能都比较绝望,外行感觉像看科幻片一样…

  • dns地址和ip地址的区别_ip地址和域名一样吗

    dns地址和ip地址的区别_ip地址和域名一样吗IP:每个连接到Internet上的主机都会分配一个IP地址,此ip是该计算机在互联网上的逻辑地址的唯一标识,计算机之间的访问就是通过IP地址来进行的。写法:十进制的形式,用“.”分开,叫做“点分十进制表示法”,如:127.0.0.1。IP地址采用二进制的形式表示的话很长,比较麻烦,为了便于使用,IP地址经常被写成十进制的形式。域名:ip是数字标识,使用时不好记忆和书写,因此在将IP地址符号化…

  • 优化算法——模拟退火算法

    优化算法——模拟退火算法模拟退火算法原理模拟退火算法模拟退火算法过程模拟退火算法流程模拟退火算法的Java实现Java代码最后的结果模拟退火算法原理爬山法是一种贪婪的方法,对于一个优化问题,其大致图像(图像地址)如下图所示:其目标是要找到函数的最大值,若初始化时,初始点的位置在CC处,则会寻找到附近的局部最大值AA点处,由于AA点出是一个局部最大值点,故对于爬山法来讲,该算法无法跳出局部最大值点。若初始

  • Activity入门—Activity生命周期及三种状态+案例[通俗易懂]

    Activity入门—Activity生命周期及三种状态+案例[通俗易懂]生命周期就是一个对象从创建到销毁的过程,每个对象都有自己的生命周期。Activity生命周期分为三种状态。运行状态,停止状态,暂停状态。一.运行状态当activity在最前端时,它是可见的,有焦点的,可以用来处理用户的常见的操作。如:点击,双击,长按事件等。系统最不愿回收的就是出于此种状态的活动,这会带来非常差的用户体验。二.暂停状态activity依然可见,但它不再拥有焦点,即用户对它的操

发表回复

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

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