前言：
很多的小伙伴在刚接触小程序时都在需要使用一些 npm 上的包很头疼，不知道怎么搭建，完全不能像vue和react中那么方便，直接 npm install 包名 下来 就能直接通过import来使用。下面本文就主要通过微信小程序中常用的vant框架和小程序组件间通信常用的框架包 pubsub-js来给大家做一个示例
版本号
1、当前开发者工具调试基础库版本号
2、vant和pubsub-js版本号
一、构建npm包的基础文件 pageage.json
npm init
这一步如果没有需要更改的地方，一直回车即可
二、下载pubsub-js
npm install pubsub-js
三、修改文件根目录文件： project.config.json
注意： 其他的基本不变，主要是修改以下位置
这个位置的初始构建如果是 “srcMiniprogramRoot”: “miniprogram/”
需要把修改成下面的格式， “compileType”: “miniprogram” 这一项如果没有也需要加上
"srcMiniprogramRoot": "miniprogram_npm/",
"compileType": "miniprogram"
下方配上一个小程序已经构建好的 project.config.json示例 文件，里面加了云开发的相关文件，如不需要可以删除，不然程序可能报错
appid本人已删除，需要使用你个人的appid
{
"cloudfunctionRoot": "cloudfunctions/",
"description": "项目配置文件，详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
"setting": {
"urlCheck": true,
"es6": false,
"enhance": true,
"postcss": true,
"preloadBackgroundData": false,
"minified": true,
"newFeature": false,
"coverView": true,
"nodeModules": false,
"autoAudits": false,
"showShadowRootInWxmlPanel": true,
"scopeDataCheck": false,
"uglifyFileName": false,
"checkInvalidKey": true,
"checkSiteMap": true,
"uploadWithSourceMap": true,
"compileHotReLoad": true,
"lazyloadPlaceholderEnable": false,
"useMultiFrameRuntime": true,
"babelSetting": {
"ignore": [],
"disablePlugins": [],
"outputPath": ""
},
"useIsolateContext": true,
"userConfirmedBundleSwitch": false,
"packNpmManually": false,
"packNpmRelationList": [],
"minifyWXSS": true,
"disableUseStrict": false,
"minifyWXML": true,
"showES6CompileOption": false,
"useCompilerPlugins": false,
"ignoreUploadUnusedFiles": true,
"useStaticServer": true
},
"compileType": "miniprogram",
"cloudfunctionTemplateRoot": "cloudfunctionTemplate/",
"condition": {
},
"editorSetting": {
"tabIndent": "insertSpaces",
"tabSize": 5
},
"libVersion": "2.24.0",
"packOptions": {
"ignore": [],
"include": []
},
"appid": "your appid",
"srcMiniprogramRoot": "miniprogram_npm/"
}
四、npm 构建
这一步无脑操作就好 主要步骤：
选择微信开发者工具顶部栏 -----> 工具 ------> 构建npm
构建完成会在根目录生成下面的文件，可以看到pubsub-js相关文件已经在里面了，注意我们的项目结构，不然可能会报错 app.json文件找不到
五、使用pubsub-js
这一步使用过vue或者react的人应该就很清楚了，比较简单的，直接截图看一下应该就明白了
1、使用publish发布消息
2、使用subscribe函数订阅消息
当publish被调用时，subscribe也会被立即调用，自己个人在这里的使用场景是给一个小仙女做的的项目中需要通过用户在用户界面点击登录而后开始计时学习并记录天数的小程序获取到用户的openid
，而后将这个openid设置到全局app.js中去。因此用pubsub-js是最简单的，比之什么各个页面之间的通信设置起来方便多了
六、搭建vant框架
微信小程序的vant框架地址：https://vant-contrib.gitee.io/vant-weapp/#/home
基本的构建方式和pubsub-js是一致的，没有多大的改动，关键位置在于vant需要在全局上设置组件的别名，该文件为在根目录的app.json文件，和tabBar同级，别放错位置了。看截图
另外，还需要导入vant相关的样式文件到全局wxss中去，请看示例
app.json 文件源码示例
{
"pages": [
"pages/index/index",
],
"window": {
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "诗词歌赋",
"navigationBarTextStyle": "black",
"onReachBottomDistance": 0,
"enablePullDownRefresh": true
},
"sitemapLocation": "sitemap.json",
"tabBar": {
"color": "#bfbfbf",
"selectedColor": "#000",
"backgroundColor": "#fff",
"borderStyle": "white",
"list": [
},
"usingComponents": {
"van-button": "@vant/weapp/button/index",
"van-nav-bar": "@vant/weapp/nav-bar/index",
"van-tab": "@vant/weapp/tab/index",
"van-tabs": "@vant/weapp/tabs/index",
"van-transition": "@vant/weapp/transition/index",
"van-tree-select": "@vant/weapp/tree-select/index",
"van-dropdown-menu": "@vant/weapp/dropdown-menu/index",
"van-dropdown-item": "@vant/weapp/dropdown-item/index",
"van-notify": "@vant/weapp/notify/index",
"van-cell": "@vant/weapp/cell/index",
"van-cell-group": "@vant/weapp/cell-group/index",
"van-empty": "@vant/weapp/empty/index",
"van-collapse": "@vant/weapp/collapse/index",
"van-collapse-item": "@vant/weapp/collapse-item/index",
"van-search": "@vant/weapp/search/index",
"van-row": "@vant/weapp/row/index",
"van-col": "@vant/weapp/col/index",
"van-image": "@vant/weapp/image/index",
"van-loading": "@vant/weapp/loading/index",
"van-icon": "@vant/weapp/icon/index",
"van-sticky": "@vant/weapp/sticky/index",
"van-field": "@vant/weapp/field/index"
},
"lazyCodeLoading": "requiredComponents"
}
而后可以在全局中使用相关的组件，请看基本示例
全部搭建下来的构建包应该是下图这样的，注意他们的父级文件夹名都是： miniprogram_npm
最后
关于如何在微信小程序中使用pubsub-js和vant框架的介绍暂时就到这里，感谢观看。
至于npm其他包的构建方式与此类似，希望本文能在你的实际工作中或学习中帮到你