前言

上篇介紹了nodejs的安裝配置，這篇來介紹一下在VScode里面怎么使用bable。
bable是一個(gè)廣泛使用的ES6轉(zhuǎn)換器，可以將ES6代碼轉(zhuǎn)為ES5代碼

一、檢查是否已經(jīng)安裝了npm

在cmd中輸入npm -v 得到版本號(hào)，現(xiàn)在新版的nodejs在安裝的時(shí)候已經(jīng)自動(dòng)安裝了npm。

還是那句話，最好還是以管理員身份打開終端。

二、配置bable

在終端中安裝bable，輸入 npm install –g babel-cli

這是為了讓VScode可以識(shí)別bable，安裝成功后就是這樣：

這個(gè)過程超級(jí)慢，耐心等待。

三、在VScode中進(jìn)行配置

1.使用vscode ctrl+j 打開vscode自帶終端
2.進(jìn)入目標(biāo)文件夾【使用cd命令】

其實(shí)上面第二步配置bable也應(yīng)該在VScode的終端進(jìn)行的，但是當(dāng)時(shí)我試了好幾次都失敗然后我就索性在外面的終端配置了。

3.在終端中輸入npm init –y 對(duì)項(xiàng)目進(jìn)行初始化
正確結(jié)果是bable文件夾下會(huì)出現(xiàn)一個(gè)package.json文件

4.安裝bable
在終端輸入npm install -–save-dev babel-preset-es2015 babel-cli

這個(gè)過程也挺漫長(zhǎng)。

因?yàn)槲覀円呀?jīng)裝了淘寶鏡像了，所以也可以用cnmp因?yàn)閚mp可能會(huì)失敗，但是有可能會(huì)遇到這種情況：

我用cnmp -v查詢版本號(hào)做一個(gè)示范

vscode終端執(zhí)行cnmp出錯(cuò)了，這個(gè)時(shí)候只需在終端中執(zhí)行：set-ExecutionPolicy RemoteSigned即可

現(xiàn)在就可以正常使用cnmp了。
代碼如下（示例）：

5.新建一個(gè).babelrc文件，配置文件內(nèi)容

{
    // presets 屬性告訴bable要轉(zhuǎn)換的源碼使用了哪些新的語法特性
    // 將js轉(zhuǎn)換成es2015
    "presets":["es2015"],
    // 該屬性告訴bable要是用哪些插件
    // 這些插件可以控制如何轉(zhuǎn)換代碼
    "plugins": []
}

6.文件轉(zhuǎn)換
新建一個(gè)js文件，隨便輸入點(diǎn)內(nèi)容(用es6的格式)，然后在終端進(jìn)行轉(zhuǎn)換
babel src/index.js –o dist/index.js
這里我用test.js->demo.js做一個(gè)小示范

輸入命令后，文件夾內(nèi)就自動(dòng)生成了一個(gè)轉(zhuǎn)換后的demo.js文件，里面的內(nèi)容是將test.js里面的es6代碼轉(zhuǎn)換為es5

這個(gè)語句是用來進(jìn)行單個(gè)文件的轉(zhuǎn)換，同樣的，還有直接轉(zhuǎn)化整個(gè)文件夾內(nèi)所有js文件的：

babel src –d dis	//src-源文件夾 dis-轉(zhuǎn)換后的文件夾

還有可以實(shí)現(xiàn)實(shí)時(shí)轉(zhuǎn)換的語句

babel src/index.js –w –o dist/index.js
babel src –w –d dist

到此這篇關(guān)于vscode中使用npm安裝babel的文章就介紹到這了,更多相關(guān)vscode安裝babel內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論