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


Posted in NodeJs onJuly 31, 2017

要使用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%哦 :

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

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

结果应该是这样的:

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
你一定会收藏的Nodejs代码片段
Feb 04 NodeJs
nodejs redis 发布订阅机制封装实现方法及实例代码
Dec 15 NodeJs
3分钟快速搭建nodejs本地服务器方法运行测试html/js
Apr 01 NodeJs
详解Nodejs之静态资源处理
Jun 05 NodeJs
用nodejs实现json和jsonp服务的方法
Aug 25 NodeJs
nodejs实现套接字服务功能详解
Jun 21 NodeJs
nodejs基础之多进程实例详解
Dec 27 NodeJs
Nodejs中的require函数的具体使用方法
Apr 02 NodeJs
nodejs log4js 使用详解
May 31 NodeJs
NodeJs实现简易WEB上传下载服务器
Aug 10 NodeJs
nodejs文件夹深层复制功能
Sep 03 NodeJs
浅谈JS和Nodejs中的事件驱动
May 05 NodeJs
浅谈nodejs中的类定义和继承的套路
Jul 26 #NodeJs
nodejs之get/post请求的几种方式小结
Jul 26 #NodeJs
nodejs前端自动化构建环境的搭建
Jul 26 #NodeJs
nodejs body-parser 解析post数据实例
Jul 26 #NodeJs
深入解析nodejs HTTP服务
Jul 25 #NodeJs
NodeJS使用七牛云存储上传文件的方法
Jul 24 #NodeJs
nodejs 搭建简易服务器的图文教程(推荐)
Jul 18 #NodeJs
You might like
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
Bootstrap学习笔记之css样式设计(1)
2016/06/07 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
Vue2.0权限树组件实现代码
2017/08/29 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
node.js到底要不要加分号浅析
2018/07/11 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
2018/08/13 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
Vue中实现权限控制的方法示例
2019/06/07 Javascript
ES10的13个新特性示例(小结)
2019/09/23 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
python33 urllib2使用方法细节讲解
2013/12/03 Python
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
Python字符串格式化
2015/06/15 Python
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
20行python代码实现人脸识别
2019/05/05 Python
Python 定义只读属性的实现方式
2020/03/05 Python
html5简介_动力节点Java学院整理
2017/07/07 HTML / CSS
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
PHP经典面试题
2016/09/03 面试题
外贸业务员岗位职责
2013/11/24 职场文书
2014年社区植树节活动方案
2014/02/28 职场文书
中秋节主持词
2014/04/02 职场文书
贫困生助学金感谢信
2015/01/21 职场文书
募捐感谢信
2015/01/22 职场文书
2015年法务工作总结范文
2015/05/23 职场文书
使用feign服务调用添加Header参数
2021/06/23 Java/Android
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技
Python基本的内置数据类型及使用方法
2022/04/13 Python
Android移动应用开发指南之六种布局详解
2022/09/23 Java/Android