npm 私服搭建及小程序包的发布

最新推荐文章于 2024-04-22 05:00:00 发布

原创最新推荐文章于 2024-04-22 05:00:00 发布 · 650 阅读

0 ·

CC 4.0 BY-SA版权

小程序专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何使用小程序命令行工具初始化项目，创建并发布小程序包至npm私服，以及如何在其他项目中使用这些包。涵盖了初始化、构建、发布和使用的全过程。

npm 私服搭建及小程序包的发布

npm 私服的搭建

参考文档

npm私服搭建文档

根据参考文档来就行，但是参考文档中关于小程序包的发布没有明确的说明，网上资料也比较匮乏，我主要记录的是小程序如何发布到私服中，至于如何搭建请参考文档中关于私服搭建的说明。

小程序包发布到私服

一、前言

由于工作的需要，需要吧一些常用的公共组件发布到私服中，方便后续项目的一个使用。但是网上的教程目前还不全，或者说还不够完善，没有详细的讲解到如何创建一个npm包到npm包的一个发布，这就是我写这篇文章的目的。

二、前期准备工作

npm环境（略）
小程序命令行工具：miniprogram-cli

小程序命令行工具：

安装
```
npm install -g @wechat-miniprogram/miniprogram-cli
```
TIPS

需要全局安装，在以后的工作中都需要使用到

初始化

miniprogram init [options] [dirPath]

option 描述
-t, --type 项目的初始化所使用的模板
-f, --force 强制初始化项目，可能会覆盖掉目录中已存在的项目
-p, --proxy 下载/更新模板时的请求代理
-n, --newest 使用线上最新的模板进行项目的初始化

升级
```
miniprogram upgrade [options] [dirPath]
```
根据最新模板对已有项目进行升级。目前仅支持自定义组件项目。

option 描述
-f, --force 强制升级项目，会覆盖掉原有项目中的构建相关文件
-p, --proxy 下载/更新模板时的请求代理
缓存
```
miniprogram cache [options]
```
option 描述
-c, --clear 清空缓存的模板

option	描述
-t, --type	项目的初始化所使用的模板
-f, --force	强制初始化项目，可能会覆盖掉目录中已存在的项目
-p, --proxy	下载/更新模板时的请求代理
-n, --newest	使用线上最新的模板进行项目的初始化

option	描述
-f, --force	强制升级项目，会覆盖掉原有项目中的构建相关文件
-p, --proxy	下载/更新模板时的请求代理

option	描述
-c, --clear	清空缓存的模板

三、具体步骤

这里主要是我在使用过程中的一些步骤。可能存在不合理的地方，或者说有些地方的使用可能不对

初始化项目

1.1 打开小程序开发工具初始化一个项目【demo-1】

1.2 打开Mac终端、进入刚才创建的项目根目录

1.3 利用小程序命令行工具初始化项目
```
miniprogram init -f
```
说明：

这里需要说明一下我为什么使用 -f

因为我使用 -t 就没成功过，不知道是不是在使用-t的时候缺少了哪一个步骤还是什么，目前还在研究中

在执行完这个操作后会有一个提示，利用键盘上下键选择初始化类型
```
? which type of project want to use to initialize (Use arrow keys)
❯ custom-component 
  miniprogram 
  plugin 
  game 
```
这里选择第一个，然后回车，会要求你输入包名，如果默认，直接回车
```
? please input the package name (demo-1) 
```
回车后需要填写包版本号，默认1.0.0
```
? please input the package version (1.0.0) 0.0.1
```
这一步需要输入小程序dist目录名称,直接回车，使用默认名称
```
? please input the miniprogram dist folder (miniprogram_dist) 
```
其他的全部默认就行，执行到这里，我们的一个npm初始化包就完成了。当然执行到这里，并非可以直接运行了，我们需要执行一下install操作
```
npm install
```
执行完成后，我们来看一下这个项目的一些目录结构
```
|--miniprogram_dev // 开发环境构建目录
|--miniprogram_dist // 生产环境构建目录
|--src // 源码
|   |--components // 通用自定义组件
|   |--images // 图片资源
|   |
|   |--xxx.js/xxx.wxml/xxx.json/xxx.wxss // 暴露的 js 模块/自定义组件入口文件
|
|--test // 测试用例
|--tools // 构建相关代码
|   |--demo // demo 小程序目录，开发环境下会被拷贝生成到 miniprogram_dev 目录中
|   |--config.js // 构建相关配置文件
|
|--gulpfile.js
```
还有些没有用到的目录和文件，在这里并没有列出来。

这里我需要讲的就是一个src文件夹和config.js文件
- src文件夹：src文件夹是我们需要上传到npm私服中的文件，也就是我们其他项目需要使用的npm包，不建议将我们的组件放在比较深的一个文件目录中。
- config.js：这个主要是在编译的时候需要修改的一个地方。比如说esline。这个对我来说是一个比较恶心的地方。不是很喜欢用，在编译的时候很容易报错
到这一步我们的初始化也就算是完成了。
开始项目
1. 删除src中的所有文件
2. 在src文件中新建一个demo组件
3. 修改tools/config.js中 entry: [‘index’] 为 entry: [‘demo’]，目的是编译的时候小程序命令行找到文件。注释掉’eslint-loader’，（可以不注释）
4. 执行命令 npm run build
```
npm run build
```
  看到如下所示，就表示build成功
```
Hash: 11c711f3d73e5df3c912
Version: webpack 4.41.4
Time: 607ms
Built at: 2019-12-23 9:49:32 AM
```
  这个时候就可以在项目中看到一个miniprogram_dist文件夹，这个文件夹中的文件就是我们其他项目中使用到的包
5. 上传npm私服（这一步需要账号密码，具体方式请参照文章开头的私服搭建参考文档中的说明）
```
npm publish --registry=http://your_nexus_service/repository/rupiahone-hosted/
```
  your_nexus_service:你的nexus服务器地址
6. npm 私服包的使用
  
  npm私服包的使用和npm其他外网包的使用是一致的，具体请参考小程序中如何使用npm
  
  需要说明的一点。在使用私服npm包的时候需要带–registry=http://your_nexus_service/repository/rupiahone-hosted/参数例如：
```
npm install demo-1 --registry=http://your_nexus_service/repository/rupiahone-hosted/
```