08-babel

这篇具有很好参考价值的文章主要介绍了08-babel。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

babel命令行使用

  • babel本身可以作为一个独立的工具(和postcss一样),不和webpack等构建工具配置来单独使用

  • 如果我们希望在命令行尝试使用babel,需要安装如下库

    • @babel/core:babel的核心代码,必须安装;
    • @babel/cli:可以让我们在命令行使用babel;
    npm install @babel/cli @babel/core
    
  • 使用babel来处理我们的源代码

    • src:是源文件的目录;
    • –out-dir:指定要输出的文件夹dist;
    npx babel src --out-dir dist
    

插件的使用

  • 比如我们需要转换箭头函数,那么我们就可以使用箭头函数转换相关的插件

    npm install @babel/plugin-transform-arrow-functions -D
    npx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions
    
  • 查看转换后的结果:我们会发现 const 并没有转成 var

    • 这是因为 plugin-transform-arrow-functions,并没有提供这样的功能
    • 我们需要使用 plugin-transform-block-scoping 来完成这样的功能
npm install @babel/plugin-transform-block-scoping -D 
npx babel src --out-dir dist --plugins=@babel/plugin-transform-block-scoping,@babel/plugin-transform-arrow-functions

babel的预设preset

  • 但是如果要转换的内容过多,一个个设置是比较麻烦的,我们可以使用预设(preset)
  • 安装@babel/preset-env预设:npm install @babel/preset-env -D
  • npx babel src --out-dir dist --presets=@babel/preset-env

babel的底层原理

  • babel是如何做到将我们的一段代码(ES6、TypeScript、React)转成另外一段代码(ES5)的呢
  • 从一种源代码(原生语言)转换成另一种源代码(目标语言),这是什么的工作呢?
    • 就是编译器,事实上我们可以将babel看成就是一个编译器。
    • Babel编译器的作用就是将我们的源代码,转换成浏览器可以直接识别的另外一段源代码
  • Babel也拥有编译器的工作流程
    • 解析阶段(Parsing)
    • 转换阶段(Transformation)
    • 生成阶段(Code Generation)

babel-loader

  • 在实际开发中,我们通常会在构建工具中通过配置babel来对其进行使用的,比如在webpack中

  • 那么我们就需要去安装相关的依赖:npm install babel-loader @babel/core

  • 我们可以设置一个规则,在加载js文件时,使用我们的babel:

    module:{
        rules:[
            {
                test:/.m?js$/,
                use:{
                    loader:'babel-loader'        
                } 
            }   
        ]
    }
    

指定使用的插件

module:{
    rules:[
        test:/.m?js$/,
        use:{
            loader:'babel-loader',
            options:{
                plugins:[
                     "@babel/plugin-transform-arrow-functions",     
                     "@babel/plugin-transform-block-scoping"  
                ]            
            }     
        }    
    ]
}

babel-preset

npm install @babel/preset-env文章来源地址https://www.toymoban.com/news/detail-494818.html

test:/.m?js$/,
use:{
    loader:'babel-loader',
    options:{ 
      presets: [
          ["@babel/preset-env"]   
       ]                          
    }     
}  

设置目标浏览器 targets

  • 默认适配browserslist,配置的targets属性会覆盖browserslist;
  • 但是在开发中,更推荐通过browserslist来配置,因为类似于postcss工具,也会使用browserslist,进行统一浏览器 的适配;
test:/.m?js$/,
use:{
    loader:'babel-loader',
    options:{ 
      presets: [
          ["@babel/preset-env",{
              target:"last 2 version"          
          }]   
       ]                          
    }     
} 

Stage-X的preset

  • Stage 0:strawman(稻草人),任何尚未提交作为正式提案的讨论、想法变更或者补充都被认为是第 0 阶段的稻草人”;
  • Stage 1:proposal(提议),提案已经被正式化,并期望解决此问题,还需要观察与其他提案的相互影响:
  • Staae2:draft(草稿),Staae2的提案应提供规范初稿。草稿。此时,语言的实现者开始观察 runtime 的具体实现是否合理;
  • Staae3:candidate(候补),Staae3提案是建议的候选提案。在这个高级阶段,规范的编辑人员和评审人员必
    须在最终规范上签字。Staae 3 的提案不会有太大的改变,在对外发布之前只是修正一些问题:
  • Stage4:finished(完成),进入 Stage4 的提案将包含在 ECMAScript的下一个修订版中;

babel的配置文件

  • babel配置文件的两种方式
    • babel.config.json(或者.js,.cjs,.mjs)文件;
    • .babelrc.json(或者.babelrc,.js,.cjs,.mjs)文件
  • 它们两个有什么区别呢?目前很多的项目都采用了多包管理的方式(babel本身、element-plus、umi等);
    • .babelrc.json:早期使用较多的配置方式,但是对于配置Monorepos项目是比较麻烦的
    • babel.config.json(babel7):可以直接作用于Monorepos项目的子包,更加推荐

到了这里,关于08-babel的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用Postman之上一个接口的返回值作为下一个接口的入参

    在使用Postman做接口测试的时候,在多个接口的测试中,如果需要上一个接口的返回值作为下一个接口的入参,其基本思路是: 1、获取上一个接口的返回值 2、将返回值设置成环境变量或者全局变量 3、设置下一个接口的参数形式 下面我们来举例说明。 存在两个接口(设置微

    2024年02月06日
    浏览(42)
  • 作为C/C++程序员你可以不使用但你必须会的Linux调试器-gdb(GNU Debugger)

    gdb(GNU Debugger) 是一个用于调试 Linux 系统的软件工具。在学习 Linux 的过程中,gdb 的重要性不言而喻。以下是 gdb 在 Linux 学习者中的重要性的详细说明: 帮助理解 Linux 系统的运作方式:gdb 是一个强大的调试工具,可以帮助学习者深入了解 Linux 系统的运作方式。通过使用 gdb,学习

    2024年02月07日
    浏览(59)
  • 无线是否可以作为安全应用?

    言归正传,在前期的文章中,我们介绍了功能安全通信的基本框架,其中以工业应用的IEC 61784-3为对象进行了介绍,后续笔者也将尝试将轨道交通、核电、汽车和航空航天等行业的安全关键通信要求进行介绍;在前期的文章中我们提到了安全通信的黑色通道概念,直白的说就

    2024年03月11日
    浏览(54)
  • 报错 “代理XP“组件已作为此服务器安全配置的一部分被关闭。系统管理员可以使用sp_configure来 启用“代理XP”。

    想为 SQL Server 数据库设置自动备份,点击 维护计划向导 的时候报错 “代理XP\\\"组件已作为此服务器安全配置的一部分被关闭。系统管理员可以使用sp_configure来启用\\\"代理XP”。有关启用\\\"代理XP\\\"的详细信息,请参阅SQL Server联机丛书中的\\\"外围应用配 置器”。(MicrosoftSqlServer.Manage

    2024年02月12日
    浏览(51)
  • “jmeter使用xpath提取器获取请求响应中的value值作为下一个请求的输入”案例

    使用jmeter5.2.1的xpath提取器获取请求响应结果中值作为下一个请求的输入,并在Bean Shell后置处理器中编写通过日志打印 XPath提取器 提取的内容。 提取内容为请求响应结果中的 input type=\\\"hidden\\\" name=\\\"execution\\\" value=\\\"a6cd.........................................................\\\" ,需要提取的为 v

    2023年04月11日
    浏览(78)
  • React一般可以用哪些值作为key?

    在 React 中,key 是用来帮助 React 核对 Virtual DOM 中的节点是否发生变化的。key 值唯一且稳定有助于提高渲染性能,因为 React 可以根据 key 值判断哪些元素需要重新渲染。 一般来说,以下属性可以作为 key 值: 数据库中的 ID:如果数据源有一个唯一的标识符,如数据库中的 ID,

    2024年01月20日
    浏览(41)
  • Redis可以代替MySQL作为数据库吗

    当使用Redis作为数据库时,以下是一些基本的代码示例 展示了如何使用Redis进行数据存储、读取和更新: 1.连接到Redis服务器: 2.存储和获取数据: 3.列表操作: 4.有序集合操作: 6.键过期和删除: Redis作为数据库时,下面是一些更复杂的代码示例,展示了如何使用Redis进行高

    2024年02月16日
    浏览(35)
  • 编写一个JSP登录页面,可输入用户名和密码,提交请求到另一个JSP页面,该JSP页面获取请求的相关数据并显示出来。请求的相关数据包括用户输入的请求数据和请求本身的一些信息。

    实战要求 : 编写一个JSP登录页面,可输入用户名和密码,提交请求到另一个JSP页面,该JSP页面获取请求的相关数据并显示出来。请求的相关数据包括用户输入的请求数据和请求本身的一些信息。 (例如请求使用的协议getProtocol()、请求的URI request.getServletPath()、请求方法requ

    2024年02月06日
    浏览(44)
  • 从本次战疫,作为普通人可以学到的东西

    前人不忘,后事之师。 从本次疫情的控制,可以学到什么? 早发现,早隔离,早识别,早就诊。 定位传染源,传播途径,传播方法,确定潜伏期,检测方法,确认病人症状。 阻断传播途径: 疑似和确诊分开。 轻症和重症分开。 区域间隔离。 动员能力 医疗物资,生产,运

    2024年02月19日
    浏览(41)
  • Golang 中哪些类型可以作为 map 类型的 key?

    目录 可以作为 map 键的类型 不能作为 map 键的类型 最佳实践 小结 在 Go 语言中,map 是一种内置的关联数据结构类型,由一组无序的键值对组成,每个键都是唯一的,并与一个对应的值相关联。本文将详细介绍哪些类型的变量可以作为 map 的键,并通过实例进行说明。 因为

    2024年01月25日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包