微信开发者工具构建npm引入安装外部框架包(以VantWeapp为例)

为什么不能再微信小程序中直接使用npm包?

因为微信小程序是在小程序开发环境中运行的，与 Node.js 环境有所区别。因此，不能直接使用通过 npm 下载的包，而是需要通过微信小程序的机制进行转换和适配。

进入正题

第一步:打开终端,输入npm init -y,生成package.json文件

第二步: 输入npm i @vant/weapp -S --production          

 vantweapp地址:Vant Weapp - 轻量、可靠的小程序 UI 组件库

 

 第三步:将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱

第四步:微信开发者工具，点击 工具 -> 构建  npm (先不要按照vantweapp中先配置project.config.json文件)

第五步:小程序原始的一套开发环境比较基础，小程序项目的规模变大后将不易管理，需要有针对性的对开发环境进行调整,需要优化目录结构.

  将文件改成=>

第六步:修改project.config.json文件中的配置

tips:"ignoreDevUnusedFiles": false,       //这俩个是忽略引用了
     "ignoreUploadUnusedFiles": false,    //但是没被调用文件组件的设置

1.  
   {
2.  
   // 省略其他......
3.  
   "setting": {
4.  
   // 省略其他......
5.  
   "ignoreDevUnusedFiles": false, //这俩个是忽略引用了
6.  
   "ignoreUploadUnusedFiles": false, //但是没被调用文件组件的设置
7.  
    
8.  
   // 省略其他......
9.  
   "packNpmManually": true,
10.  
    "packNpmRelationList": [
11.  
    {
12.  
    "miniprogramNpmDistDir": "./miniprogram",
13.  
    "packageJsonPath": "package.json"
14.  
    }
15.  
    ]
16.  
    },
17.  
    "miniprogramRoot": "miniprogram/"
18.  
    }

第七步:引入组件开始使用

在app.json中全局注册

1.  
   // 通过 npm 安装的
2.  
   // app.json
3.  
   "usingComponents": {
4.  
   "van-button": "@vant/weapp/button/index"
5.  
   }

地址:Vant Weapp - 轻量、可靠的小程序 UI 组件库

微信开发者文档 :微信开放文档

这篇好文章是转载于：学新通技术网