資料

小程序接入NPM包開(kāi)發(fā)實(shí)踐
weui
vant-weapp
wux-weapp
lin-ui

最簡(jiǎn)實(shí)現(xiàn)

其實(shí)就是自定義組件，我們只需要把 miniprogram 指向我們的組件就好了，這樣在我們點(diǎn)擊構(gòu)建 npm 的時(shí)候，就會(huì)將 miniprogram 對(duì)應(yīng)的路徑文件復(fù)制到 miniprogram_npm 中，這樣我們就可以引入組件了。

{
  "name": "wux-weapp",
  "miniprogram": "packages/lib"
}

1、新建一個(gè)小程序
2、在 components 文件夾中新建一個(gè)文件夾叫 zy-ui 并 npm init -y

{
  "name": "zy-ui",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "miniprogram": "./",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

3、在 zy-ui 里新建 zy-button 文件夾，zy-button.wxml 文件內(nèi)容為 <text>components/zy-button/zy-button.wxml</text>
4、組件制作完了，我們先打包（npm pack），然后安裝（npm i components/zy-ui/zy-ui-1.0.0.tgz），然后引入如下圖：

5、顯示成功

復(fù)雜實(shí)現(xiàn)

像上面資料中的實(shí)現(xiàn)，都比較工程化一點(diǎn)，但是比較復(fù)雜，需要自己去實(shí)現(xiàn)打包的過(guò)程，改天我也會(huì)自己實(shí)現(xiàn)一個(gè)再來(lái)更新

思考

我們 npm install 某一個(gè)包的時(shí)候，在普通的 web 代碼中如 js、vue，我們需要在 package.json 中定義入口文件位置 "main": "index.js" ，這樣我們引入的時(shí)候直接 import 就是 import 的這個(gè)入口文件。

但是小程序端是不同的：

我們 npm install 的時(shí)候，會(huì)把我們的代碼整個(gè)下載下來(lái)，然后當(dāng)我們點(diǎn)擊 構(gòu)建npm 的時(shí)候才會(huì)將 "miniprogram": "./" 這個(gè)路徑下的文件復(fù)制到小程序 的 miniprogram_npm 文件夾中，我們就可以引入了，所以跟 "main": "index.js"沒(méi)有關(guān)系