Node.js基础模块babel使用详解

目录
  • 安装配置
  • 使用babel
  • 实际例子
  • 类的转化
  • babel-polyfill

前言：

由于ES6到ES7增加了很多新的语法，新特性的出现使得大家都希望通过新语法来提升自身的开发效率，但在之前的最新的node可能也没有百分之百的支持ES2017的新特性，而且开发者在开发环境和生产环境中的版本一般是不同的，所以新特性的代码可能不能完美的运行在线上环境中，为了解决难题，babel提供一系列的api来将新特性的语法转化成低版本环境中能够运行的代码

安装配置

babel是由一系列的组件构成，所以我们在开发过程中，要从自行配置组件来开始使用babel的功能

我们先来安装一下babel-cli，通过npm运行即可将babel-cli下载到我们的node_modules中

`npm install babel-cli`

使用babel

我们再项目中增加一个名为.babelrc的配置文件，用于指定babel以哪一个版本的ES来进行转换，新增文件并作以下配置，这里记得要用双引号，单引号的话会报错

{
    "presets":[
        "es2016",
        "stage-0"
    ]
}

es表示了转化的版本，stage则代表了提案的特性，这里我们可以来简单了解一下

  • stage0: strawman，任何TC39的成员都可以提出的草案，随时被废弃。
  • Stage 1: proposal，这是一个比较正式的提议，表示要进一步讨论。
  • Stage 2: draft，在上一步的基础上进行尽可能详细的讨论，到了这个阶段后，只允许增量修改。
  • Stage 3: candidate，对提案的讨论基本完成，等待用户的反馈，只有发生重大问题时才会修改。
  • Stage 4: finished，经过了充分的测试，已经准备好写进新标准了。

实际例子

我们使用额外的组件来帮组我们完成转化

npm install -save babel-core

安装完转化工具后进行编写代码

//babel.js
let [aa,bb,cc] = [11,22,33]
let a = [...'666']
console.log(a);
var babel = require('babel-core');
var fs = require('fs');
babel.transformFile("./babel/babel.js",function(err,res){
    console.log(res.code);
})

运行这个代码的时候会发生错误，那是因为我们在第一步编写babel配置的时候没有下载相应的模块

‘Couldn't find preset "stage-0" relative to directory’

我们只要将相应的模块下载下来即可：

 npm install babel-preset-stage-0

在package.json说明模块已经存在了

我们执行看一下效果，已经是按照语法做转化出来了

类的转化

我们都知道class是JS的一个语法糖，那么到底是如何实现的，其实可以通过babel来进行转化

出现的代码是比较长并且很复杂的，这样即使是简单的一个class转化成ES5的写法后会担心是否存在某些问题

babel-polyfill

默认情况下babel不会转换一些新的API比如Promise等，可以使用第三方插件来进行解决

npm install -s babel-polyfill

我们这里去通过自己写一个promise的例子然后转化一下看看

import 'babel-polyfill'
function timeout(ms){
    return new Promise((res,rej)=>{
        setTimeout(res,ms,'done')
    })
}
timeout(1000).then((val)=>{
    console.log(val);
})

转化结果如下：

到此这篇关于Node.js基础模块babel使用详解的文章就介绍到这了,更多相关Node.js babel内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Node.js基础入门之path模块,url模块,http模块使用详解

    Node.js基础入门之path模块,url模块,http模块使用详解

    目录 path模块 1. path模块示例 2. path模块其他方法 url模块 1. 旧的解析方法 2. 新的解析方法 http模块 1. 什么是HTTP协议? 2. HTTP协议约束的细节 3. HTTP请求响应过程 4. http模块get方法 经过前面四天的学习,对Node.js已经有了一个基础的认识,今天继续学习Node.js网络通信编程相关内容,并稍加整理加以分享,如有不足之处,还请指正. path模块 Node.js中,提供了一个path模块,在这个模块中,提供了许多实用的,可被

  • node.js-fs文件系统模块这是你知道吗

    目录 1.什么是fs文件系统模块 2.读取指定文件的内容 1.fs.readFile()的语法格式 2.fs.readFile()读取文件内容 3.判断文件是否读取成功 3.向指定文件写入内容 1.fs.writeFile()的语法格式 2.fs.writeFile()写入文件 3.fs.writeFile()判断写入是否成功 4.写入文件和读取文件综合应用 5.fs模块-路径动态拼接问题 总结 1.什么是fs文件系统模块 [解释]: fs文件系统模块是Node.js官方提供的,用来操作文件的模

  • Node.js的模块化机制和Buffer对象详解

    目录 一.Node.js的模块化机制 1.什么是CommonJS模块规范 2.CommonJS模块规范化的内容 3.每个导出的模块都有一个moudle对象,该对象包含的属性有: 4.使用require导入模块 二.Buffer对象 1.用来弥补JavaScript在二进制数据处理上不足. 2.Buffer是一个构造函数 3.Buffer的基本操作: 4.Buffer类: 总结 一.Node.js的模块化机制 Node应用是由模块组成的,Node遵循了CommonJS的模块规范,来隔离每个模块的作

  • Node.js中readline模块实现终端输入

    Node.js中readline模块实现终端输入

    目录 1概述 2readline的使用 3示例1:输入输出 4示例2:模拟命令行的输入输出 1 概述 readline是Node.js里实现标准输入输出的封装好的模块,通过这个模块我们可以以逐行的方式读取数据流.使用require("readline")可以引用模块. 使用readline步骤:1.引入:require('readline')2.创建readline对象(接口)3.调用接口的相关方法4.监听和处理readline事件 示例代码: // 引入readline模块 cons

  • Node.js安装、环境变量配置、报错解决方法

    Node.js安装、环境变量配置、报错解决方法

    目录 1.下载Node.js 2.安装Node.js 3.验证Node.js 4.Node.js环境配置 5. Node.js测试 6. 补充 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台. Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境,基于 Google 的 V8 引擎,V8 引擎执行 Javascript 的速度非常快,性能非常好. 1.下载Node.js 下载地

  • Node.js中的模块系统介绍

    为了让Node.js的文件可以相互调用,Node.js提供了一个简单的模块系统. 模块是Node.js 应用程序的基本组成部分,文件和模块是一一对应的.换言之,一个 Node.js 文件就是一个模块,这个文件可能是JavaScript 代码.JSON 或者编译过的C/C++ 扩展. 一.exports引入模块 模块的创建 首先,我们在项目中创建hello.js,代码如下: exports.world = function() { console.log('Hello World'); } exp

  • Node.js入门笔记 之async模块

    目录 前言 async series parallel waterfall map 前言 前面我们介绍了异步模块的CPS解决嵌套回调的方法,但是随着业务的推进,node的更新方法也越来越快,对于异步的处理会有更多的新的方法来解决,最常见的当然是async模块来解决异步请求,这一节就来记录一下async模块的应用,对异步的处理更进一步台阶 async async不同于ES2017的新特性,这里的async表示的是node的第三方模块,也是一个比较出名的第三方模块,为了解决异步嵌套的回调地狱的问题,

  • node.js+postman+mongodb搭建测试注册接口的实现

    目录 准备工作 下载安装Postman mongodb连接串配置 GET请求测试 注册接口搭建 创建User数据模型 使用body-parser中间件 POST请求测试 使用User数据模型 使用gravatar处理头像 准备工作 申请一个免费的MongoDB 到https://www.mlab.com注册申请一个500M的MongoDB数据库.登录后手动在创建Databases下的Collections中手动创建一个数据库node_app. 在个人首页点击Connect获取node.js连接M

  • Node.js基础模块babel使用详解

    Node.js基础模块babel使用详解

    目录 安装配置 使用babel 实际例子 类的转化 babel-polyfill 前言: 由于ES6到ES7增加了很多新的语法,新特性的出现使得大家都希望通过新语法来提升自身的开发效率,但在之前的最新的node可能也没有百分之百的支持ES2017的新特性,而且开发者在开发环境和生产环境中的版本一般是不同的,所以新特性的代码可能不能完美的运行在线上环境中,为了解决难题,babel提供一系列的api来将新特性的语法转化成低版本环境中能够运行的代码 安装配置 babel是由一系列的组件构成,所以我们在

  • 开箱即用的Node.js+Mysql模块封装实现详解

    目录 前言 正文 项目目录 sql.js dbconfig.js db.js 增 删 改 查一个 查全部 paramList 如何使用 搞定 前言 最近在写毕设,采用的是学弟+自己的技术栈,运用Vue3+ElementPlus搞前端,Node.js express做后端,毕竟,java那东西确实不在我技术栈里. 于是乎,我抱着能CV就不要自己敲的心态,前去了某C站,C回了一个封装好了看上去存在可用性的基础sql模块,结果,踩了大坑. 痛定思痛,我采用了学弟+腾讯会议的debug方式,于事发当天下

  • Node.js+Express配置入门教程详解

    Node.js+Express配置入门教程详解

    Node.js是一个Javascript运行环境(runtime).实际上它是对Google V8引擎进行了封装.V8引 擎执行Javascript的速度非常快,性能非常好.Node.js对一些特殊用例进行了优化,提供了替代的API,使得V8在非浏览器环境下运行得更好.Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快.易于扩展的网络应用.Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非常适合在分布式设备上运行的数据密集型

  • node.js基础模块http、网页分析工具cherrio实现爬虫

    node.js基础模块http、网页分析工具cherrio实现爬虫

    一.前言       说是爬虫初探,其实并没有用到爬虫相关第三方类库,主要用了node.js基础模块http.网页分析工具cherrio. 使用http直接获取url路径对应网页资源,然后使用cherrio分析. 这里我主要学习过的案例自己敲了一遍,加深理解.在coding的过程中,我第一次把jq获取后的对象直接用forEach遍历,直接报错,是因为jq没有对应的这个方法,只有js数组可以调用. 二.知识点     ①:superagent抓去网页工具.我暂时未用到.     ②:cherrio

  • Node.js REPL (交互式解释器)实例详解

    Node.js REPL (交互式解释器)实例详解

    Node.js  REPL (交互式解释器)实例详解 Node.js REPL(Read Eval Print Loop:交互式解释器) 表示一个电脑的环境,类似 Window 系统的终端,我们可以在终端中输入命令,并接收系统的响应. Node 自带了交互式解释器,可以执行以下任务: 读取 - 读取用户输入,解析输入了Javascript 数据结构并存储在内存中. 执行 - 执行输入的数据结构 打印 - 输出结果 循环 - 循环操作以上步骤直到用户两次按下 ctrl-c 按钮退出. 多行表达式

  • 在Node.js中使用Javascript Generators详解

    Generators是Javascript的一种协同程序( coroutine 简称:协程)风格,是指那些可以在执行时暂停然后又恢复的函数,该函数是在functi配以星号符号形式如function* ,函数内有些特征关键词如yield 和yield*. function* generatorFn () { console.log('look ma I was suspended') } var generator = generatorFn() // [1] setTimeout(functio

  • node.js命令行教程图文详解

    本文先介绍原生的node.js实现命令行交互,了解原生的api,然后通过commander.js和inquirer.js实现一个完整的交互命令行工具. 项目地址 process (进程) process对象是一个全局变量,它提供了当前node.js进程的信息并对其控制.因为其是一个全局变量所以无需在文件中引入. 需要用到的几个api process.argv process.cwd() process.stdin process.stdout process.stdin.resume() pro

  • Node.js  REPL (交互式解释器)实例详解

    Node.js  REPL (交互式解释器)实例详解

    Node.js  REPL (交互式解释器)实例详解 Node.js REPL(Read Eval Print Loop:交互式解释器) 表示一个电脑的环境,类似 Window 系统的终端,我们可以在终端中输入命令,并接收系统的响应. Node 自带了交互式解释器,可以执行以下任务: 读取 - 读取用户输入,解析输入了Javascript 数据结构并存储在内存中. 执行 - 执行输入的数据结构 打印 - 输出结果 循环 - 循环操作以上步骤直到用户两次按下 ctrl-c 按钮退出. 多行表达式

  • node.js连接mongoose数据库方法详解

    目录 创建项目命令 连接mongoose数据库 配置跨域 运行 创建项目命令 express --view ejs 项目名 进入项目,我们需要npm i 下载配置文件 有时候会出先端口已经被占用的情况,我们可以在bin目录下www文件中修改端口 连接mongoose数据库 我们创建一个新的文件夹,然后在文件夹下创建一个连接mongoose数据库的文件,代码如下 var mongoose=require('mongoose') mongoose.connect('mongodb://127.0.0

  • 零基础之Node.js搭建API服务器的详解

    零基础之Node.js搭建API服务器 这篇文章写给那些Node.js零基础,但希望自己动手实现服务器API的前端开发者,尝试帮大家打开一扇门. HTTP服务器实现原理 HTTP服务器之所以能提供前端使用的API,其实现原理是服务器保持监听计算机的某个端口(通常是80),等待客户端请求,当请求到达并经过一系列处理后,服务器发送响应数据给到前端. 平时大家通过Ajax调用API,即是发起一次请求,经过服务器处理后,得到结果,然后再进行前端处理.如今使用高级编程语言,要实现服务器那部分功能已经变得非

随机推荐