配置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路徑不對,然後通過命令執行【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