商城系統(tǒng) 注冊

npm是什么意思-npm小程序開發(fā)操作教程

2020-09-14|HiShop
導讀:npm 支持 從小程序基礎庫版本 2.2.1 或以上、及開發(fā)者工具 1.02.1808300 或以上開始,小程序支持使用 npm 安裝第三方包。 此文檔要求開發(fā)者們對 npm 有一定的了解,因此不會再去介紹 npm 的...

  npm 支持

  從小程序基礎庫版本 2.2.1 或以上、及開發(fā)者工具 1.02.1808300 或以上開始,小程序支持使用 npm 安裝第三方包。

  此文檔要求開發(fā)者們對 npm 有一定的了解,因此不會再去介紹 npm 的基本功能。如若之前未接觸過 npm,請翻閱 官方 npm 文檔 進行學習。

  使用 npm 包

  在小程序 package.json 所在的目錄中執(zhí)行命令安裝 npm 包:

  npm install

  此處要求參與構建 npm 的 package.json 需要在 project.config.js 定義的 miniprogramRoot 之內。

  tips:開發(fā)者工具 v1.02.1811150 版本開始,調整為根據(jù) package.json 的 dependencies 字段構建,所以聲明在 devDependencies 里的包也可以在開發(fā)過程中被安裝使用而不會參與到構建中。如果是這之前的版本,則建議使用--production選項,可以減少安裝一些業(yè)務無關的 npm 包,從而減少整個小程序包的大小。

  tips: miniprogramRoot 字段不存在時,miniprogramRoot 就是 project.config.js 所在的目錄

  點擊開發(fā)者工具中的菜單欄:工具 --> 構建 npm

npm是什么意思-npm小程序開發(fā)操作教程

  勾選“使用 npm 模塊”選項:

  構建完成后即可使用 npm 包。

  js 中引入 npm 包:

  const myPackage = require('packageName')

  const packageOther = require('packageName/other')

  使用 npm 包中的自定義組件:

  {

  "usingComponents": {

  "myPackage": "packageName",

  "package-other": "packageName/other"

  }

  }

  tips:此處使用 npm 包時如果只引入包名,則默認尋找包名下的 index.js 文件或者 index 組件。

  發(fā)布 npm 包

  發(fā)布小程序 npm 包的約束

  這里要發(fā)布的 npm 包是特指專為小程序定制的 npm 包(下稱小程序 npm 包)。因為小程序自定義組件的特殊性,原有的 npm 包機制無法滿足我們的需求,所以這里需要對小程序 npm 包做一些約束:

  小程序 npm 包要求根目錄下必須有構建文件生成目錄(默認為 miniprogram_dist 目錄),此目錄可以通過在 package.json 文件中新增一個 miniprogram 字段來指定,比如:

  {

  "name": "miniprogram-custom-component",

  "version": "1.0.0",

  "description": "",

  "miniprogram": "dist",

  "devDependencies": {},

  "dependencies": {}

  }

  小程序 npm 包里只有構建文件生成目錄會被算入小程序包的占用空間,上傳小程序代碼時也只會上傳該目錄的代碼。如果小程序 npm 包有一些測試、構建相關的代碼請放到構建文件生成目錄外。另外也可以使用.npmignore文件來避免將一些非業(yè)務代碼文件發(fā)布到 npm 中。

  測試、構建相關的依賴請放入 devDependencies 字段中避免被一起打包到小程序包中。

  發(fā)布其他 npm 包的約束

  如果是已經(jīng)發(fā)布過的一些 npm 包,因為一些原因無法改造成小程序 npm 包的結構的話,也可以通過微調后被使用,但是請確保遵循以下幾點:

  只支持純 js 包,不支持自定義組件。

  必須有入口文件,即需要保證 package.json 中的 main 字段是指向一個正確的入口,如果 package.json 中沒有 main 字段,則以 npm 包根目錄下的 index.js 作為入口文件。

  測試、構建相關的依賴請放入 devDependencies 字段中避免被一起打包到小程序包中,這一點和小程序 npm 包的要求相同。

  不支持依賴 c++ addon,不支持依賴 nodejs 的內置庫:

  const addon = require('./addon.node'); // 不支持!

  const http = require('http'); // 不支持!

  tips:對于一些純 js 實現(xiàn)的 nodejs 內置庫(如 path 模塊),可以通過額外安裝其他開發(fā)者實現(xiàn)的 npm 包來支持。

  使用 require 依賴的時候下列幾種方式也是不允許的:

  // 不允許將 require 賦值給其他變量后再使用,以下代碼不會去解析出具體依賴

  let r;

  r = require;

  r('testa');

  let r2 = require;

  r2('testa');

  // 不允許 require 一個變量,以下代碼依賴運行時,無法解析出具體依賴

  let m = 'testa';

  require(m);

  小程序環(huán)境比較特殊,一些全局變量(如 window 對象)和構造器(如 Function 構造器)是無法使用的。

  發(fā)布流程

  發(fā)布 npm 包的流程簡述如下:

  如果還沒有 npm 帳號,可以到 npm 官網(wǎng) 注冊一個 npm 帳號。

  在本地登錄 npm 帳號,在本地執(zhí)行:

  npm adduser

  或者

  npm login

  在已完成編寫的 npm 包根目錄下執(zhí)行:

  npm publish

  到此,npm 包就成功發(fā)布到 npm 平臺了。

  tips:一些開發(fā)者在開發(fā)過程中可能修改過 npm 的源,所以當進行登錄或發(fā)布時需要注意要將源切回 npm 的源。

  原理介紹

  為了幫助大家更好的理解發(fā)布 npm 包中提到的各種要求,這里簡單介紹一下原理:

  首先 node_modules 目錄不會參與編譯、上傳和打包中,所以小程序想要使用 npm 包必須走一遍“構建 npm”的過程,在每一份 miniprogramRoot 內開發(fā)者聲明的 package.json 的最外層的 node_modules 的同級目錄下會生成一個 miniprogram_npm 目錄,里面會存放構建打包后的 npm 包,也就是小程序真正使用的 npm 包。

  構建打包分為兩種:小程序 npm 包會直接拷貝構建文件生成目錄下的所有文件到 miniprogram_npm 中;其他 npm 包則會從入口 js 文件開始走一遍依賴分析和打包過程(類似 webpack)。

  尋找 npm 包的過程和 npm 的實現(xiàn)類似,從依賴 npm 包的文件所在目錄開始逐層往外找,直到找到可用的 npm 包或是小程序根目錄為止。

電話咨詢 預約演示 0元開店