前言

本文记录了babel转码器的基本使用。

提示：以下是本篇文章正文内容，下面案例可供参考

一、babel是什么？

babel是编码转换器，用于将Js代码从ES6规范转成ES5规范。那么为什么要进行转码呢？

原因：

1、编写代码复杂度：ES6 < ES5

2、浏览器兼容性：ES5 > ES6

因此我们通常都是，使用ES6规范进行代码编写，然后转换成ES5规范运行。

二、安装相关依赖

# (1) 安装babel-cli工具。它是官方提供的命令行集成工具
npm install --global babel-cli# 查看babel是否安装成功
babel --version# (2) 安装ES5规范的转码器。我们最终就是通过这个转码器将ES6代码进行转换
npm install --save-dev babel-preset-es2015

二、使用Babel工具

1.初始化项目

代码如下（示例）：

npm init -y

2.配置.babelrc文件

Babel的配置文件是.babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件

代码如下（示例）：

{"presets": ["es2015"], // 将转码器配置为ES5规范。这里用到的就是前面下载的依赖"plugins": []
}

3.进行转码操作

代码如下（示例）：

# 单个文件进行转码
# 使用 -o 参数，指定输出的文件位置
babel 需要转码的Js文件 -o 转码后文件输出位置
# 示例：babel es6/test.js -o es5/test.js# 整个目录进行转码
# 使用 -d 参数，指定输出的目录位置
babel 需要转码的目录-d 转码后输出的目录位置
# 示例：babel es6 -d es5

总结

以上就是关于Babel转码器的基本使用啦~如有不对，多多包涵~

babel转码器的使用相关推荐

项目中配置Babel转码器的详细教程
先简单说一下Babel吧 Babel是一个ES6转码器,可以将ES6代码转为ES5代码此篇教程是在学习阮老师的<ES6标准入门>时,不会npm的学习总结在阮老师的教程上具体补充,通过以 ...
es6 Babel 转码器对修饰器的支持
Babel 转码器对修饰器的支持目前,Babel 转码器已经支持 Decorator. 首先,安装babel-core和babel-plugin-transform-decorators.由于后者包 ...
ES6学习（一）— Babel转码器的使用和配置
ES6学习(一)- Babel转码器的使用和配置 Babel转码器 Babel是一个广泛使用的ES6转码器,可以将ES6代码转化为ES5代码从而在老版本的浏览器进行. 这意味着,你可以使用ES6的方式 ...
解决VScode安装Babel转码器报错：无法将“cnpm“项识别为cmdlet\函数、脚本文件或可运行程序的名称的问题
解决VScode安装Babel转码器报错:无法将"cnpm"项识别为cmdlet\函数.脚本文件或可运行程序的名称的问题报错结果如下: 解决方案第一步:安装npm 点我安装np ...
npm（了解）+Babel转码器+模块化+webpack打包
目录介绍设置镜像导入依赖其他命令 Babel转码器模块化 es6怎么做模块化 webpack webpack的使用介绍一个包的管理工具,类似与Maven,用于前端中管理JS的依赖查看版本 ...
Babel转码器详解
Babel转码器详解 Babel是一个广为使用的ES6转码器,可以将ES6代码转为ES5代码,从而在浏览器或其他环境运行.这意味着可以用ES6的方式编写程序而不用担心环境是否支持 Babel的配置文件 ...
es6 babel转码器安装配置
es6 babel转码器安装配置例如:桌面上新建个文件夹es6,文件夹里新建一个文件es6.js. 打开小黑窗进入文件夹.(windows要以管理员的方式打开cmd) 1.先全局安装babel-cl ...
学习笔记—babel转码器，babel是什么
babel 转码器 es6是2015年6月开始正式创立,所以一些老浏览器并不能解析es6的语法,babel转码器应运而生,可以将es6的代码转译为es5代码. 安装babel: npm install ...
ES6转码(编译)工具——Babel转码器、Traceur转码器
当ES6不兼容时,需要用到转码工具 1.Babel转码器: Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行. 这意味着,你可以用ES6的方式编写程序,又不用 ...
常见的ES6转码(编译)工具——Babel转码器、Traceur转码器
在浏览器里面如何使用? 现在ES6的使用也是一个新趋势,下面就来讲解转码的常见方法当ES6不兼容时,需要用到转码工具 1.Babel转码器: Babel是一个广泛使用的ES6转码器,可以将ES6代码 ...

babel转码器的使用

前言

一、babel是什么？

二、安装相关依赖

二、使用Babel工具

1.初始化项目

2.配置.babelrc文件

3.进行转码操作

总结

babel转码器的使用相关推荐

最新文章

热门文章