学习发布小程序组件到npm,及在小程序中运用的全过程。特此记录
1. 初始化项目
创建一个项目文件夹,并在项目根目录下执行
npm init
这时终端会提醒需要配置一些信息,按需填入即可
2. 新建源码文件夹(src)
在项目根目录下新建文件夹src,用来放置源码。把小程序自定义组件的index.js、index.wxss、index.json、index.wxml四个文件都拉到src文件夹中即可。
3. 修改package.json文件
在package.json文件中新增一个miniprogram字段,指向src文件即可。这是官方文档发布npm约束条件
{
"name": "bb-miniprogram-image",
"version": "1.0.0",
"description": "微信小程序自定义image组件",
"miniprogram": "src",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "bhx",
"license": "ISC"
}
4. 发布到npm上
4.1、 npm上注册账号
4.2、源切换
这是个坑,如果安装过如下命令(淘宝镜像):
npm install -g cnpm --registry=https://registry.npm.taobao.org
在发布之前我们一定要把源切换回npm,而不是淘宝镜像,运行下面这个命令即可:
npm config set registry=http://registry.npmjs.org
可运用nrm管理各个源:
// 安装nrm
cnpm i nrm -g
安装好nrm后运行nrm ls
命令即可看到所有源,可使用nrm use npm
来将源切换到npm
4.3、登录
在命令行执行npm login
4.4、正式发布npm包
在项目根目录运行npm publish
即可,顺利的话直接成功,当然也可能会遇到问题:
- 第一个就是权限问题,也许报这样的错误npm ERR! Error: EPERM: operation not permitted,这时候就得使用管路员权限来进行发布了,window + x会看到管理员终端选项,打开这个终端,然后再进行登录,发布即可。
- 第二个就是名称问题,就是你的包名在npm上已经存在了,所以在package.json中将你的包名改成其他的,这样再发布,应该就没问题了。
5、在真实项目中使用
5.1、初始化
在已创建好的小程序项目根目录下执行npm init
来初始化项目
5.2、安装包
安装所需的包npm i bb-miniprogram-image
5.3、构建npm
在小程序开发工具中,点击工具->构建npm即可,此时会看见项目目录中多了个miniprogram_npm文件夹,里面有我们装的包。在本地设置中还要勾选使用npm模块选项
5.4、使用组件(如果安装的包是组件)
在需要使用组件的地方引入,即在对应json文件中配置
{
"usingComponents": {
"bb-image": "bb-miniprogram-image"
}
}
配置好后即可在wxml文件中使用
<view class="container">
<bb-image image-container-class="img-container" image-class="img" src="xxxxx" />
</view>
5.5、使用工具函数(如果安装的包不是组件,而是函数或方法)
在需要使用的js文件中引入npm包,即可使用了
const myPackage = require('packageName')
const packageOther = require('packageName/other')
您好!我有个问题。我有个小程序A,在小程序A中我把自己的自定义组件,成功publish‘到npm上面去了。然后在另一个小程序B中,install下来以后,也构建完成了,但是构建好了以后,在miniprogram_npm中的文件不是微信小程序自定义组件的形式,而是一个index.js和index.js.map,我该怎么使用这个啊
您好,有个问题想询问下,背景是:我按照官方的这个方法流程去完成开发并上传到npm服务器上,但是在自己另一个项目中通过install安装上传好的这个组件包之后,在node_modules文件夹对应的组件包中并没有miniprogram_dist这个文件夹,只包含了src等源码里边的内容。想问的是:我在组件的源码里边需要增加哪些配置或者其他的方式,可以让我在npm publish后在其他项目里install后可以直接使用?如果您了解烦请知道一下