学习发布小程序组件到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')