小程序：基于小程序的UI组件npm包开发

资料

小程序接入NPM包开发实践
weui
vant-weapp
wux-weapp
lin-ui

最简实现

其实就是自定义组件，我们只需要把 miniprogram 指向我们的组件就好了，这样在我们点击构建 npm 的时候，就会将 miniprogram 对应的路径文件复制到 miniprogram_npm 中，这样我们就可以引入组件了。

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

1、新建一个小程序
2、在 components 文件夹中新建一个文件夹叫 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 文件内容为 <text>components/zy-button/zy-button.wxml</text>
4、组件制作完了，我们先打包（npm pack），然后安装（npm i components/zy-ui/zy-ui-1.0.0.tgz），然后引入如下图：

5、显示成功

复杂实现

像上面资料中的实现，都比较工程化一点，但是比较复杂，需要自己去实现打包的过程，改天我也会自己实现一个再来更新

思考

我们 npm install 某一个包的时候，在普通的 web 代码中如 js、vue，我们需要在 package.json 中定义入口文件位置 "main": "index.js" ，这样我们引入的时候直接 import 就是 import 的这个入口文件。

但是小程序端是不同的：

我们 npm install 的时候，会把我们的代码整个下载下来，然后当我们点击 构建npm 的时候才会将 "miniprogram": "./" 这个路径下的文件复制到小程序 的 miniprogram_npm 文件夹中，我们就可以引入了，所以跟 "main": "index.js"没有关系