当前位置: 首页 > 编程笔记 >

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

丌官凯康
2023-03-14
本文向大家介绍让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, 支持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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍Webpack4 使用Babel处理ES6语法的方法示例,包括了Webpack4 使用Babel处理ES6语法的方法示例的使用技巧和注意事项,需要的朋友参考一下 修改 index.js 内容,写一些 ES6 的语法: ES6 很强大,但目前并不是所有的浏览器都支持,所以需要用到 Babel,让旧的浏览器或环境中将 ES6 代码转换为向后兼容版本的 JavaScript 代码。 来试一

  • Babel 的社区非常庞大并且增长速度很快,伴随着我们成长的同时我们希望保证人们总能获取他们需要的所有资源。 所以我们提供了数种途径来提供支持。 谨记在所有的这些沟通渠道里我们都共同遵守一套行为准则。 破坏准则的行为会被处理。 所以请阅读它并在与他人互动时注意自己的行为。 同时我们也在寻求发展一个自我支持式的社区,为那些始终热诚奉献的人们。 如果别人问的问题你恰好知道答案,请不吝花费几分钟帮帮他们

  • 本文向大家介绍JavaScript让Textarea支持tab按键的方法,包括了JavaScript让Textarea支持tab按键的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JavaScript让Textarea支持tab按键的方法。分享给大家供大家参考。具体实现方法如下: 希望本文所述对大家的javascript程序设计有所帮助。

  • 本文向大家介绍让CodeIgniter的ellipsize()支持中文截断的方法,包括了让CodeIgniter的ellipsize()支持中文截断的方法的使用技巧和注意事项,需要的朋友参考一下 CodeIgniter的Text Helper有一个ellipsize()方法,用来过滤HTML标签并且截断文字十分好用。但是它对中文支持的特别不好,在中文中使用就有乱码出现。 下面有网友将functio

  • 本文向大家介绍让Nginx支持shtml格式的配置方法,包括了让Nginx支持shtml格式的配置方法的使用技巧和注意事项,需要的朋友参考一下 对于静态网站有公共头尾需要包含,又不想用动态网页编写的,那么shtml是最佳选择了。shtml可以包含指定文件到文档中如同PHP中的include功能类似。 Nginx本身已经支持了shtml格式文件解析,但默认是不开启的,需要手动开启。 打开Nginx配

  • 本文向大家介绍sublime安装支持go和html的插件,包括了sublime安装支持go和html的插件的使用技巧和注意事项,需要的朋友参考一下 其实这次主要要说一些go语言的开发,这个先利器吧,然后再说go语言!这次我们说的是sublime这个编辑器,这个东西是我见过小而且功能强悍并且界面灰常美观的一个东西了,用了很长一段时间感觉很不错,而且他的平台支持不错,支持linux macos 和wi