1. 程式人生 > 其它 >配置babel爬坑之路

配置babel爬坑之路

背景介紹:

在node.js 專案中,使用es6規範的語法,其中用了import匯入模組,所以用babel編輯器幫助轉。

專案過程:

首先:由於需要babel轉譯,所以下載 @babel/node @babel/core @babel/preset-env

其次:新建 ‘.babelrc’ 檔案,並配置。如下:

然後:在package.json中,配置指令碼:nodemon --exec babel-node app.js【專案通過nodemon啟動,app.js為入口檔案】

最後:執行指令碼,啟動專案,此時專案正常啟動。

這就完了嗎?沒有!!!發現通過pm2啟動不了,查閱資料得知需要改變pm2解析器。具體解決辦法請參考 《

pm2 + babel-node 遇到的坑

pm2解析器配置完成之後,啟動之後提示babel-node路徑不對,然後通過命令執行【babel-node app.js】發現babel-node找不到。

所以通過百度發現需要全域性安裝babel-cli babel-node。通過npm全域性安裝了babel-cli babel-node這兩個模組,安裝之後啟動此時發現一個大坑,如下:

發現版本不對,重新解除安裝再安裝依舊不對,網上查詢發現讓有的讓安裝babel/cli有的讓安裝babel-cli,結果都嘗試了還是不對

解決辦法:

第一步:將專案中的模組刪除@babel/node @babel/core @babel/preset-env

第二步:將全域性安裝的babel-cli babel-node刪除【一定要刪除】

第三步:將node_modules刪除,重新install

第四步:重新安裝@babel/node @babel/core @babel/preset-env 【安裝完成啟動,發現babel-node 又找不到了】

第五步:全域性安裝 @babel/cli @babel/node 【在啟動好了。發現之前安裝的babel/cli或babel-cli、babel-node而現在安裝的是@babel/cli @babel/node】

關於第五步另外說一點:

之前安裝(babel/cli或babel-cli)和 babel-node 的安裝目錄在 /usr/local/lib/node_modules 和其他模組同一級,如下圖

後邊通過安裝@babel/cli 和 @babel/node 發現他們被合併到@babel資料夾中了。

補充知識點:參考檔案 ->https://segmentfault.com/q/1010000017876791

不過題主當時為了解決問題,引入了一堆衝突,這種情況首先應該移除所有 babel 相關依賴。
安裝babel-cli預設安裝依賴babel/core 6.26.3,基本可以說這種不帶 @ 的語法將停留在 v6 版本里。
所以要用 v7 的話,就應該使用@babel/cli,提供 babel 命令列使用環境,這個版本並不會自動安裝@babel/core,而是需要自行安裝匹配依賴,所以要能執行 babel,再加上使得 node 能執行 JavaScript 新特性,最小安裝為:

npm install @babel/cli @babel/core @babel/node @babel/preset-env -D