返回顶部
首页 > 资讯 > 前端开发 > VUE >如何让nodeJS支持ES6的babel
  • 833
分享到

如何让nodeJS支持ES6的babel

2024-04-02 19:04:59 833人浏览 独家记忆
摘要

小编给大家分享一下如何让nodejs支持es6的babel,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!要使用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, 支持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支持ES6的babel”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网VUE频道!

--结束END--

本文标题: 如何让nodeJS支持ES6的babel

本文链接: https://lsjlt.com/news/77518.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 如何让nodeJS支持ES6的babel
    小编给大家分享一下如何让nodeJS支持ES6的babel,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!要使用Babel, 我们...
    99+
    2024-04-02
  • 让nodeJS支持ES6的词法----babel的安装和使用方法
    要使用Babel, 我们需要nodeJS的环境和npm, 主要安装了nodeJS, npm就默认安装了 , 现在安装nodeJS很简单了, 直接下载安装就好了; 安装es-checker 在使用Babel之...
    99+
    2022-06-04
    词法 使用方法 nodeJS
  • nodejs支持es6吗
    本文小编为大家详细介绍“nodejs支持es6吗”,内容详细,步骤清晰,细节处理妥当,希望这篇“nodejs支持es6吗”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。nodejs支持es6。Node.js是针对现...
    99+
    2023-07-04
  • 怎么才能让Node.js支持ES6
    随着前端技术的不断更新和发展,ES6已成为了前端开发中的重要语言之一。而Node.js作为一个基于JavaScript的服务器端开发平台,自然也需要支持ES6的语法。那么,究竟怎么样才能让Node.js支持ES6呢?本文将从以下几个方面来进...
    99+
    2023-05-14
  • webstorm不支持es6如何解决
    这篇文章主要介绍“webstorm不支持es6如何解决”,在日常操作中,相信很多人在webstorm不支持es6如何解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”webs...
    99+
    2024-04-02
  • webpack如何配置支持es6 to es5
    这篇文章将为大家详细讲解有关webpack如何配置支持es6 to es5,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1. 安装webpacknpm inst...
    99+
    2024-04-02
  • vscode不支持es6语法如何解决
    这篇文章主要讲解了“vscode不支持es6语法如何解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vscode不支持es6语法如何解决”吧! ...
    99+
    2024-04-02
  • 如何让deno支持HTTP服务
    这篇文章主要介绍“如何让deno支持HTTP服务”,在日常操作中,相信很多人在如何让deno支持HTTP服务问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何让deno支持H...
    99+
    2024-04-02
  • WebStorm ES6语法支持设置&babel使用及自动编译的示例分析
    这篇文章将为大家详细讲解有关WebStorm ES6语法支持设置&babel使用及自动编译的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、语法支持设置...
    99+
    2024-04-02
  • 如何让IE下支持Html5的placeholder属
    这篇文章将为大家详细讲解有关如何让IE下支持Html5的placeholder属,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 HTML5对Web Form做了许多增强...
    99+
    2024-04-02
  • idea中es6语法不支持如何解决
    这篇文章主要介绍“idea中es6语法不支持如何解决”,在日常操作中,相信很多人在idea中es6语法不支持如何解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”idea中e...
    99+
    2024-04-02
  • 详解如何让Express支持async/await
    随着 Node.js v8 的发布,Node.js 已原生支持 async/await 函数,Web 框架 Koa 也随之发布了 Koa 2 正式版,支持 async/await 中间件,为处理异步回调带来...
    99+
    2022-06-04
    详解 Express await
  • 如何让MYSQL彻底支持中文
    本篇内容主要讲解“如何让MYSQL彻底支持中文”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何让MYSQL彻底支持中文”吧!  先将让slack支持中文,方法...
    99+
    2024-04-02
  • 如何让bootstrap的carousel支持滑动滚屏
    小编给大家分享一下如何让bootstrap的carousel支持滑动滚屏,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!原始的轮播...
    99+
    2024-04-02
  • 如何快速让你的代码支持Cocoapods!
    Show me the code !此次分享的是如何让你的代码框架上传到cocoapods,方便使用!对了,在第一句之前应该介绍cocoapods的背景,但作为iOS developer,不用介绍都知道其重要性,OK,Talk is che...
    99+
    2023-06-04
  • 如何让小程序支持JSX语法
    今天小编给大家分享一下如何让小程序支持JSX语法的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下...
    99+
    2024-04-02
  • Ubuntu如何立即让网络支持nat
    小编给大家分享一下Ubuntu如何立即让网络支持nat,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!立即让网络支持natsudo echo 1...
    99+
    2023-06-27
  • webstorm如何配置支持nodejs并自动补全
    小编给大家分享一下webstorm如何配置支持nodejs并自动补全,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!1.配置支持nodejs配置nodejs支持,博主下载的2017.02的最...
    99+
    2024-04-02
  • 如何让微信小程序支持cookie的方式
    这篇文章主要讲解了“如何让微信小程序支持cookie的方式”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何让微信小程序支持cookie的方式”吧!Intro微信原生的 wx.request...
    99+
    2023-06-26
  • 如何让IE下支持Html5的placeholder属性的插件
    这篇文章将为大家详细讲解有关如何让IE下支持Html5的placeholder属性的插件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 HT...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作