iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >ES6代码转ES5详细教程(babel安装使用教程)
  • 560
分享到

ES6代码转ES5详细教程(babel安装使用教程)

ES6代码转ES5babel安装使用 2023-01-16 12:01:06 560人浏览 薄情痞子
摘要

目录需要用到的软件进入正题,安装babel(安装之前请确保你已安装了node.js)命令行转码需要用到的软件 node.js + babel Babel 是一个广泛使用的 es6 转

需要用到的软件

node.js + babel

Babel 是一个广泛使用的 es6 转码器,可以将 ES6 代码转为 ES5 代码,从而在老版本的浏览器执行。这意味着,你可以用 ES6 的方式编写程序,又不用担心现有环境是否支持。下面是一个例子。

// 转码前
input.map(item => item + 1);

// 转码后
input.map(function (item) {
  return item + 1;
});

进入正题,安装babel(安装之前请确保你已安装了node.js)

babel建议在项目中安装,不建议全局安装;
选择项目目录或新建一个目录,如E:/wwwroot/babel_test

在这里插入图片描述

安装命令:

npm install --save-dev @babel/core

Babel 的配置文件是.babelrc,存放在项目的根目录下。使用 Babel 的第一步,就是配置这个文件。
该文件用来设置转码规则和插件,基本格式如下。

{
  "presets": [],
  "plugins": []
}

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

# 最新转码规则
$ npm install --save-dev @babel/preset-env

# React 转码规则
$ npm install --save-dev @babel/preset-react

然后,将这些规则加入.babelrc。

 {
    "presets": [
      "@babel/env",
      "@babel/preset-react"
    ],
    "plugins": []
  }

注意,以下所有 Babel 工具和模块的使用,都必须先写好.babelrc。

命令行转码

Babel 提供命令行工具@babel/cli,用于命令行转码。

它的安装命令如下。

npm install --save-dev @babel/cli

基本用法如下。

# 转码结果输出到标准输出
$ npx babel example.js

# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
 npx babel example.js --out-file compiled.js
# 或者
 npx babel example.js -o compiled.js

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
 npx babel 源目录 --out-dir 转后目录
# 或者
 npx babel 源目录 -d 转后目录

# -s 参数生成source map文件
 npx babel 源目录 -d 转后目录 -s

如果觉得麻烦还可以通过网上在线转换1 ,在线转换2

到此这篇关于ES6代码转ES5教程(babel安装使用教程)的文章就介绍到这了,更多相关ES6代码转ES5内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: ES6代码转ES5详细教程(babel安装使用教程)

本文链接: https://www.lsjlt.com/news/177854.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • ES6代码转ES5详细教程(babel安装使用教程)
    目录需要用到的软件进入正题,安装babel(安装之前请确保你已安装了node.js)命令行转码需要用到的软件 Node.js + babel Babel 是一个广泛使用的 ES6 转...
    99+
    2023-01-16
    ES6代码转ES5 babel安装使用
  • 使用Anaconda安装TensorFlow详细教程
    一、Anaconda安装 可以参考笔者的这篇博客:Anaconda安装详细教程 二、准备工作 1、单击启动Anaconda Prompt创建新虚拟环境 2、在Anaconda Prompt依次执行以...
    99+
    2023-09-04
    tensorflow python anaconda 深度学习 安装教程
  • ReSharper 的安装使用详细教程
    Reshaper是什么 即便是那些整天攻击 .NET 和 C# 的人,也常常不得不承认 Visual Studio 确实是个够强大的 IDE,除非他认为更少的 IDE 功能和命令行...
    99+
    2024-04-02
  • TortoiseSVN安装使用教程(超详细)
    TortoiseSVN:(俗称小乌龟)Subversion版本控制系统的一个免费开源客户端,可以超越时间的管理文件和目 录。文件保存在中央版本库,除了能记住文件和目录的每次修改以外,版本库非常像普通的文件服务器。你可以 将文件恢复到过去...
    99+
    2023-08-20
    服务器 linux apache TortoiseSVN
  • MySQL安装详细教程
    目录 一、下载链接 二、配置MySQL 2.1配置环境变量(可以让任意盘符号都能访问bin目录) 2.2新建配置文件 2.3初始化MySQL 2.4注册MySQL服务 2.5启动MySQL服务 2.6修改默认密码 ​ 三、登录MySQL ...
    99+
    2023-09-28
    mysql 数据库 database
  • MySQL安装教程(详细)
    目录 一、安装准备 1.1 mysql数据库下载 官网在线下载 云盘离线下载 1.2 数据库运行环境下载 二、安装步骤 2.1 开始安装 2.2 选择安装类型 2.3 选择功能 2.4 检测安装环境 2.5 功能安装 2.6 功能安装完成,...
    99+
    2023-08-31
    mysql 数据库安装
  • Maven详细安装教程
    简介         Apache Maven是一个(特别是Java编程)项目管理及自动构建工具,由Apache软件基金会所提供。基于项目对象模型(缩写:POM)概念,Maven利用一个中央信息片断能管理一个项目的构建、报告和文档等步骤。 ...
    99+
    2023-09-01
    maven apache java intellij idea
  • kali详细安装教程
    vmware虚拟机下载地址:https://www.vmware.com/cn/products/workstation-pro/workstation-pro-evaluation.html kali ISO镜像 https://cdim...
    99+
    2023-10-26
    linux 运维 服务器 web安全 计算机网络
  • 【CUDA安装详细教程】
    目录 前言一、cuda的下载及安装1.cuda版本2.CUDA toolkit Download3.cuda安装 二、cuDNN下载及安装1.cuDNN下载2.cuDNN配置 前...
    99+
    2023-09-06
    深度学习 人工智能 python 机器学习
  • clickhouse安装详细教程
    1.前置准备 首先我们准备一台有linux系统的服务器 然后更改文件的所属者,这点很重要 下载解压jdk, 配置环境变量 接下来进入正题: 安装clickhouse 确定防火墙处于关闭状态 ...
    99+
    2023-09-03
    clickhouse linux 服务器 java 大数据
  • DVWA详细安装教程
    1、下载和安装phpstudy 小皮面板(phpstudy) - 让天下没有难配的服务器环境! (xp.cn)  下载和安装很简单的,但是要注意安装的文件夹不得有中文否则要报错。 安装后开启Apache和MySQL两个服务,  2、...
    99+
    2023-09-26
    php web安全
  • 使用Docker安装SonarQube的详细教程
    目录1.拉取镜像1.1拉取相关镜像并运行1.1.1拉取相关镜像1.1.2运行镜像1.2保存并提交已修改的镜像2.安装成功3.插件安装3.1安装Chinese插件4.docker安装g...
    99+
    2024-04-02
  • TypeScript安装与使用的详细教程
    目录初识TypeScriptTypeScript给JS添加类型支持的原因TypeScript相比JS的优势TS工具包的安装TS文件的编译和运行简化TS的运行步骤附:查看ts版本、安装...
    99+
    2023-01-10
    ts安装 ts教程 typescript教程
  • Sqoop的安装与使用详细教程
    目录一、Sqoop的安装1.1 下载上传安装包1.2 修改配置文件1.3 拷贝JDBC驱动二、Sqoop的导入导出2.1 测试连接数据库2.2 MySQL导入数据到HDFS2.3 M...
    99+
    2024-04-02
  • Linux安装JDK详细教程(图文教程)
    下载Linux版本的JDK(注意看自己安装的Linux系统是什么位数) 查看本机位数命令:sudo uname --m  JDK官网下载地址:https://www.oracle.com/java/technologies/downloa...
    99+
    2023-09-01
    linux java
  • PyCharm安装教程,图文教程(超详细)
    「作者简介」:CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」:对网络安全感兴趣的小伙伴可以关注专栏《网络安全入门到精通》 PyCharm 一、...
    99+
    2023-09-02
    python 人工智能 ai
  • Linux-安装MySQL(详细教程)
    Linux-安装MySQL 前言一、概述二、下载三、安装四、卸载五、常用设置六、可能遇到的问题 前言 本文的主要内容是在 Linux 上安装 MySQL,以下内容是源于 B站 - MySQL数据库入门到精通 整理而来。 一、...
    99+
    2023-08-17
    mysql linux 数据库
  • MySQL-8.0.33安装详细教程
    一,官网下载安装包 二,使用MySQL自带客户端工具连接MySQL 一,下载安装包: 官网地址: MySQL :: Download MySQL Installer (Archived Versions) 下载社区版 找到下载文件,双击打...
    99+
    2023-10-23
    windows java mysql
  • Linux 安装 nginx 详细教程
    文章目录 Linux 安装 nginx 详细步骤①安装依赖包②下载并解压安装包③安装 nginx④启动 nginx 服务⑤nginx 反向代理 提示:以下是本篇文章正文内容,Linux 系列学习将会持续更新 Lin...
    99+
    2023-08-23
    nginx linux 服务器
  • Mac 安装Nginx详细教程
    一、前言 本文介绍一下,如何在Mac系统中安装Nginx,把详细过程记录下来,方便以后查看,也方便大家学习。 二、正文 1、安装 Homebrew homebrew是什么?它是Mac中的一款软件包管理工具,通过brew可以很方便的在Mac中...
    99+
    2023-09-05
    nginx macos 运维 网络安全 linux
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作