广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Node.js基础模块babel使用详解
  • 804
分享到

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

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

目录安装配置使用babel实际例子类的转化babel-polyfill前言: 由于es6到ES7增加了很多新的语法,新特性的出现使得大家都希望通过新语法来提升自身的开发效率,但在之前

前言:

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

安装配置

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

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

`npm install babel-cli`

image.png

使用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说明模块已经存在了

 

image.png

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

image.png

类的转化

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

image.png

出现的代码是比较长并且很复杂的,这样即使是简单的一个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);
})

转化结果如下:

image.png

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

--结束END--

本文标题: Node.js基础模块babel使用详解

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

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

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Node.js基础模块babel使用详解
    目录安装配置使用babel实际例子类的转化babel-polyfill前言: 由于ES6到ES7增加了很多新的语法,新特性的出现使得大家都希望通过新语法来提升自身的开发效率,但在之前...
    99+
    2022-11-13
  • Node.js基础入门之path模块,url模块,http模块使用详解
    目录path模块1. path模块示例2. path模块其他方法url模块1. 旧的解析方法2. 新的解析方法http模块1. 什么是HTTP协议?2. HTTP协议约束的细节3. ...
    99+
    2022-11-13
  • Node.js基础入门之使用方式及模块化详解
    目录什么是Node.js Node.js下载 Node.js和JavaScript的区别Node.js安装与验证 Node.js使用方式1. REPL模式2. 文...
    99+
    2022-11-13
  • Python基础之模块详解
    目录一、模块1、模块的四种形式2、为什么要用模块?二、如何用模块1、import 模块名导入重命名:smt变量指向span模块的名称空间导入多个模块2、from 模块名 import...
    99+
    2022-11-11
  • Python基础之hashlib模块详解
    一、hashlib简介 什么叫hash: hash是一种算法(不同的hash算法只是复杂度不一样)(3.x里代替了md5模块和sha模块,主要提供 SHA1, SHA224, SHA256, SHA384, SHA5...
    99+
    2022-06-02
    Python hashlib模块 python模块
  • Node.js基础入门之模块与npm包管理器使用详解
    目录require函数模块分类第三方模块1. 安装第三方模块2. 引入第三方模块3. 示例测试系统模块require注意事项exports导出对象1. exports示例2. exp...
    99+
    2022-11-13
  • Python基础之内置模块详解
    目录一、os二、shutil三、sys四、random五、hashlib六、configparser七、xml八、json九、time十、datetime一、os import ...
    99+
    2022-11-12
  • Python写脚本常用模块OS基础用法详解
    收集了一些关于OS库的用法,整理归纳一下,方便使用 import os # 系统操作 print(os.sep) # 获取当前系统的路径分隔符 print(os.n...
    99+
    2022-11-11
  • Python基础之模块怎么使用
    这篇文章主要介绍“Python基础之模块怎么使用”,在日常操作中,相信很多人在Python基础之模块怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Python基础之模块怎么使用”的疑惑有所帮助!接下来...
    99+
    2023-07-06
  • Python基础之模块如何使用
    一、模块模块可以看成是一堆函数的集合体。一个py文件内部就可以放一堆函数,因此一个py文件就可以看成一个模块。如果这个py文件的文件名为module.py,模块名则是module。1、模块的四种形式在Python中,总共有以下四种形式的模块...
    99+
    2023-05-15
    Python
  • Python基础之如何使用multiprocessing模块
    一、multiprocessing模块 multiprocessing包是Python中的多进程管理包。与threading.Thread类似,它可以使用multiprocessing.Proces 对象来创建一个进...
    99+
    2022-06-02
    multiprocessing模块的使用 python multiprocessing
  • 详解Golang中gcache模块的基本使用
    目录先说结论优势基本使用打印结果缓存控制打印结果缓存淘汰策略实战举例代码示例打印结果小技巧GetOrSetFunc的使用总结gcache提供统一的缓存管理模块,提供了开发者可自定义灵...
    99+
    2022-11-11
  • python中argparse模块基础及使用步骤
    目录argparse模块用法一、 概念二、 基础1、 使用步骤1.1 总步骤1.2 创建对象1.3 添加参数1.4 解析参数三、 使用案例argparse模块用法 一、 概念 arg...
    99+
    2022-11-11
  • 一文详解Python数据分析模块Numpy基础数据类型
    Numpy简介​NumPy(Numerical Python) 是 Python 语言的一个扩展程序库,支持大量的维度数组与矩阵运算,此外也针对数组运算提供大量的数学函数库。NumPy​ 是一个运行速度非常快的数学库,主要用于数组计算,包含...
    99+
    2023-05-14
    Python Numpy 数组
  • CobaltStrike使用教程详解(基础)
    声明:本文仅限学习研究讨论,切忌做非法乱纪之事! 大家好,今天简单来聊聊CobaltStrike,这是我们后渗透阶段必不可少的神器。 Cobalt Strike 是一款流行的渗透测试工具,广泛用于红队操作和渗透测试。它由Raphael Mu...
    99+
    2023-09-13
    php 开发语言
  • Reactrouter基础使用方法详解
    目录react-routerbrowserHistoryReachRouterreact-router 1、使用方法 <Router history={hashHistory}...
    99+
    2023-05-17
    React router React router使用方法
  • GoLangbytes.Buffer基础使用方法详解
    目录一、bytes.Buffer的基础知识二、bytes.Buffer类型的值已读计数的作用三、bytes.Buffer的扩容策略四、bytes.Buffer的哪些方法会造成内容的泄...
    99+
    2023-03-19
    GoLang bytes.Buffer Go bytes.Buffer
  • Node.js学习之地址解析模块URL的使用详解
    前言 本文主要给大家介绍了关于Node.js地址解析模块URL使用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。 url结构化/模块化/路径解析 结构化:url.pars...
    99+
    2022-06-04
    详解 模块 地址
  • node.js中joi模块的基本使用方式
    目录node.js joi模块的使用参数校验:使用joi基础使用常见schema特殊情况demosnode.js joi模块的使用 //引入joi模块 const Joi = req...
    99+
    2022-11-13
  • 深入理解Node.js中通用基础设计模式
    谈到设计模式,你可能会想到 singletons, observers(观察者) 或 factories(工厂方法)。本文不并专门探讨他们。只是探讨Node.JS一些基础模式的实现,像依赖注入或中间件。 什...
    99+
    2022-06-04
    模式 基础 Node
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作