微信小程序如何创建并发布自己的专属组件库

创建组件库项目

搭建项目

新建空小程序项目，进入根目录，初始化npm npm init

{
  "name": "nicolia-miniprogram",
  "version": "0.0.4",
  "description": "simple miniprogram npm package",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "nicolia",
  "license": "ISC",
  "miniprogram": "lib"
}

这里需要注意的是需要在json文件中新增一个字段miniprogram（小程序官方给出的约束条件）。

这里要发布的 npm 包是特指专为小程序定制的 npm 包（下称小程序 npm 包）。因为小程序自定义组件的特殊性，原有的 npm 包机制无法满足我们的需求，所以这里需要对小程序 npm 包做一些约束：

小程序 npm 包要求根目录下必须有构建文件生成目录（默认为 miniprogram_dist 目录），此目录可以通过在 package.json 文件中新增一个 miniprogram 字段来指定（我这里用的是lib）

小程序 npm 包里只有构建文件生成目录会被算入小程序包的占用空间，上传小程序代码时也只会上传该目录的代码。如果小程序 npm 包有一些测试、构建相关的代码请放到构建文件生成目录外。另外也可以使用.npmignore文件来避免将一些非业务代码文件发布到 npm 中。

测试、构建相关的依赖请放入 devDependencies 字段中避免被一起打包到小程序包中。

指路小程序官方文档

准备工作就绪后，就可以开始组建的开发，这里不做赘述。

发布npm包

注册

点击注册npm账号（需要邮箱验证）查看npm源，npm发布需要本身的源，淘宝镜像源搞不了。

npm config get registry
npm config set registry https://registry.npmjs.org/

发布&查看

发布的包名不能含有大写！！！

npm publish

发布成功后可以去官网查看/管理

更新

更新npm包必须更新版本号！

npm publish

使用组件库

使用 npm 构建前，请先阅读微信官方的 npm 支持

# 通过 npm 安装
npm i nicolia-miniprogram

# 通过 yarn 安装
yarn add nicolia-miniprogram

构建

构建npm包: 打开开发者工具->工具->构建npm，构建完成即可使用组件

引用

引入组件：以 pop-up 组件为例，只需要在json配置文件中中配置 ImagePreview 对应的路径即可。开发者工具构建npm之后会生成一个miniprogram_npm文件夹，直接引用该文件夹下的组件。

// 通过 npm 安装
{
    "usingComponents": {
	"pop-up": "/miniprogram_npm/nicolia-miniprogram/popup/popup"
    }
}

使用

引入组件后，可以在 wxml 中直接使用组件

<pop-up show="{{ show }}" direction="{{ direction }}" catch:close="handleClose">
  <view class="container">{{ text }}</view>
</pop-up>

预览

扫描下方二维码，体验组件库示例：

组件库npm地址： nicolia-miniprogram

示例代码地址：示例代码

创建小程序的npm包