3.1 npm init 創(chuàng)建 package.json

1. 背景故事

在很久很久以前，dk 要開(kāi)發(fā)一個(gè)前端項(xiàng)目，在計(jì)算機(jī)的某個(gè)旮沓地方建立了一個(gè)文件夾叫 dk_project，就稱(chēng)為這是一個(gè)“項(xiàng)目”了。

又過(guò)了很久，dk 離開(kāi)了公司，來(lái)了位新同事，在接手 dk 工作的時(shí)候發(fā)現(xiàn)計(jì)算機(jī)上面的 dk_project 文件夾，因?yàn)闆](méi)有任何明顯的

標(biāo)識(shí)，就被當(dāng)成普通文件夾給 DELETE 掉了。

回到現(xiàn)代，隨著 npm 的誕生，人們意識(shí)到建立一個(gè)項(xiàng)目目錄不應(yīng)該這么草率，于是乎規(guī)定，

如果某個(gè)文件夾被創(chuàng)建作為一個(gè)項(xiàng)目目錄，那么它就應(yīng)該包含一個(gè) package.json 的文件。

package.json 文件里記錄項(xiàng)目的描述信息：項(xiàng)目作者、項(xiàng)目描述、項(xiàng)目依賴(lài)哪些包、插件配置信息等等數(shù)不清的好處。

2. 創(chuàng)建項(xiàng)目描述文件 package.json

注意：下面的這些操作都是在黑窗口（DOS窗口）進(jìn)行的。

第一步

在 d 盤(pán)下新建一個(gè)目錄 demo 作為項(xiàng)目目錄并在 dos 窗口切換到該目錄下。

$ d:
$ cd D:\demo

第二步

使用 npm init 指令創(chuàng)建項(xiàng)目描述文件 package.json。

命令行里會(huì)以交互的形式讓你填一些項(xiàng)目的介紹信息，依次介紹如下：（不知道怎么填的直接回車(chē)、回車(chē)...）

• name 項(xiàng)目名稱(chēng)
• version 項(xiàng)目的版本號(hào)
• description 項(xiàng)目的描述信息
• entry point 項(xiàng)目的入口文件
• test command 項(xiàng)目啟動(dòng)時(shí)腳本命令
• git repository 如果你有 Git 地址，可以將這個(gè)項(xiàng)目放到你的 Git 倉(cāng)庫(kù)里
• keywords 關(guān)鍵詞
• author 作者叫啥
• license 項(xiàng)目要發(fā)行的時(shí)候需要的證書(shū)，平時(shí)玩玩忽略它

第三步

在項(xiàng)目目錄下會(huì)自動(dòng)生成 package.json 文件，打開(kāi)可以看到剛才配置的項(xiàng)目信息。

3. 來(lái)點(diǎn)看得見(jiàn)的東東

在項(xiàng)目根目錄下新建文件 index.js，并在其輸入以下代碼：

console.log('dk is handsome.');

在 dos 窗口中切換到項(xiàng)目根目錄下，輸入 node index.js 可以看到打印出來(lái)的信息。

$ d:
$ cd D:\demo
$ node index.js

這是 node 的入門(mén) demo，當(dāng)然這里并不介紹 Node。

package.json 在整個(gè)項(xiàng)目中還是很重要的，我們拿到一個(gè)新項(xiàng)目，第一步要看的就是 package.json 文件，這里面會(huì)傳遞項(xiàng)目信息。

下一節(jié)將詳細(xì)講解 package.json 的屬性配置，讓你能輕松看懂 package.json。