快應(yīng)用 使用npm

npm 是包管理工具，允許開發(fā)者下載第三方包到本地使用，允許開發(fā)者將自己編寫的包上傳到 npm 服務(wù)器。推薦開發(fā)者使用 npm

通過本節(jié)，你將學(xué)會(huì)：

• 引入 npm 包
• 發(fā)布 npm 包

引入 npm 包

開發(fā)者可引入 npm 包中提供的文件，引入后即可正常使用他人編寫的代碼

準(zhǔn)備工作

引入 npm 包前，需要先在本地安裝 npm 包?？蓤?zhí)行以下命令安裝：

npm install <package>

其中 ?<package>? 為 npm 包名。以 npm 包 quick-app-kit-demo 為例：

npm install quick-app-kit-demo

引入文件

本地安裝 npm 包后，就可以引入 npm 包提供的文件了。根據(jù)引入文件類型的不同，引入的方法存在差異。常見文件的類型及引入方法如下：

• 組件文件

使用 ?<import>? 引入 npm 包中的自定義組件，注意設(shè)置組件文件的相對(duì)路徑。以 npm 包 quick-app-kit-demo 為例：

<import name="comp" src="<relative path to node_modules>/node_modules/quick-app-kit-demo/src/component/index.ux"></import>

• 樣式文件

使用導(dǎo)入外部文件或合并外部文件的方式，引入 npm 包中的樣式文件，注意設(shè)置樣式文件的相對(duì)路徑。以 npm 包 quick-app-kit-demo 為例：

<!-- 導(dǎo)入外部文件, 代替style內(nèi)部樣式 -->
<style src="<relative path to node_modules>/node_modules/quick-app-kit-demo/src/common/common.css"></style>

<!-- 合并外部文件 -->
<style>
  @import '<relative path to node_modules>/node_modules/quick-app-kit-demo/src/common/common.css';
</style>

• js 文件

使用 import 引入 npm 包中的 js 文件，注意設(shè)置 js 文件的相對(duì)路徑。以 npm 包 quick-app-kit-demo 為例：

import getStr from '<relative path to node_modules>/node_modules/quick-app-kit-demo/src/common/util'

發(fā)布 npm 包

開發(fā)者也可以發(fā)布 npm 包，分享和重用自己編寫的代碼

準(zhǔn)備工作

1. 準(zhǔn)備好要發(fā)布的目錄
2. 建議目錄下增加 README.md 文件，說明 npm 包的功能及用法等
3. 確保目錄下有 package.json 文件，若目錄下沒有 package.json 文件，執(zhí)行以下命令初始化生成一個(gè)新的 package.json 文件

npm init

注意：暫不支持 npm 包中提供本地圖片資源，請(qǐng)使用線上圖片資源代替

發(fā)布流程

1. 注冊(cè)賬號(hào)

如果還沒有 npm 賬號(hào)，訪問 npm 官網(wǎng) 注冊(cè)賬號(hào)

2. 登錄賬號(hào)

在本地執(zhí)行以下命令，登錄 npm 帳號(hào)

npm login

3. 發(fā)布 npm 包

在目錄下執(zhí)行以下命令，發(fā)布 npm 包

npm publish

4. 驗(yàn)證發(fā)布結(jié)果

訪問 ?https://npmjs.com/package/<package>? ，檢查發(fā)布是否成功，其中 ?<package>? 為 npm 包名

注意：若開發(fā)者修改過 npm 的源，需要在登錄或發(fā)布前將源切回 npm

總結(jié)

推薦開發(fā)者使用 npm 包、發(fā)布 npm 包。有利于分享和復(fù)用代碼，提高開發(fā)效率