使用babel转码器,让浏览器支持es6语法
ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,可是很多浏览器并不支持es6语法,所以我们需要一个转码工具,
把es6的语法转换成浏览器支持的javascript,Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码。在babel的安装设置里我选用的是使用node
来进行安装。
1、在你的项目下输入命令:
npm install --save-dev babel-core
按回车健,运行如下:

2.配置文件.babelrc
在项目根目录下建立.babelrc 文件,因为我的是window系统,在更改文件名时会提示:

解决这个问题的办法是把文件名更改成".babelrc."。注意,前后都有".",。
配置.babelrc文件如下:
{
"presets": [],
"plugins": []
}
3、输入转换成es5规则的命令:
# ES2015转码规则
$ npm install --save-dev babel-preset-es2015
4、输入react 语法规则命令(用不到react的可以不用):
npm install --save-dev babel-preset-react
5、转换规则命令:
# ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3
然后将这些规则写入 .babelrc文件:
{
"presets": [
"es2015",
"react",
"stage-2"
],
"plugins": []
}
6、命令行转码babel-cli
npm install --save-dev babel-cli
基本用法如下:
# 转码结果输出到标准输出
$ babel example.js # 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js # 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib # -s 参数生成source map文件
$ babel src -d lib -s
然后,改写package.json。
{
// ...
"devDependencies": {
"babel-cli": "^6.0.0"
},
"scripts": {
"build": "babel src -d lib"
},
}
转码的时候就可以使用如下命令:
npm run build
参考文献:http://es6.ruanyifeng.com/#docs/intro
使用babel转码器,让浏览器支持es6语法的更多相关文章
- 如何让浏览器支持ES6语法,步骤详细到小学生都能看懂!
为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器若没有更新版本,或者新版本中没有对ES6的特性 ...
- ES6入门一:ES6简介及Babel转码器
ES6简介 Babel转码器 Nodejs中使用ES6 WebPack中使用ES6及Babel转码插件 一.ES6简介与转码 1.1一个常见的问题,ECMAScript和JavaScript到底是什 ...
- Babel 转码器 § es6转换es5
Babel 转码器 § es6转换es5 实时转码 / Repl -babel-node / babel-register(自动转码引入babel-register模块) 配置文件.babelrc ...
- Babel转码器
Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行.这意味着,你可以用ES6的方法 编写程序,又不用担心现在环境是否支持.
- ES6转ES5(Babel转码器)
ES6转ES5(Babel转码器) 前提:必须在VScode中已经安装了Node.js 官网:https://nodejs.org/en/ 一.安装命令行转码工具 npm install --glob ...
- 华为手机自带浏览器不支持 ES6 语法
原文地址:https://caochangkui.github.io/huawei-es6/ 华为手机自带浏览器对 es6 语法的支持度极差,哪怕最新的荣耀10 手机也有该毛病!所以,移动端项目开发中 ...
- nuxt 脚手架创建nuxt项目中不支持es6语法的解决方案
node本身并不支持es6语法,我们通常在vue项目中使用es6语法,是因为,我们使用babel做过处理, 为了让项目支持es6语法,我们必须同时使用babel 去启动我们的程序,所以再启动程序中加 ...
- 让intellij idea 14 支持ES6语法
用eclipse做前端开发,用到了webpack,结果各种依赖导致软件卡的一比,简直不能动!虽然在同事的帮忙下,修改了一下配置,但仍然卡的没脾气.改用intellij idea 14解决了卡的问题,但 ...
- Webpack 4.x 默认支持 ES6 语法
Webpack 4.x 默认支持 ES6 语法 Q: 为什么 webpack4 默认支持 ES6 语法的压缩? A: terser 里面实现了 ES6 语法的 AST解析. webpack 4 里使用 ...
随机推荐
- 忘记mysql超户密码的解决方法
本文章针对用yum安装的mariadb数据库,如果是tar包安装的mysql数据库,只是数据库命令的关闭启动方式不同而已. 方法一:[root@localhost ~]# killall -u mys ...
- day02 python流程控制 while循环 格式化输出 运算符 编码
day02 python 一.循环: while循环 while expression: while_suite 1.break 停止当前循环(如果多个循环嵌套, ...
- Centos7命令行安装Tomcat以及配置防火墙开放端口
[转载]Centos 7 yum安装tomcat 命令: 系统环境CentOS Linux release 7.2.1511 (Core) 一.搭建准备:1.先到tomcat官网https://tom ...
- js 循环json
var json= { "Type": "Coding", "Height":100 }; for (var key in json) { ...
- 【性能-windows端口限制】TPS上不去,应用无压力只有cpu5%,tomcat线程最高1500,增大并发出现connect 报错
现象:TPS上不去,应用无压力只有cpu5%,tomcat线程够用最高1500,增大并发出现connect 报错 原因:windows端口不够用了,或者不够回收了 解决方案: 1.运行-regedit ...
- Java实体与Json操作类
import com.fasterxml.jackson.core.JsonProcessingException; import com.fasterxml.jackson.databind.Jav ...
- Linux系统上安装MySQL 5.5prm
http://www.cnblogs.com/sunson/articles/2172086.html
- luoguP1313 [NOIp2011]计算系数 [组合数学]
题目描述 给定一个多项式(by+ax)^k,请求出多项式展开后x^n*y^m 项的系数. 输入输出格式 输入格式: 输入文件名为factor.in. 共一行,包含5 个整数,分别为 a ,b ,k , ...
- H5项目(基于vue框架)常见问题及注意事项
参考: https://blog.csdn.net/u012377333/article/details/52326158 1.前端中所有的按钮,点击后发送报文的标签,都必须加上 去重功能.防止重复发 ...
- .gitignore 文件使用说明
我们在使用 Git 进行版本控制的时候,有些文件是无需纳入 Git 管理的,通常都是些自动 生成的文件,像日志或者编译过程中创建的文件.我们可以创建一个名为 .gitignore 的文件,列出要忽略的 ...