babel使用
Babel转码器
Babel定义
Babel 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码,从而在老版本的浏览器执行
Babel安装
仅需要在项目文件下安装
npm install --save-dev @babel/core
Babel转码流程
一:配置.babelrc文件
创建.babelrc文件设置转码规则和插件
格式:{
"presets": [],//转码规则
"plugins": []
}
二:安装转码规则
presets字段设定转码规则
转码规则:
npm install --save-dev @babel/preset-env //最新规则
npm install --save-dev @babel/preset-react //react 转码规则
三:将转码规则加入presets字段
{
"presets": [
"@babel/env",
"@babel/preset-react"
],
"plugins": []
}
四:命令行转码
1.安装babel命令行工具
$ npm install --save-dev @babel/cli
2.转码用法
npx babel example.js //转码js文件
npx babel example.js -o compiled.js //将js文件转码到指定文件输出
npx babel src -d 文件夹名 //转码整个文件夹
Babel转码注意事项
Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise等全局对象Babel不会转码
Babel可转码的语法可参考(https://www.babeljs.cn/)Babel官网
babel使用的更多相关文章
- babel presets stage-x
在一些新框架的代码中,常基于es6/7标准来书写代码.鉴于这些标准被没有被浏览器广泛支持,我们一般使用babel来将使用e6/7标准书写的代码降级编译(或者说转译)为浏览器可解析的es4/5代码. 以 ...
- ES6转换器之Babel
ES6部分功能没有支持,所以想学习ES6,得先有个转换器,就是将ES6的代码转换为ES5. 我这里用的是Gulp + Bable的形式来将ES6转换为ES5的. 前提: (1).Gulp和Bable都 ...
- Babel:JavaScript编译器
一.介绍: Babel是一个Javascript编译器,可以将ES6语法转换成ES5. 这意味着,你可以现在就用ES6编写程序,而不用担心现有环境是否支持.下面是一个例子: //转码前: input. ...
- 学习 React(jsx语法) + es2015 + babel + webpack
视频学习地址: http://www.jtthink.com/course/play/575 官方地址 https://facebook.github.io/react/ 神坑: 1.每次this.s ...
- Sublime插件支持Sass编译和Babel解析ES6 & .sublime-build文件初探
用Sublime Text蛮久了,配置配来配去的,每次换电脑都得重头再配过,奈何人老了脑子不中用了,得好好整理一些,下次换电脑就有得参考了.. 同事说,他的WebStorm简直太方便,自身集成了很多方 ...
- Babel下的ES6兼容性与规范
前端开发 Babel下的ES6兼容性与规范 ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问 ...
- 【前端】在Gulp中使用Babel
Install $ npm install --save-dev gulp-babel babel-preset-es2015 用法1: const gulp = require('gulp'); c ...
- 使用 Babel + React + Webpack 搭建 Web 应用
话不说直接上正题. 环境搭建 Babel--目前浏览器对于ES6的语法解析支持度还不高,所以要通过转码在编译,所以在使用ES6之前要安装Babel,之前安装的时候遇到了一些问题但是没有全部记录下来,现 ...
- Babel 学习
一,为了更明白地使用Babel, 先了解Babel 的发展过程. 现在Babel的版本是6, 相对于以前的版本, 它做了重大更新: 1, 模块化:所有的内部组件都变成了单独的包.打开Babel在Git ...
- 利用Babel来转化你的ES2015脚本初步
我们在前面已经安装和学习过babel 安装babel-cli 这是babel解释器的客户端主程序 npm install -g babel-cli 安装”编译”插件(babel的JSX语法转换器) n ...
随机推荐
- 怎样用JavaScript和HTML5 Canvas绘制图表
原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...
- 微信小程序如何把接口调用成功的回调函数返回的参数return出去?(promise就可以解决)
举个栗子//获取应用实例 //const app = getApp() //const util = require('../../utils/util.js') //const sign = uti ...
- linux设备管理之主设备号与次设备号
主设备号和次设备号 一个字符设备或者块设备都有一个主设备号和次设备号.主设备号和次设备号统称为设备号.主设备号用来表示一个特定的驱动程序.次设备号用来表示使用该驱动程序的其他设备.(主设备号和控制这类 ...
- 通过nfs将centos目录挂载到windows 系统的磁盘上
环境:centos8,windows7 1.在centos上安装nfs服务 yum -y install nft-utils 2.启动nfs服务 systemctl start nfs-server ...
- 以ARM和RISC-V为内核的单片机写寄存器
我以为这是个很简单的问题,没想到还有一些初学者不会.可能他们也是跟我一样是直接学的如何操作单片机并没有学微机原理么. ARM和RISC-V的机器的系统架构都是哈佛结构的,意思是程序存储器.数据存储器和 ...
- 地铁系统ajax人性化操作
根据选择的城市不同,显示的地铁系统和线路图也不同
- addEventListener() 和 removeEventListener() 简介
DOM方法 addEventListener() 和 removeEventListener() 是用来分配和删除事件的函数 这两个方法都需要三个参数 分别为: 事件名称(String) ...
- 新手小白入门C语言第五章:C存储类
一 .存储类 在理解C的存储类之前,首先要搞懂的概念有:作用域.生存周期.连接属性 C中的存储类说明符实际上是上述属性的不同组合 作用域:一个C变量的作用域可以是 代码块作用域(在函数内部代码块中定义 ...
- Google广告批量投放脚本
该脚本文件是一个转化文件,将编辑的Google投广告模板转化成Google批量投放广告的脚本文件,实现批量投放广告,节省投广时间.PS:要与相应的模板结合使用,投广告模板在本人博客的文件中,可以下载. ...
- PHP入门-Window 下利用Nginx+PHP 搭建环境
前言 最近公司有个PHP项目需要开发维护,之前一直都是跟着巨硬混的,现在要接触PHP项目.学习一门新语言之前,先搭建好环境吧,鉴于公司项目是基于php 7.1.33 版本的,所以以下我使用的都是基于这 ...