本文介紹
點贊 + 關注 + 收藏 = 學會了
有前端開發經驗或者用過 node 的開發者應該知道，如果需要在本地運行 js 檔案，需要通過 node xxx.js 來執行，
但在執行 vue create project-name 創建 Vue 專案時，為什么命令不是以 node 開頭呢？
這次就來淺淺的探討一下，這條命令為什么 “不需要” 使用 node 來執行，
本文的運行環境
- 作業系統：win11
- node版本：17.6
- nvm版本：1.1.9
由于我日常作業原因，需要使用 nvm 切換 node 版本，
安裝 vue-cli
我默認大家都已經在自己電腦安裝好 node 了，如果沒裝的，請打開 node官網 自行安裝，
在執行 vue create 命令前，先確保電腦已經安裝了 vue-cli，
vue-cli 是創建 Vue 專案的一個腳手架工具， vue-cli 提供了 vue create 等命令，
使用以下命令安裝 vue-cli：
npm install -g @vue/cli
# 或
yarn global add @vue/cli
在裝好 vue-cli 后，執行 vue --version 就可以查看到當前安裝的 vue-cli 的版本，
vue-cli 到底安裝在哪里了？
不管是使用 npm 還是 yarn 安裝 vue-cli ，都離不開 node，
所以我到了 node 的安裝目錄下查看，果然發現了 vue 的身影，
如果不知道 node 裝在哪了，在你安裝完 vue-cli 后，可以用以下命令查看 vue-cli 的位置
# windows用戶
where vue
# mac用戶
which vue
打開 vue 檔案看了下，里面的內容如下
#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
case `uname` in
*CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
esac
if [ -x "$basedir/node" ]; then
exec "$basedir/node" "$basedir/node_modules/@vue/cli/bin/vue.js" "$@"
else
exec node "$basedir/node_modules/@vue/cli/bin/vue.js" "$@"
fi
發現了一條比較刺眼的路徑
$basedir/node_modules/@vue/cli/bin/vue.js
$basedir 表示檔案所在的目錄，
可以看出 \nodejs 目錄下的 vue 檔案只是一個軟鏈接，它指向 /node_modules/@vue/cli/bin/vue.js，
于是我順藤摸瓜，進入了 /node_modules/@vue/cli/bin/ 目錄，發現了 vue.js 檔案，
這個檔案有200多行代碼，里面有詳細配置 vue-cli 的各種指令和配置項，
但本文目的是解開為什么 “不需要” 使用 node 就可以執行 js 檔案，所以在本篇不打算深入講解里面的各項配置，
我們只需看該檔案的第一行，
#!/usr/bin/env node
#!/usr/bin/env 的意思是找到當前系統的全域環境，然后再加上 node ，
整句的意思是：在全域找到環境變數中 node ，然后通過 node 來執行該檔案，
Hello World
整理一下前面的講解，我們是不是就有能力弄一個 “不需要” 使用 node 就能執行的檔案出來了？
- 軟鏈接，在全域環境中添加一個可執行的js檔案，
- 使用
#!/usr/bin/env node呼叫環境變數中的node來執行自身，
第二個條件其實就是在 js 檔案的頭部添加一句話，注意，必須是檔案的第一行！
那么如何給檔案添加個軟鏈接呢？
百度了一下，使用 ln -s 命令就行了 (windows 用戶建議使用 Git Bash執行命令)，
ln -s 檔案路徑 命令名
我在 D盤 創建 test.js，內容如下：
#!/usr/bin/env node
console.log('Hello World')
然后進入 node 根目錄，使用以下命令創建鏈接（我在這使用 sayhello 這個命令，你可以自定義的）
ln -s D:/test.js sayhello
之后在 node 根目錄下就會出現 sayhello 檔案（沒有后綴的）
此時，使用 Git Bash 在任何位置都可以直接使用 sayhello 命令了，
推薦閱讀
- ??《『前端必備』本地資料介面》
- ??《這18個網站能讓你的頁面背景炫酷起來》
點贊 + 關注 + 收藏 = 學會了
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/498885.html
標籤：JavaScript
上一篇：CSS Houdini：用瀏覽器引擎實作高級CSS效果
下一篇：前端(三)-JavaScript