vscode中使用npm安裝babel的方法

Posted on by

前言

上篇介紹瞭nodejs的安裝配置，這篇來介紹一下在VScode裡面怎麼使用bable。
bable是一個廣泛使用的ES6轉換器，可以將ES6代碼轉為ES5代碼

一、檢查是否已經安裝瞭npm

在cmd中輸入npm -v 得到版本號，現在新版的nodejs在安裝的時候已經自動安裝瞭npm。

在這裡插入圖片描述

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

二、配置bable

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

在這裡插入圖片描述

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

在這裡插入圖片描述

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

三、在VScode中進行配置

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

在這裡插入圖片描述

其實上面第二步配置bable也應該在VScode的終端進行的，但是當時我試瞭好幾次都失敗然後我就索性在外面的終端配置瞭。

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

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

在這裡插入圖片描述

這個過程也挺漫長。

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

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

在這裡插入圖片描述

vscode終端執行cnmp出錯瞭，這個時候隻需在終端中執行：set-ExecutionPolicy RemoteSigned即可

在這裡插入圖片描述

現在就可以正常使用cnmp瞭。
代碼如下（示例）：

5.新建一個.babelrc文件，配置文件內容

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

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

在這裡插入圖片描述

輸入命令後，文件夾內就自動生成瞭一個轉換後的demo.js文件，裡面的內容是將test.js裡面的es6代碼轉換為es5

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

babel src –d dis	//src-源文件夾 dis-轉換後的文件夾

還有可以實現實時轉換的語句

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

到此這篇關於vscode中使用npm安裝babel的文章就介紹到這瞭,更多相關vscode安裝babel內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：