使用npm構建前端專案基本流程

下面介紹的**示例不敢說是最佳實踐, 但都是我親自在自己機器上測試有效的.

測試環境: win10, node v8.4, npm v5.3.

package.json檔案非常重要, 我們拿到別人的專案第1眼便是看package.json裡有什麼, 我們自己

建立個新專案, 首先就要建立好package.json檔案.

假設我們的專案需要使用jquery, 我們新建乙個demo目錄, 並在裡面新建乙個package.json.

把下面這些基本模板內容, 複製貼上進去.

,
"author": "sheng",
"license": "mit",
"keywords": [
"key1",
"key2"
],"dependencies": {},
"devdependencies": {},
"repository": 
}

檔案編碼建議使用utf-8, 換行建議使用lf

上面的json檔案, 就對我們的demo專案作了最簡單的描述.

name 專案名稱, 預設使用專案資料夾名. version 專案版本, 預設版本為1.0.0. description 專案描述, 簡要說明我們的專案是幹啥的. main 指定專案的入口檔案. scripts 測試指令碼. author 專案作者. license 專案使用的協議. repository 專案所在的遠端倉庫, 比如在github上. keywords 專案關鍵字. dependencies 生產環境中專案依賴 devdependencies 開發環境中專案依賴

關於專案的一堆描述, 在我們初學階段, 感覺都無關緊要, 什麼專案名字, 版本, 作者之類, 大家

隨便寫寫就行. 我們只關注兩個重要的專案描述dependencies和devdependencies, 它

分別表示在生成環境所需的專案依賴, 和在開發環境中所需要的專案依賴. 初學階段這兩個也不用,

可以區分, 統一理解為是我們需要的專案依賴即可.

開啟cmd系統命令行, 切換到當前專案目錄, 對於我的機器來說是d:\asheng_ide\frontend\study_tree\react\demo, 接下來輸入npm安裝命令npm install jquery.

這一步驟執行完畢之後, 我們會發現在我們的專案目錄裡多了乙個資料夾node_modules, 可以看到

裡面有乙個資料夾jquery, 這正是我們安裝的包. 我們還發現專案目錄裡多了乙個package-lock.json,

檔案, 這是npm自動為我們建立的, 開啟這個檔案我們可以看到裡面寫有jquery依賴資訊, 不用管它.

再開啟, 我們自己建立的package.json檔案, 發現在dependencies欄目下, 已經新增上了jquery依賴

資訊.

使用npm構建前端專案基本流程

npm包從構建到發布流程

Tensorflow專案構建流程

使用 yarn 代替 npm 管理前端專案模組依賴

使用npm構建前端專案基本流程

npm包從構建到發布流程

Tensorflow專案構建流程

使用 yarn 代替 npm 管理前端專案模組依賴

相關推薦