---

theme: vuepress highlight: tomorrow-night

---

攜手創作，共同成長！這是我參與「掘金日新計劃 · 8 月更文挑戰」的第10天，點選檢視活動詳情。

1、前言

之前寫過一篇關於如何釋出一個npm包到npmjs，有興趣的可以看一下這篇文章 https://juejin.cn/post/7127824563072663565。

主要程式碼如下所示 javascript // package.json中的bin路徑指令碼 "bin": { "create-ak-vue": "./bin/vue.js", "create-ak-vite": "./bin/vite.js" }, 然後bin資料夾下兩個檔案的程式碼分別為

```javascript // vite.js

! /usr/bin/env node

console.log('vite.1js') console.log('vite.2js')

// vue.js

! /usr/bin/env node

console.log('vue.js') console.log('vue.js') ``` 大致的程式碼就是這樣了，現在假設一下，我們的程式碼已經發布出去了，那麼開始安裝

```javascript // 全域性安裝aehyok-cli npm i aehyok-cli -g

// 然後執行 create-ak-vue create-ak-vite

// 或者下面兩個 npm create ak-vue npm create ak-vite

// 再或者下面兩個 npm init ak-vue npm init ak-vite ``` 執行效果如下

可以發現這三種情況實現了同樣的功能

2、npm init、npm create

印象裡面大家可能對它的記憶可能都停留在，npm init之後是快速的初始化package.json,並通過互動式的命令列讓我們輸入需要的欄位值，當然如果想直接使用預設值，也可以使用npm init -y快速生成一個簡單預設的package.json。

create-app-react建立專案命令,官網連結可以直接檢視 https://create-react-app.dev/docs/getting-started

```javascript //官網的三種命令 npx create-react-app my-app npm init react-app my-app yarn create react-app my-app

//我又發現npm create也是可以的 npm create react-app my-app ```

上述這些命令最終效果都是可以執行建立專案的

同樣的vite建立專案的命令 ```javascript //官網的命令 npm create vite@latest yarn create vite pnpm create vite

// 指定具體模板的 // npm 6.x npm create vite@latest my-vue-app --template vue //npm 7+, extra double-dash is needed: npm create vite@latest my-vue-app -- --template vue

yarn create vite my-vue-app --template vue

pnpm create vite my-vue-app --template vue

```

可以發現vite官網沒有使用npx命令，不過我在我自己電腦上嘗試了另外幾個命令確實也是可以的 javascript npx create-vite my-app npm init vite my-app

通過上面的對比可以一個小問題,yarn create去官網查了是存在這個指令的，官網地址可看 https://classic.yarnpkg.com/en/docs/cli/create#search

而對於npm create這個命令在npm官網是看不到的，但是在一篇部落格中發現了更新日誌

意思就是說npm create xxx和npm init xxx以及yarn create xxx效果是一致的。那麼我們來本文的命令列

```javascript // 我們是通過npm安裝的，並且包名裡是包含create的 npm i create-vite-pretty-lint

// 那麼以下幾種方式都可以使用的 npm init vite-pretty-lint npm create vite-pretty-lint yarn create vite-pretty-lint npx create-vite-pretty-lint ```

3、npx

假如我們只在專案中安裝了vite,那麼node_modules中.bin資料夾下是會存在vite指令的

如果我們想在該專案下執行該命令第一種方式便是

第二種方式就是直接在package.json的scripts屬性下

關於npx的詳細說明可以看一下阮一峰大佬的精彩分享 http://www.ruanyifeng.com/blog/2019/02/npx.html

4、總結

其實前言中的執行命令還可以新增一個 javascript npx create-ak-vue 所以最後其實可以有四種方式去執行package.json中bin命令，總共有四種執行方式，真的太可怕了。