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

2021-10-25 22:22:28 字數 1972 閱讀 2347

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

測試環境: 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 開發環境中專案依賴

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

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

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

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

開啟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 init初始化專案目錄 檢視npm源位址 如果不是如圖所示的官方源位址,需要使用如下命令設定為官方源位址 npm config set registry然後登入你在npm官網註冊的賬戶,沒有註冊的直接前往npm官網註冊,註冊完使用如下命令進行登入,輸入賬號密碼以及乙個用於接收郵件的郵箱即...

Tensorflow專案構建流程

參考部落格 整理 一。訓練階段 1.tensorflow打包資料 2 採用tfrecoder進行高效資料讀取 2.網路架構與訓練 經過上面的資料格式處理,接著我們只要寫一寫網路結構,網路優化方法,把資料搞進網路中就可以 3.視覺化顯示 二。測試階段 直接通重載入圖模型,讀取引數等,然後直接通過ten...

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

目錄 隱藏 yarn 使用實踐建議 相關參考 簡單來說,yarn 是乙個與 npm 功能相同的工具,用於前端專案的依賴管理。在使用 npm 的專案中,使用 npm 命令的地方都可以使用 yran 來代替。為什麼要使用 yarn 替代 npm 呢?yarn 相對 npm 來說,主要的特點有 確定性 預...