评论

如何发布小程序组件到npm.js中

发布小程序组件到npm.js中

学习发布小程序组件到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')
点赞 0
收藏
评论

2 个评论

  • a橘猫大侠
    a橘猫大侠
    2021-06-15

    您好!我有个问题。我有个小程序A,在小程序A中我把自己的自定义组件,成功publish‘到npm上面去了。然后在另一个小程序B中,install下来以后,也构建完成了,但是构建好了以后,在miniprogram_npm中的文件不是微信小程序自定义组件的形式,而是一个index.js和index.js.map,我该怎么使用这个啊

    2021-06-15
    赞同
    回复
  • ✨✨Fighter
    ✨✨Fighter
    2020-12-03

    您好,有个问题想询问下,背景是:我按照官方的这个方法流程去完成开发并上传到npm服务器上,但是在自己另一个项目中通过install安装上传好的这个组件包之后,在node_modules文件夹对应的组件包中并没有miniprogram_dist这个文件夹,只包含了src等源码里边的内容。想问的是:我在组件的源码里边需要增加哪些配置或者其他的方式,可以让我在npm publish后在其他项目里install后可以直接使用?如果您了解烦请知道一下

    2020-12-03
    赞同
    回复 2
    • 小包
      小包
      2020-12-03
      小程序比较特殊,你装完一定要npm构建
      2020-12-03
      回复
    • ✨✨Fighter
      ✨✨Fighter
      2020-12-10回复小包
      明白了,感谢
      2020-12-10
      回复
登录 后发表内容