Javascript模塊化開發1——package.json詳解

来源:https://www.cnblogs.com/studynote/archive/2019/11/15/11866682.html
-Advertisement-
Play Games

一、環境安裝 Node.js 安裝包及源碼下載地址為: "https://nodejs.org/en/download/" 。 在該頁面你可以根據不同平臺系統選擇你需要的 Node.js 安裝包。 Node.js裡面集成了npm,npm是一種包管理工具,允許用戶從NPM伺服器下載別人編寫的包或命令行 ...


一、環境安裝

Node.js 安裝包及源碼下載地址為:https://nodejs.org/en/download/
在該頁面你可以根據不同平臺系統選擇你需要的 Node.js 安裝包。
Node.js裡面集成了npm,npm是一種包管理工具,允許用戶從NPM伺服器下載別人編寫的包或命令行程式並分享自己編寫的包或命令行程式。

二、創建模塊

輸入命令npm init後根據提示輸入相關信息,如名稱,描述,版本等,將會創建一個初始的package.json。
接著可以編輯相關屬性來定義該模塊,大多數的屬性都很直觀,下麵只挑幾個進行說明:

1.name

項目/模塊名稱。
命名規範如下:

  • 名稱可以首碼scope標識,如@myorg/mypackage。
  • 名字也將作為require()命令的參數,所以應該儘量簡明,長度必須小於等於214個字元。
  • 名字將會被作為url的一部分,所有要符合http url的一般命名規則,不能包含url非法字元,也不能以"."(點)或者"_"(下劃線)開頭。
  • 不能包含大寫字母。
  • 名字里不要再包含"js"和"node",且不要用和核心Node模塊相同的名字。
  • 如果包要發佈到NPM平臺上的話,最好先訪問https://www.npmjs.com/檢查下有沒有重名。

2.repository

用於指示代碼存放的位置。

 "repository": {
  "type": "git",
  "url": "https://github.com/***.git"
}
"repository": {
  "type": "svn",
  "url": "https://***"
}

3.private

設為true這個包將不會發佈到NPM平臺下。如果不設置repository,則應該設置private為true。

4.files

包所包含的所有文件,可以取值為文件夾。
通常我們還是用.npmignore來去除不想包含到包里的文件。
不管如何設置,有些文件會永遠都包含在包里:

package.json
README
CHANGES / CHANGELOG / HISTORY
LICENSE / LICENCE
NOTICE
main里包含的文件

不管如何設置,有些文件會永遠都不能包含在包里:

.git
CVS
.svn
.hg
.lock-wscript
.wafpickle-N
..swp
.DS_Store
._

npm-debug.log
.npmrc
node_modules
config.gypi
*.orig
package-lock.json

5.main

main欄位指定了載入的入口文件,require('moduleName')就會載入這個文件。這個欄位的預設值是模塊根目錄下麵的index.js。

6.browser

定義 npm 包在 browser 環境下的入口文件

7.Bin

bin項用來指定各個內部命令對應的可執行文件的位置。很多的包都會有執行文件需要安裝到PATH中去。
這個欄位對應的是一個Map,每個元素對應一個{ 命令名:文件名 },例如:

"bin" : {
  "myapp" : "./cli.js"
}

在安裝第三方帶有bin欄位的npm,那可執行文件會被鏈接到當前項目的./node_modules/.bin中
可通過命令行node node_modules/.bin/myapp執行相關js文件

8.config

可以用來添加命令行的環境變數,例如:

 {
  "name" : "test",
  "config" : { "msg" : "hello" },
  "scripts" : { "start" : "node index.js" }
}

在 index.js 中,我們可以直接使用該環境變數:

console.log(process.env.npm_package_config_msg);

9.dependencies

指定運行時依賴的包。

10.devDependencies

指定開發時依賴的包。

11.peerDependencies

如果你的包是插件,而用戶在使用你的包時候,通常也會需要這些依賴(插件),那麼可以將依賴列到這裡。

12.bundledDependencies

綁定的依賴包,發佈的時候這些綁定包也會被一同發佈。

13.optionalDependencies

可選的依賴,即使這些依賴沒有,也可以正常安裝使用。

14.scripts

定義可被npm run command執行的所有命令,可以通過輸入npm run查看所有的命令列表。
比如下麵定義了運行 npm run start和npm run stop時,所要執行的命令。在cmd下輸入命令npm run start相當於輸入命令node start.js"

"scripts": {
  "start": "node start.js",
  "stop": "node stop.js",
}

scripts命令具有以下特性:

  • 執行npm run command時,會先安裝devDependencies中所定義的依賴的包,再運行command所定義的命令。
    例如:
"scripts": {
  "build": "npm install && grunt"
}

運行npm run build會先安裝devDependencies中定義的一些模塊,然後再運行npm install和grunt。

  • 支持生命周期鉤子
    npm支持pre- 和 post-兩種鉤子,前者是在腳本運行前,後者是在腳本運行後執行。所有的命令腳本都可以使用鉤子(包括自定義的腳本)。
    比如運行npm run build,會按以下順序執行:
    npm run prebuild -> npm run build -> npm run postbuild
  • npm提供了一些針對當前包的內置命令,並設置相關的預設行為。這些預設行為可以在scripts中改寫其行為。
    相關的內置命令有:
    npm start: npm run start的簡寫,如果不在script中配置start,那麼npm start預設執行node server.js
    npm stop: npm run stop的簡寫,執行自定義stop腳本,沒有預設行為。
    npm restart: npm run stop&&npm run restart&&npm run start的簡寫。
    npm test ,npm run test的簡寫,執行自定義test腳本,沒有預設行為。

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 本文微信公眾號「AndroidTraveler」首發。 背景 昨天(2019 11 14)上去 GitHub 上面一看,結果來了個下麵的提示: 點進去一看: 看來是自動化構建相關的。 那就試一下,選了第一個 Android CI ,當然測試倉庫是我新建的一個 Android 輪子庫。 編譯報錯了。 ...
  • 精靈圖 1. 為什麼需要精靈圖 為了有效的減少伺服器接收和發送請求的次數,提高頁面的載入速度。出現了CSS精靈技術 2. 精靈圖(sprites)的使用 精靈技術主要針對背景圖片。就是把多個小背景圖片整合到一張大圖片中。 這個大圖片也稱為sprites精靈圖或者雪碧圖 移動背景圖片位置,使用back ...
  • 1、啟動頁面:index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>hc ...
  • 元素的顯示與隱藏 1. 本質:讓一個元素在頁面中隱藏或顯示出來 2. display:顯示隱藏 用於設置一個元素應如何顯示 display:none;隱藏對象 display:block;隱藏對象 【註意】 display隱藏元素後,不在占有原來的位置 3. visibility:顯示隱藏 visi ...
  • HTTP狀態碼分類 1XX ——信息,伺服器收到請求,需要請求者繼續執行操作 2XX——成功,操作被成功接收並處理 3XX——重定向,需要進一步的操作以完成請求 4XX——客戶端錯誤,請求包含語法錯誤或者無法完成請求 5XX——伺服器錯誤,伺服器在處理請求的過程中發生了錯誤 2XX狀態碼 | 狀態碼 ...
  • 事件發生時會在元素節點之間按照特定的順序傳播,這個傳播過程即DOM事件流。 DOM事件流分為三個階段,分別為: 捕獲階段:事件從Document節點自上而下向目標節點傳播的階段; 目標階段:真正的目標節點正在處理事件的階段; 冒泡階段:事件從目標節點自上而下向Document節點傳播的階段。 捕獲階 ...
  • 一、載入 ui element vue add element 載入過程及成功結果如下 > vue add element> �� Installing vue-cli-plugin-element... > + [email protected] > added 1 pack ...
  • 在安裝vue-cli之前,要先安裝node.js這個大家百度一下就可以了 1、安裝 vue-cli npm install -g @vue/cli-init 2、初始化一個項目,名為 hcmanage ,並選擇使用 webpack 打包方式 vue init webpack hcmanage 3、切 ...
一周排行
    -Advertisement-
    Play Games
  • 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後,項目結構如下所示: MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread] 特性用於需要與 COM 組件交互的應用程式,尤其是依賴單線程模型(如 Windows Forms 應用程式)的組件。在 STA 模式下,線程擁有自己的消息迴圈,這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中,全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理,可以有效地捕獲並處理未預見的異常,從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • 前言 給大家推薦一款開源的 Winform 控制項庫,可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫,同時也提供了工具類庫、擴展 ...
  • 說明 該文章是屬於OverallAuth2.0系列文章,每周更新一篇該系列文章(從0到1完成系統開發)。 該系統文章,我會儘量說的非常詳細,做到不管新手、老手都能看懂。 說明:OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友,請關註我吧(*^▽^*) ...
  • 一、下載安裝 1.下載git 必須先下載並安裝git,再TortoiseGit下載安裝 git安裝參考教程:https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit,Git客戶端,32/6 ...
  • 前言 在項目開發過程中,理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼,還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程:Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 一:背景 1. 講故事 前段時間有位朋友找到我,說他的窗體程式在客戶這邊出現了卡死,讓我幫忙看下怎麼回事?dump也生成了,既然有dump了那就上 windbg 分析吧。 二:WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死,入口門檻很低,後續往下分析就不一定了,不管怎麼說先用 !clrsta ...
  • 前言 人工智慧時代,人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API,工具不僅易於集成,還具備高效處理能力。 本文將介紹一款如何利用這些API,為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...