快捷導(dǎo)航

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

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

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

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

安裝配置

babel是由一系列的組件構(gòu)成，所以我們在開發(fā)過程中，要從自行配置組件來開始使用babel的功能

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

`npm install babel-cli`

使用babel

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

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

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

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

實(shí)際例子

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

npm install -save babel-core

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

//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í)候會發(fā)生錯誤，那是因?yàn)槲覀冊诘谝徊骄帉慴abel配置的時(shí)候沒有下載相應(yīng)的模塊

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

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

 npm install babel-preset-stage-0

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

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

類的轉(zhuǎn)化

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

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

babel-polyfill

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

npm install -s babel-polyfill

我們這里去通過自己寫一個(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é)果如下：