评论

如何发布小程序组件到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
收藏
评论

1 个评论

登录 后发表内容