使用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

时间: 2024-10-29 19:05:40

使用babel转码器,让浏览器支持es6语法的相关文章

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

为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器若没有更新版本,或者新版本中没有对ES6的特性进行兼容,那么浏览器肯定无法识别我们的ES6代码,好比浏览器根本看不懂我写的let和const是什么东西?只能报错了.这就是浏览器对ES6的兼容性问题. 好消息 哪里有灾难,哪里就有勇士和救兵,针对ES6的兼容性问题,很多团队为此开发出了多种语法解析转换工具,把我们写的ES6语法转换成ES5,相当于

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

ES6简介 Babel转码器 Nodejs中使用ES6 WebPack中使用ES6及Babel转码插件 一.ES6简介与转码  1.1一个常见的问题,ECMAScript和JavaScript到底是什么关系? 1996年11月,JavaScript的创造者——Netscape公司,决定将JavaScript提交给国际标准化组织ECMA,希望JavaScript这种语言能够成为国际标准. 1997年,ECMA发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言

常见的ES6转码(编译)工具——Babel转码器、Traceur转码器

在浏览器里面如何使用?现在ES6的使用也是一个新趋势,下面就来讲解转码的常见方法当ES6不兼容时,需要用到转码工具1.Babel转码器: Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行. 这意味着,你可以用ES6的方式编写程序,又不用担心现有环境是否支持. // 转码前 input.map(item => item + 1); // 转码后 input.map(function (item) { return item + 1; }); 上面的原始代码

Babel 转码器 § es6转换es5

Babel 转码器 § es6转换es5 实时转码 /  Repl  -babel-node / babel-register(自动转码引入babel-register模块) 配置文件.babelrc 1.Babel 的配置文件是.babelrc,存放在项目的根目录下.使用 Babel 的第一步,就是配置这个文件. 该文件用来设置转码规则和插件,基本格式如下. { "presets": [], "plugins": [] } 2.presets字段设定转码规则,官方

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

node本身并不支持es6语法,我们通常在vue项目中使用es6语法,是因为,我们使用babel做过处理, 为了让项目支持es6语法,我们必须同时使用babel 去启动我们的程序,所以再启动程序中加 --exec babel-node,让node 和babel-node同时启动程序 需要在package.json文件夹中 "scripts": { "dev": "cross-env NODE_ENV=development nodemon server/i

1.Babel转码器

为什么要使用Babel? 在当代环境中虽然对ES6的支持越来越好,但是大多数还是不支持ES6,这时候我们就需要把已经写好的ES6代码转换成ES5,而Babel就是将ES6转化成ES5的转码器,被广泛使用. 举个栗子: // 转码前 input.map(item => item + 1); // 转码后 input.map(function (item) { return item + 1; }); 配置文件 .babelrc .babelrc是babel的配置文件,放在项目的根目录下,比如现有的

es6 babel转码器安装配置

例如:桌面上新建个文件夹es6,文件夹里新建一个文件es6.js.(iOS系统里安装的,windows还没安装过) 打开小黑窗进入文件夹.(windows要以管理员的方式打开cmd) 1.先全局安装babel-cli,输入命令 sudo npm install babel-cli -g (windows去掉sudo) 2.输入cd Desktop/es6 ; ---(进去文件夹) 3.输入 npm init: 一路回车键 ---(引导你创建一个package.json文件,包括名称.版本.作者这

浏览器支持ES6

原文:https://blog.csdn.net/u012863664/article/details/72813941 第一步:写了一个导出模块 export.js var name = "林玖" var age = 18 var say = function(){ console.log('你好啊!') } // 批量导出 export {name,age,say} 第二步:写了一个导入模块 import.js,导入了export中的属性和方法 import {name,age,s

vscode 支持es6语法

在首选项中 设置: "jshint.enable": false, 在根目录中建立eslintrc.yml parser: babel-eslint parserOptions: ecmaFeatures: jsx: true modules: true sourceType: module plugins: - babel - react env: browser: true es6: true node: true commonjs: true globals: __DEV__: