ES6中Babel 转码器的安装配置

2023-11-20 16:21

本文主要是介绍ES6中Babel 转码器的安装配置,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Babel 转码器是ES6中广泛使用的转码器,它可以将ES6的代码转换成ES5(JS)的代码。所以我们可以使用ES5的编写方式。
下面介绍下安装配置的流程。

先准备一个文件夹,此处命名为project
1、打开cmd,在我们创建的文件夹的路径下,输入命令npm init,这个就是帮助规整咱们安装的包的。

在这里插入图片描述

2、Babel 的配置文件是**.babelrc**,存放在项目的根目录下。该文件用来设置转码规则和插件。
新建文件名为**.babelrc**,其中,注意这个不是后缀名,就是文件名。
我这边直接在这个文件夹中写好了内容以及配置的名称。

{"presets": ["latest","react","stage-2"],"plugins": []
}

以下安装可能比较缓慢,可以建议在电脑中安装cnpm,这样就比较快,本人就是用cnpm来安装的。

#安装cnpm的命令
npm install -g cnpm --registry= https://registry.npm.taobao.org

3、presets字段设定转码规则,官方提供以下的规则集,根据需要安装即可。

# 最新转码规则
npm install --save-dev babel-preset-latest# react 转码规则npm install --save-dev babel-preset-react# 不同阶段语法提案的转码规则(共有4个阶段),选装一个npm install --save-dev babel-preset-stage-0npm install --save-dev babel-preset-stage-1npm install --save-dev babel-preset-stage-2npm install --save-dev babel-preset-stage-3

我直接使用了cnpm安装,所以直接在cmd中安装如下代码

建议按照顺序按照如下配置cnpm install --save-dev babel-preset-latestcnpm install --save-dev babel-preset-reactcnpm install --save-dev babel-preset-stage-2

4、Babel 提供babel-cli工具,用于命令行转码

cnpm install --save-dev babel-cli

安装完毕后,在package.json中"scripts"后面加入一句代码。
添加时,注意上面的逗号要加上!

"build": "babel src -d lib"

可以参照下方的图片,是每个包都安装成功后的package.json中的显示信息
在这里插入图片描述

5、此时就可以新建一个文件夹,我命名为src,里面添加test.js文件,写入ES6的代码,例如:

var fn = ()=>console.log(1);
let fn2 = i>=i;

现在cmd运行。来实现转码

npm run build

成功后,在根目录下就会多出一个文件夹lib以及文件index.js就是转码后的index.js
在这里插入图片描述

这篇关于ES6中Babel 转码器的安装配置的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/395905

相关文章

SpringBoot结合Knife4j进行API分组授权管理配置详解

《SpringBoot结合Knife4j进行API分组授权管理配置详解》在现代的微服务架构中,API文档和授权管理是不可或缺的一部分,本文将介绍如何在SpringBoot应用中集成Knife4j,并进... 目录环境准备配置 Swagger配置 Swagger OpenAPI自定义 Swagger UI 底

基于Python Playwright进行前端性能测试的脚本实现

《基于PythonPlaywright进行前端性能测试的脚本实现》在当今Web应用开发中,性能优化是提升用户体验的关键因素之一,本文将介绍如何使用Playwright构建一个自动化性能测试工具,希望... 目录引言工具概述整体架构核心实现解析1. 浏览器初始化2. 性能数据收集3. 资源分析4. 关键性能指

Oracle迁移PostgreSQL隐式类型转换配置指南

《Oracle迁移PostgreSQL隐式类型转换配置指南》Oracle迁移PostgreSQL时因类型差异易引发错误,需通过显式/隐式类型转换、转换关系管理及冲突处理解决,并配合验证测试确保数据一致... 目录一、问题背景二、解决方案1. 显式类型转换2. 隐式转换配置三、维护操作1. 转换关系管理2.

IDEA中配置Tomcat全过程

《IDEA中配置Tomcat全过程》文章介绍了在IDEA中配置Tomcat的六步流程,包括添加服务器、配置部署选项、设置应用服务器及启动,并提及Maven依赖可能因约定大于配置导致问题,需检查依赖版本... 目录第一步第二步第三步第四步第五步第六步总结第一步选择这个方框第二步选择+号,找到Tomca

Win10安装Maven与环境变量配置过程

《Win10安装Maven与环境变量配置过程》本文介绍Maven的安装与配置方法,涵盖下载、环境变量设置、本地仓库及镜像配置,指导如何在IDEA中正确配置Maven,适用于Java及其他语言项目的构建... 目录Maven 是什么?一、下载二、安装三、配置环境四、验证测试五、配置本地仓库六、配置国内镜像地址

Python安装Pandas库的两种方法

《Python安装Pandas库的两种方法》本文介绍了三种安装PythonPandas库的方法,通过cmd命令行安装并解决版本冲突,手动下载whl文件安装,更换国内镜像源加速下载,最后建议用pipli... 目录方法一:cmd命令行执行pip install pandas方法二:找到pandas下载库,然后

SpringBoot多环境配置数据读取方式

《SpringBoot多环境配置数据读取方式》SpringBoot通过环境隔离机制,支持properties/yaml/yml多格式配置,结合@Value、Environment和@Configura... 目录一、多环境配置的核心思路二、3种配置文件格式详解2.1 properties格式(传统格式)1.

Debian系和Redhat系防火墙配置方式

《Debian系和Redhat系防火墙配置方式》文章对比了Debian系UFW和Redhat系Firewalld防火墙的安装、启用禁用、端口管理、规则查看及注意事项,强调SSH端口需开放、规则持久化,... 目录Debian系UFW防火墙1. 安装2. 启用与禁用3. 基本命令4. 注意事项5. 示例配置R

PyCharm中配置PyQt的实现步骤

《PyCharm中配置PyQt的实现步骤》PyCharm是JetBrains推出的一款强大的PythonIDE,结合PyQt可以进行pythion高效开发桌面GUI应用程序,本文就来介绍一下PyCha... 目录1. 安装China编程PyQt1.PyQt 核心组件2. 基础 PyQt 应用程序结构3. 使用 Q

Linux系统中查询JDK安装目录的几种常用方法

《Linux系统中查询JDK安装目录的几种常用方法》:本文主要介绍Linux系统中查询JDK安装目录的几种常用方法,方法分别是通过update-alternatives、Java命令、环境变量及目... 目录方法 1:通过update-alternatives查询(推荐)方法 2:检查所有已安装的 JDK方