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

相关文章

spring-boot-starter-thymeleaf加载外部html文件方式

《spring-boot-starter-thymeleaf加载外部html文件方式》本文介绍了在SpringMVC中使用Thymeleaf模板引擎加载外部HTML文件的方法,以及在SpringBoo... 目录1.Thymeleaf介绍2.springboot使用thymeleaf2.1.引入spring

Python使用国内镜像加速pip安装的方法讲解

《Python使用国内镜像加速pip安装的方法讲解》在Python开发中,pip是一个非常重要的工具,用于安装和管理Python的第三方库,然而,在国内使用pip安装依赖时,往往会因为网络问题而导致速... 目录一、pip 工具简介1. 什么是 pip?2. 什么是 -i 参数?二、国内镜像源的选择三、如何

部署Vue项目到服务器后404错误的原因及解决方案

《部署Vue项目到服务器后404错误的原因及解决方案》文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是... 目录一、vue项目部署步骤二、404错误原因及解决方案错误场景原因分析解决方案一、Vue项目部署步骤

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2

Python安装时常见报错以及解决方案

《Python安装时常见报错以及解决方案》:本文主要介绍在安装Python、配置环境变量、使用pip以及运行Python脚本时常见的错误及其解决方案,文中介绍的非常详细,需要的朋友可以参考下... 目录一、安装 python 时常见报错及解决方案(一)安装包下载失败(二)权限不足二、配置环境变量时常见报错及

SpringBoot+MyBatis-Flex配置ProxySQL的实现步骤

《SpringBoot+MyBatis-Flex配置ProxySQL的实现步骤》本文主要介绍了SpringBoot+MyBatis-Flex配置ProxySQL的实现步骤,文中通过示例代码介绍的非常详... 目录 目标 步骤 1:确保 ProxySQL 和 mysql 主从同步已正确配置ProxySQL 的

Spring Boot整合log4j2日志配置的详细教程

《SpringBoot整合log4j2日志配置的详细教程》:本文主要介绍SpringBoot项目中整合Log4j2日志框架的步骤和配置,包括常用日志框架的比较、配置参数介绍、Log4j2配置详解... 目录前言一、常用日志框架二、配置参数介绍1. 日志级别2. 输出形式3. 日志格式3.1 PatternL

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re

配置springboot项目动静分离打包分离lib方式

《配置springboot项目动静分离打包分离lib方式》本文介绍了如何将SpringBoot工程中的静态资源和配置文件分离出来,以减少jar包大小,方便修改配置文件,通过在jar包同级目录创建co... 目录前言1、分离配置文件原理2、pom文件配置3、使用package命令打包4、总结前言默认情况下,

MySQL8.2.0安装教程分享

《MySQL8.2.0安装教程分享》这篇文章详细介绍了如何在Windows系统上安装MySQL数据库软件,包括下载、安装、配置和设置环境变量的步骤... 目录mysql的安装图文1.python访问网址2javascript.点击3.进入Downloads向下滑动4.选择Community Server5.