前言

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

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

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

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

二、配置bable

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

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

這個過程超級慢，耐心等待。

三、在VScode中進行配置

1.使用vscode ctrl+j 打開vscode自帶終端
2.進入目標文件夾【使用cd命令】

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

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

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

這個過程也挺漫長。

因為我們已經(jīng)裝了淘寶鏡像了，所以也可以用cnmp因為nmp可能會失敗，但是有可能會遇到這種情況：

我用cnmp -v查詢版本號做一個示范

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

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

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

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

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

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

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

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

還有可以實現(xiàn)實時轉(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論