小程序npm包创建、上传、使用

第一部分：npm包创建过程

1. 没有注册AppID，可以使用测试号，点击“确定”，创建小程序。

创建小程序

2. 终端切到项目根目录，执行npm init生成package包，及配置pageage信息。

liqun@bogon npm-package % npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (npm-package) eqx_npm_package_0816
version: (1.0.0) 0.0.1
description: show npm package create progress!
entry point: (app.js)
test command:
git repository:
keywords:
author: lee
license: (ISC)
About to write to /Users/liqun/Desktop/npm-package/package.json:
{
  "name": "eqx_npm_package_0816",
  "version": "0.0.1",
  "description": "show npm package create progress!",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "lee",
  "license": "ISC"
}


Is this OK? (yes) yes

3. 新建src文件夹之后，把微信小程序自定义组件的index.js、index.wxss、index.json、index.wxml四个文件都拉到src文件夹里面即可。文件目录如下图：

创建src文件

4. 修改package包信息，添加信息：

在 package.json 文件中新增一个 miniprogram 字段，指向src文件即可。这是官方文档发布npm的约束条件。npm支持 微信小程序官方文档

{
  "name": "eqx_npm_package_0816",
  "version": "0.0.1",
  "description": "show npm package create progress!",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "lee",
  "license": "ISC",
  "miniprogram":"src"
}

5. 发布到npm

在https://www.npmjs.com/，注册npm账号，记得邮箱验证，做好记录。

• 安装nrm（npm源管理工具），用来切换源。

npm install -g nrm
// 查看版本，大写V
nrm -V
// 添加源，公司私有源
nrm add eqxiu http://npm.*******.cn

• 查看源：

liqun@bogon npm-package % nrm ls
  npm -------- https://registry.npmjs.org/
  yarn ------- https://registry.yarnpkg.com/
  cnpm ------- http://r.cnpmjs.org/
  taobao ----- https://registry.npm.taobao.org/
  nj --------- https://registry.nodejitsu.com/
  npmMirror -- https://skimdb.npmjs.com/registry/
  edunpm ----- http://registry.enpmjs.org/
// 公司源，不便暴露，隐藏下
* eqxiu ------ http://npm.*******.cn/

• 使用nrm切换npm源：

liqun@bogon npm-package % nrm use npm

   Registry has been set to: https://registry.npmjs.org/

• 登录：

liqun@bogon npm-package % npm login
Username: eqxiu_lee
Password:
Email: (this IS public) ******@*****.com
Logged in as eqxiu_lee on https://registry.npmjs.org/.

• 发布（注：报名不要含有大写）：

liqun@bogon npm-package % npm publish
npm notice
npm notice 📦  eqx_npmpackage_lee@0.0.1
npm notice === Tarball Contents ===
npm notice 364B  app.js
npm notice 1.5kB pages/index/index.js
npm notice 1.5kB src/index.js
npm notice 305B  pages/logs/logs.js
npm notice 460B  utils/util.js
npm notice 295B  app.json
npm notice 27B   pages/index/index.json
npm notice 27B   src/index.json
npm notice 77B   pages/logs/logs.json
npm notice 271B  package.json
npm notice 1.4kB project.config.json
npm notice 191B  sitemap.json
npm notice 952B  pages/index/index.wxml
npm notice 970B  src/index.wxml
npm notice 197B  pages/logs/logs.wxml
npm notice 194B  app.wxss
npm notice 278B  pages/index/index.wxss
npm notice 278B  src/index.wxss
npm notice 106B  pages/logs/logs.wxss
npm notice === Tarball Details ===
npm notice name:          eqx_npmpackage_lee
npm notice version:       0.0.1
npm notice package size:  3.5 kB
npm notice unpacked size: 9.3 kB
npm notice shasum:        f231fb905241e3555b9b755f5df3ef8835e445aa
npm notice integrity:     sha512-i0xWA9ATH71uM[...]tzEF2syORMRPg==
npm notice total files:   19
npm notice
+ eqx_npmpackage_lee@0.0.1

• 官网查看发布信息：

npm账号

• 变更代码，更新npm包，需要改下版本号，再发布。

第二部分：npm包使用

1. 创建小程序，使用测试号。

创建测试小程序

2. 终端切到该目录，初始化npm，创建package.json文件。

liqun@bogon miniprogram-5 % npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (miniprogram-5)
version: (1.0.0)
description:
entry point: (app.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/liqun/WeChatProjects/miniprogram-5/package.json:

{
  "name": "miniprogram-5",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)

3. 安装eqx_npmpackage_lee包：

liqun@bogon miniprogram-5 % npm install eqx_npmpackage_lee
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN miniprogram-5@1.0.0 No description
npm WARN miniprogram-5@1.0.0 No repository field.

+ eqx_npmpackage_lee@0.0.1
added 1 package from 1 contributor and audited 1 package in 4.523s
found 0 vulnerabilities

4. 小程序开发工具：工具 - 构建npm。

组件代码

5. 使用组件填入后，刷新，helllo world变成了红色，其实我们自定义的组件就只有这个功能。方便演示流程。

使用组件

6. 更新安装npm包，然后执行npm i，重新构建npm。

npm包版本信息