快捷導(dǎo)航

Node.js基礎(chǔ)模塊babel使用詳解

更新時(shí)間：2022年06月21日 10:21:01 作者：??一只大加號(hào)????

這篇文章主要介紹了Node.js基礎(chǔ)模塊babel使用詳解，babel是由一系列的組件構(gòu)成，所以我們?cè)陂_(kāi)發(fā)過(guò)程中，要從自行配置組件來(lái)開(kāi)始使用babel的功能

由于ES6到ES7增加了很多新的語(yǔ)法，新特性的出現(xiàn)使得大家都希望通過(guò)新語(yǔ)法來(lái)提升自身的開(kāi)發(fā)效率，但在之前的最新的node可能也沒(méi)有百分之百的支持ES2017的新特性，而且開(kāi)發(fā)者在開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境中的版本一般是不同的，所以新特性的代碼可能不能完美的運(yùn)行在線上環(huán)境中，為了解決難題，babel提供一系列的api來(lái)將新特性的語(yǔ)法轉(zhuǎn)化成低版本環(huán)境中能夠運(yùn)行的代碼

安裝配置

babel是由一系列的組件構(gòu)成，所以我們?cè)陂_(kāi)發(fā)過(guò)程中，要從自行配置組件來(lái)開(kāi)始使用babel的功能

我們先來(lái)安裝一下babel-cli，通過(guò)npm運(yùn)行即可將babel-cli下載到我們的node_modules中

`npm install babel-cli`

使用babel

我們?cè)夙?xiàng)目中增加一個(gè)名為.babelrc的配置文件，用于指定babel以哪一個(gè)版本的ES來(lái)進(jìn)行轉(zhuǎn)換，新增文件并作以下配置，這里記得要用雙引號(hào)，單引號(hào)的話會(huì)報(bào)錯(cuò)

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

es表示了轉(zhuǎn)化的版本，stage則代表了提案的特性，這里我們可以來(lái)簡(jiǎn)單了解一下

stage0: strawman，任何TC39的成員都可以提出的草案，隨時(shí)被廢棄。
Stage 1: proposal，這是一個(gè)比較正式的提議，表示要進(jìn)一步討論。
Stage 2: draft，在上一步的基礎(chǔ)上進(jìn)行盡可能詳細(xì)的討論，到了這個(gè)階段后，只允許增量修改。
Stage 3: candidate，對(duì)提案的討論基本完成，等待用戶的反饋，只有發(fā)生重大問(wèn)題時(shí)才會(huì)修改。
Stage 4: finished，經(jīng)過(guò)了充分的測(cè)試，已經(jīng)準(zhǔn)備好寫(xiě)進(jìn)新標(biāo)準(zhǔn)了。

實(shí)際例子

我們使用額外的組件來(lái)幫組我們完成轉(zhuǎn)化

npm install -save babel-core

安裝完轉(zhuǎn)化工具后進(jìn)行編寫(xiě)代碼

//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);
})

運(yùn)行這個(gè)代碼的時(shí)候會(huì)發(fā)生錯(cuò)誤，那是因?yàn)槲覀冊(cè)诘谝徊骄帉?xiě)babel配置的時(shí)候沒(méi)有下載相應(yīng)的模塊

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

我們只要將相應(yīng)的模塊下載下來(lái)即可：

 npm install babel-preset-stage-0

在package.json說(shuō)明模塊已經(jīng)存在了

我們執(zhí)行看一下效果，已經(jīng)是按照語(yǔ)法做轉(zhuǎn)化出來(lái)了

類(lèi)的轉(zhuǎn)化

我們都知道class是JS的一個(gè)語(yǔ)法糖，那么到底是如何實(shí)現(xiàn)的，其實(shí)可以通過(guò)babel來(lái)進(jìn)行轉(zhuǎn)化

出現(xiàn)的代碼是比較長(zhǎng)并且很復(fù)雜的，這樣即使是簡(jiǎn)單的一個(gè)class轉(zhuǎn)化成ES5的寫(xiě)法后會(huì)擔(dān)心是否存在某些問(wèn)題

babel-polyfill

默認(rèn)情況下babel不會(huì)轉(zhuǎn)換一些新的API比如Promise等，可以使用第三方插件來(lái)進(jìn)行解決

npm install -s babel-polyfill

我們這里去通過(guò)自己寫(xiě)一個(gè)promise的例子然后轉(zhuǎn)化一下看看

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

轉(zhuǎn)化結(jié)果如下：