如何创建和发布自己的独家组件库创建组件库项目构建项目

创建一个新的空个小程序项目，输入根目录并初始化 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文件中添加一个新字段（Mini 官员给出的约束）。

NPM软件包将在此处专门提到NPM软件包（以下简称为NPM的软件包）。由于的自定义组件的特殊性质，原始的NPM软件包机制无法满足我们的需求，因此 NPM软件包需要一些约束：

的NPM软件包要求根目录中必须有一个构建文件生成目录（默认为目录）。可以通过在.json文件中添加新字段来指定此目录（我在此处使用lib）。 的NPM软件包仅构建文件生成目录将被视为软件包的足迹。上传代码时，仅将上传该目录的代码。如果 NPM软件包具有一些与测试和构建相关的代码，请将其放在构建文件生成目录之外。您也可以使用。文件以避免向NPM发布一些非企业代码文件。请将与测试和建筑物相关的依赖项放入字段中，以避免将其包装到软件包中。

指南迷你计划的官方文件

准备准备后，可以启动大会的开发，我们将不会在此处详细介绍。

发布NPM软件包注册

单击以注册一个NPM帐户（需要电子邮件验证）以查看NPM源。 NPM释放的来源需要其自己的来源，而 源无法解决。

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

登录

npm login

发布和查看

已发表的软件包名称不能包含大写！呢呢

npm publish

发布成功后，您可以访问官方网站查看/管理

更新

更新NPM软件包必须更新版本号！

npm publish

使用组件库

在使用NPM构建之前，请阅读微信的官方NPM支持

# 通过 npm 安装 npm i nicolia-miniprogram # 通过 yarn 安装 yarn add nicolia-miniprogram

建造

构建NPM软件包：打开开发人员工具 - > ->构建NPM，​​您可以在构建完成后使用组件。

引用

引入组件：以弹出组件为例，您只需要在JSON配置文件中配置相应的路径即可。在开发人员构建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>

预览

扫描下面的QR码以体验组件库示例：

组件库NPM地址： -

示例代码地址：示例代码