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语法的更多相关文章

  1. 如何让浏览器支持ES6语法,步骤详细到小学生都能看懂!

    为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器若没有更新版本,或者新版本中没有对ES6的特性 ...

  2. ES6入门一:ES6简介及Babel转码器

    ES6简介 Babel转码器 Nodejs中使用ES6 WebPack中使用ES6及Babel转码插件 一.ES6简介与转码  1.1一个常见的问题,ECMAScript和JavaScript到底是什 ...

  3. Babel 转码器 § es6转换es5

    Babel 转码器 § es6转换es5 实时转码 /  Repl  -babel-node / babel-register(自动转码引入babel-register模块) 配置文件.babelrc ...

  4. Babel转码器

    Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行.这意味着,你可以用ES6的方法 编写程序,又不用担心现在环境是否支持.

  5. ES6转ES5(Babel转码器)

    ES6转ES5(Babel转码器) 前提:必须在VScode中已经安装了Node.js 官网:https://nodejs.org/en/ 一.安装命令行转码工具 npm install --glob ...

  6. 华为手机自带浏览器不支持 ES6 语法

    原文地址:https://caochangkui.github.io/huawei-es6/ 华为手机自带浏览器对 es6 语法的支持度极差,哪怕最新的荣耀10 手机也有该毛病!所以,移动端项目开发中 ...

  7. nuxt 脚手架创建nuxt项目中不支持es6语法的解决方案

    node本身并不支持es6语法,我们通常在vue项目中使用es6语法,是因为,我们使用babel做过处理, 为了让项目支持es6语法,我们必须同时使用babel 去启动我们的程序,所以再启动程序中加 ...

  8. 让intellij idea 14 支持ES6语法

    用eclipse做前端开发,用到了webpack,结果各种依赖导致软件卡的一比,简直不能动!虽然在同事的帮忙下,修改了一下配置,但仍然卡的没脾气.改用intellij idea 14解决了卡的问题,但 ...

  9. Webpack 4.x 默认支持 ES6 语法

    Webpack 4.x 默认支持 ES6 语法 Q: 为什么 webpack4 默认支持 ES6 语法的压缩? A: terser 里面实现了 ES6 语法的 AST解析. webpack 4 里使用 ...

随机推荐

  1. Postfix+Dovecot+MySQL搭建邮件服务器

    网上有很多使用Postfix搭建邮件服务器的文章,但目前貌似没有看到较为完整的一篇.本例将尝试在Ubuntu系统中使用Postfix+Dovecot+MySQL搭建邮件服务器. 说到邮件服务器,网上有 ...

  2. SharpZipLib 文件/文件夹 过滤

    这里就不说压缩/解压了.网上教程太多. 主要说一下,解压时,如何过滤某些文件/文件夹 参考地址:https://github.com/icsharpcode/SharpZipLib/wiki/Fast ...

  3. Gym 102028J 扫描线/二维差分 + 解方程

    题意:有一个二维平面,以及n个操作,每个操作会选择一个矩形,使得这个二维平面的一部分被覆盖.现在你可以取消其中的2个操作,问最少有多少块地方会被覆盖? 思路:官方题解简洁明了,就不细说了:https: ...

  4. 【CSS】text-align:justify 的使用

    工作需要写一个全是文本的网页,规范格式的时候发现很多css属性不是很熟悉,比如text-align:justify. 这个是两端对齐,css3中新增了text-justify属性 语法:text-ju ...

  5. java如何生成一个0-100的随机整数?

    public class Test {public static void main(String[] args) {int num=(int)(Math.random()*101);System.o ...

  6. 影响Acorn for Mac图像打印质量的因素有什么?怎样处理这些因素才能得到打印效果最佳的图像?

    Acorn for Mac是Mac OS平台上一款比较不错的图像处理软件.acorn mac版用起来都很像神器 Photoshop,是的,它的设计目标就是成为 Photoshop 的轻量替代者,拥有所 ...

  7. PHP ftp_nb_fget() 函数

    定义和用法 ftp_nb_fget() 函数从 FTP 服务器上下载一个文件并保存到本地一个已经打开的文件中.(无阻塞) 该函数返回下列值之一: FTP_FAILED(发送/获取失败) FTP_FIN ...

  8. 线段树区间合并——cf1217E

    /* 定义:多重集s的元素和是sum,对于sum的第i位为x,如果s里找不到第i位也是x的元素,那么称这个多重集为bad, 现在给定一个 序列a 两种操作 1 i x:将序列第i个元素改为x 2 l ...

  9. console.log(([])?true:false); console.log(([]==false?true:false)); console.log(({}==false)?true:false)

    下面是题目的类型转换结果: Boolean([]); //true Number([]); //0 Number({}); // NaN Number(false); //0 因此: console. ...

  10. mysql|tomcat|nginx|redis在docker中的部署

    MySQL部署 拉取MySQL镜像 docker pull mysql 查看镜像 创建MySQL容器 docker run -di --name pinyougou_mysql -p 33306:33 ...