ES6学习（一）— Babel转码器的使用和配置
ES6学习（一）— Babel转码器的使用和配置
Babel转码器
Babel是一个广泛使用的ES6转码器，可以将ES6代码转化为ES5代码从而在老版本的浏览器进行。
这意味着，你可以使用ES6的方式编写程序，又不用担心现有的环境是否支持
Babel转码器使用的步骤
步骤一
- 在项目中，安装Babel转码器（n前面可以加个c这样安装速度会快一些）
语法：(c )npm install --save-dev @babel/core
步骤二
- 配置文件
.babelrc,存放在项目的根目录下，使用Babel的第一步，就是配置整个文件 该文件用来配置转码规则和插件，基本格式如下：
{"presets":[],"plugins":[]
}
步骤三
- presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装(这里我安装的是第一个)
最新转码规则：
(c)npm install --save-dev @babel/preset-env
react规则:
(c ) npm install --save-dev @babel/preset-react
步骤四
配置文件规则：将下面的规则加入.babelrc
将下面的规则加入.babelrc
{"presets":["@babel/ennv","@babel/preset-react"],"plugins":[]}注意：因为我安装的是 env 所以只拿一个就好
步骤五
安装命令行工具：
npm install --save-dev @babel/cli
步骤六：
命令行进行转码
- 注意：
npm是安装包的管理工具，npx是调用你安装包执行的什么内容，转码结果输出到命令行窗口输出
基本语法如下：
语法一：
语法二：
语法三：
ES6学习（一）— Babel转码器的使用和配置相关推荐
- 学习笔记—babel转码器，babel是什么
babel 转码器 es6是2015年6月开始正式创立,所以一些老浏览器并不能解析es6的语法,babel转码器应运而生,可以将es6的代码转译为es5代码. 安装babel: npm install ...
- es6 Babel 转码器对修饰器的支持
Babel 转码器对修饰器的支持 目前,Babel 转码器已经支持 Decorator. 首先,安装babel-core和babel-plugin-transform-decorators.由于后者包 ...
- es6 babel转码器安装配置
es6 babel转码器安装配置 例如:桌面上新建个文件夹es6,文件夹里新建一个文件es6.js. 打开小黑窗进入文件夹.(windows要以管理员的方式打开cmd) 1.先全局安装babel-cl ...
- ES6转码(编译)工具——Babel转码器、Traceur转码器
当ES6不兼容时,需要用到转码工具 1.Babel转码器: Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行. 这意味着,你可以用ES6的方式编写程序,又不用 ...
- 常见的ES6转码(编译)工具——Babel转码器、Traceur转码器
在浏览器里面如何使用? 现在ES6的使用也是一个新趋势,下面就来讲解转码的常见方法 当ES6不兼容时,需要用到转码工具 1.Babel转码器: Babel是一个广泛使用的ES6转码器,可以将ES6代码 ...
- 项目中配置Babel转码器的详细教程
先简单说一下Babel吧 Babel是一个ES6转码器,可以将ES6代码转为ES5代码 此篇教程是在学习阮老师的<ES6标准入门>时,不会npm的学习总结 在阮老师的教程上具体补充,通过以 ...
- npm（了解）+Babel转码器+模块化+webpack打包
目录 介绍 设置镜像导入依赖 其他命令 Babel转码器 模块化 es6怎么做模块化 webpack webpack的使用 介绍 一个包的管理工具,类似与Maven,用于前端中管理JS的依赖 查看版本 ...
- Babel转码器详解
Babel转码器详解 Babel是一个广为使用的ES6转码器,可以将ES6代码转为ES5代码,从而在浏览器或其他环境运行.这意味着可以用ES6的方式编写程序而不用担心环境是否支持 Babel的配置文件 ...
- 解决VScode安装Babel转码器报错：无法将“cnpm“项识别为cmdlet\函数、脚本文件或可运行程序的名称的问题
解决VScode安装Babel转码器报错:无法将"cnpm"项识别为cmdlet\函数.脚本文件或可运行程序的名称的问题 报错结果如下: 解决方案 第一步:安装npm 点我安装np ...
最新文章
- 【Python教程】类及对象教程
- linux服务器静态ip,Ubuntu Linux系统下设置静态IP的方法
- C# AE放大缩小地图全局显示功能
- as3中使用字符串调用函数。
- Google搜索技巧总结
- php第三节（运算符）
- c语言链表桶排序,【排序】图解桶排序
- AutoCAD2018_输出与打印
- windows 注册表固定桌面壁纸
- 帆软报表参数传给网络报表_自定义报表之自定义参数界面
- 网线传输速度测试_「网络速度测试」网络速度测试 - seo实验室
- Nginx服务优化与防盗链
- springcloudAlibaba+dubbo线程拥堵Thread pool is EXHAUSTED
- Could not run ‘aten::slow_conv3d_forward‘ with arguments from the ‘CUDA‘ bac
- 从Darry Ring看奢侈品该如何玩转互联网思维
- Sentence Centrality Revisited for Unsupervised Summarization
- Android基本界面元素的使用与讲解
- codeblocks的官网下载与安装
- android立体3D效果_Android实现八大行星绕太阳3D旋转效果
- memset()函数怎么用？