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使用的更多相关文章

  1. babel presets stage-x

    在一些新框架的代码中,常基于es6/7标准来书写代码.鉴于这些标准被没有被浏览器广泛支持,我们一般使用babel来将使用e6/7标准书写的代码降级编译(或者说转译)为浏览器可解析的es4/5代码. 以 ...

  2. ES6转换器之Babel

    ES6部分功能没有支持,所以想学习ES6,得先有个转换器,就是将ES6的代码转换为ES5. 我这里用的是Gulp + Bable的形式来将ES6转换为ES5的. 前提: (1).Gulp和Bable都 ...

  3. Babel:JavaScript编译器

    一.介绍: Babel是一个Javascript编译器,可以将ES6语法转换成ES5. 这意味着,你可以现在就用ES6编写程序,而不用担心现有环境是否支持.下面是一个例子: //转码前: input. ...

  4. 学习 React(jsx语法) + es2015 + babel + webpack

    视频学习地址: http://www.jtthink.com/course/play/575 官方地址 https://facebook.github.io/react/ 神坑: 1.每次this.s ...

  5. Sublime插件支持Sass编译和Babel解析ES6 & .sublime-build文件初探

    用Sublime Text蛮久了,配置配来配去的,每次换电脑都得重头再配过,奈何人老了脑子不中用了,得好好整理一些,下次换电脑就有得参考了.. 同事说,他的WebStorm简直太方便,自身集成了很多方 ...

  6. Babel下的ES6兼容性与规范

    前端开发 Babel下的ES6兼容性与规范   ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问 ...

  7. 【前端】在Gulp中使用Babel

    Install $ npm install --save-dev gulp-babel babel-preset-es2015 用法1: const gulp = require('gulp'); c ...

  8. 使用 Babel + React + Webpack 搭建 Web 应用

    话不说直接上正题. 环境搭建 Babel--目前浏览器对于ES6的语法解析支持度还不高,所以要通过转码在编译,所以在使用ES6之前要安装Babel,之前安装的时候遇到了一些问题但是没有全部记录下来,现 ...

  9. Babel 学习

    一,为了更明白地使用Babel, 先了解Babel 的发展过程. 现在Babel的版本是6, 相对于以前的版本, 它做了重大更新: 1, 模块化:所有的内部组件都变成了单独的包.打开Babel在Git ...

  10. 利用Babel来转化你的ES2015脚本初步

    我们在前面已经安装和学习过babel 安装babel-cli 这是babel解释器的客户端主程序 npm install -g babel-cli 安装”编译”插件(babel的JSX语法转换器) n ...

随机推荐

  1. vue重构--H5--canvas实现粒子时钟

    上一篇文章讲解了如何用js+canvas实现粒子时钟,本篇文章 ,主要是使用vue重构,让它在vue也能使用. 我们使用简单的方式重构,不使用vue工程,先加入vue cdn的地址,如下: <s ...

  2. msmpeng.exe阻止移动硬盘弹出

    MsMpEng.exe 占用 该进程是微软反恶意软件服务的一个可执行文件,用户无法手动停止该进程. 首先运行   eventvwr.msc打开事件查看器,找到警告信息,查看是什么进程在阻止硬盘弹出. ...

  3. java中对象属性可以是另外一个对象或对象的参考

    7.对象的属性可以是另外一个对象或对象的参考   通过这种方法可以迅速构建一个比较大的系统. class Motor {     Light[] lights;     Handle left, ri ...

  4. Struct2中三种获取表单数据的方式

    1.使用ActionContext类 //1获取ActionContext对象 ActionContext context = ActionContext.getContext(); //2.调用方法 ...

  5. MongoDB 数据库开发规范

    MongoDB 数据库开发规范 转载自-落雨_ https://developer.aliyun.com/article/255536 简介: mongoDB库的设计 mongodb数据库命名规范:d ...

  6. JavaWeb项目端口占用问题

    今天使用springboot编写项目的时候安装了一个插件,重启了idea,但是项目忘记终止连接了,再打开idea启动项目发现端口被占用 控制台输出: ************************* ...

  7. 微信开发者工具:Cannot read property 'addEventListener' of undefined 报错

    点击右上角详情 有个调试基础库 当前为2.17.0 调为2.14.1 解决 如果对您有帮助,希望对面的你能点赞加评论!拜上! 若有bug还请告知,万分感谢!

  8. Typora+PicGO+Gitee实现图床功能

    Typora+PicGO+Gitee实现图床功能 版本 typora(0.9.86) PicGo(2.3.0) 主要参考链接 出现问题就先看看这个 问题一 打开PicGo后安装github插件会一直安 ...

  9. 001_iBase4J学习之环境搭建

    目录 序言 正文 第一关.拉取项目 第二关.导入数据库 第三关.修改 JDBC 配置文件 第四关.环境搭建,修改 nginx 设置 第五关.添加地址白名单 尾声 序言 大家好,我是白墨! 本次的目标是 ...

  10. cookie和localstorge、sessionStorge的区别

    一.背景由来 cookie原来是用来网络请求携带用户信息的,只不过在HTML5出现之前,前端没有本地存储的方法,只能使用cookie代替 localstorge.sessionStorge是html5 ...