让nodeJS支持ES6的词法----babel的安装和使用方法

要使用Babel， 我们需要nodeJS的环境和npm， 主要安装了nodeJS， npm就默认安装了 ， 现在安装nodeJS很简单了， 直接下载安装就好了；

安装es-checker

在使用Babel之前 ， 我们要先检测一下当前node对es6的支持情况， 我们使用先es-checker， 命令行下执行：

运行下面代码

npm -g install es-checker

es-checker安装完毕以后， 命令行执行：es-checker ， 如下图， 我的node环境版本是v4.4.3， 支持64%哦 ：

babel的安装

所以我们来安装babel吧， 有了babel， 能够使用更多高级词法！

首先新建一个工作目录， 然后创建一个package.json的文件， 内部内容为：

运行下面代码

{
 "name": "my-project",
 "version": "1.0.0",
 "devDependencies": {
 }
}

然后再打开cmd(命令行), 在工作目录下执行命令安装babel-cli：

运行下面代码

npm --save-dev install babel-cli

再安装一个全局的babel-cli：

运行下面代码

npm -g install babel-cli

接着在工作目录创建一个名字为.babelrc的文件， 文件内容入如下（ 要注意window系统下创建这种文件系统会提示你：“必须键入文件名” ， 你可以找别的方式去创建， 我是在开发工具的工程目录中把这个文件创建出来的）：

运行下面代码

 {
  "presets": [
   "es2015"
  ],
  "plugins": []
 }

安装babel-preset-es2015

还是工作目录， 然后再安装babel-preset-es2015：

运行下面代码

npm install --save-dev babel-preset-es2015

到目前为止babel算是安装完毕了：

测试es6代码

创建一个test.js的文件， 8键入内容：

运行下面代码

let [a,b,c] = [1,2,3];
console.log(a,b,c);

在当前目录下执行：

运行下面代码

babel-node test

结果应该是这样的：

如果直接用执行node test， 我这边会报异常： SyntaxError: Unexpected token

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • babel基本使用详解

    什么是babel? babel是一个强大的多用途js编译器 点击进入官网 安装babel npm install -g babel-cli npm install --save-dev babel-cli babel配置文件 通过.babelrc来表示 { "presets" : [ ], "plugins" : [ ] } presets用来存放一些预设 plugins用来存放一些插件 命令行的简单使用 我们可以通过 -o (--out-file) 参数来编译一个

  • ES6通过babel转码使用webpack使用import关键字

    使用了babel转码,使用import和export的时候,在浏览器运行代码的时候,提示 Uncaught ReferenceError: require is not defined babel只是个翻译,假设a.js 里 import 了 b.js 对a.js进行转码,只是翻译了a.js,并不会把b.js的内容给读取合并进来 如果想在最终的某一个js里,包含 a.js,b.js 的代码,那就需要用到打包工具 也就是webpack等工具了 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

  • 让nodeJS支持ES6的词法----babel的安装和使用方法

    让nodeJS支持ES6的词法----babel的安装和使用方法

    要使用Babel, 我们需要nodeJS的环境和npm, 主要安装了nodeJS, npm就默认安装了 , 现在安装nodeJS很简单了, 直接下载安装就好了: 安装es-checker 在使用Babel之前 , 我们要先检测一下当前node对es6的支持情况, 我们使用先es-checker, 命令行下执行: 运行下面代码 npm -g install es-checker es-checker安装完毕以后, 命令行执行:es-checker , 如下图, 我的node环境版本是v4.4.3,

  • JavaScript中ES6 Babel正确安装过程

    JavaScript中ES6 Babel正确安装过程

    本文介绍Babel6.x的安装过程~首先呢,可以使用Babel在线转换 https://babeljs.io/repl/ 然后进入主题:安装Babel(命令行环境,针对Babel6.x版本) 1.首先安装babel-cli(用于在终端使用babel) npm install -g babel-cli 2.然后安装babel-preset-es2015插件 npm install --save babel-preset-es2015 注:Babel5版本默认包含各种转换插件,然而Babel6.x相

  • 让mocha支持ES6模块的方法实现

    mocha是比较常用的node测试框架,但是只支持commonjs模块,要让mocha支持ES6模块,需要babel的帮助. 书写本文时用到的工具版本为: babel v7 mocha v6.2 安装依赖 $ npm i -D @babel/cli @babel/core @babel/preset-env @babel/register babel配置 在package.json或.babelrc中添加配置: { "presets": ["@babel/preset-env

  • 解决node终端下运行js文件不支持ES6语法

    最近写一些简单的测试代码时,为了方便直接在node终端执行发现有些ES6语法不支持,记录一下解决方式 现象 新建class.js文件后添加如下代码 // constructer class Person { constructor(name,age,sex) { this.name = name; this.age = age; this.sex = sex; } getInfo() { return `name:${this.name},age:${this.age},sex:${this.s

  • 解决低版本的浏览器不支持es6的import问题

    解决方法: 1. <script type="model" src="game.js"></script> 2. 下载最新版本的chrome浏览器 以上这篇解决低版本的浏览器不支持es6的import问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • idea 设置支持ES6语法的操作

    idea 设置支持ES6语法的操作

    1.点击File→settings: 2.选择Languages & Frameworks下面的JavaScript 选择版本号为ECMAScript 6即可: 补充:idea 修改设置 检测方式为 es6 intellij idea 14不支持ES6语法!javascript 文件内到处飘红 file>settings>Lauguages & Frameworks>javascript 将javascript languages version 修改为 ECMAScri

  • 使用nodejs中httpProxy代理时候出现404异常的解决方法

    在公司中使用nodejs构建代理服务器实现前后台分离,代码不能拿出来,然后出现httpProxy代理资源的时候老是出现404.明明被代理的接口是存在的.代码大概如下: var http = require('http'), httpProxy = require('http-proxy'); var proxy = httpProxy.createProxyServer({}); var server = http.createServer(function(req, res) { proxy.

  • 详解vue-cli+es6引入es5写的js(两种方法)

    学习了vue有一段日子了,vue+es6开发非常好用,vue的插件非常多,很充足,但是还是会用到引入第三方外部js的时候,但是很多人在vue-cli中的.vue文件引入es6会出很多错误,因为我们的代码是es6写的,你引入es5的js当然会出问题,那么而接下来我讲大家讲解一波,怎么引入第三方es5写的 js 方法1: import XX from "路径" Vue.use(XX); 这里的js文件要导出 用export default { Vue.proprtypes.aa=funct

  • nodejs中使用worker_threads来创建新的线程的方法

    简介 之前的文章中提到了,nodejs中有两种线程,一种是event loop用来相应用户的请求和处理各种callback.另一种就是worker pool用来处理各种耗时操作. nodejs的官网提到了一个能够使用nodejs本地woker pool的lib叫做webworker-threads. 可惜的是webworker-threads的最后一次更新还是在2年前,而在最新的nodejs 12中,根本无法使用. 而webworker-threads的作者则推荐了一个新的lib叫做web-wo

  • es6 js 匹配两个数组对象的方法

    es6 js 匹配两个数组对象的方法

    判断两个数组用的value是否相等 this.list = [ { user_type: 0, user_id: 1003, department_id: 1, department_name: "公司xx", mobile: "", realname: "廖xx", com_name: "任公司", label: "廖建平", value: 1003 }, { user_type: 0, user_id:

随机推荐