微信小程序构建npm（js和ts）

红太狼 2024-03-16 11:48 45阅读 0赞

先吐槽一下，官方文档写的就是一坨粑粑！真垃圾

#### 微信小程序构建npm ####

*  js版本下构建npm
 *   *  1.需要在电脑上按照node，并确保环境变量配置完毕
     *  2.新建一个小程序项目，js版本
     *  3.从小程序根目录打开cmd命令行
     *  4.在命令行中执行npm init -y
     *  5.继续执行npm install express
     *  6.修改project.config.json中setting
     *  7.点击工具->构建npm
 *  ts版本下构建npm
 *   *  1.需要在电脑上按照node，并确保环境变量配置完毕
     *  2.新建一个小程序项目，ts版本
     *  3.从小程序根目录打开cmd命令行
     *  4.在命令行中执行npm init -y
     *  5.继续执行npm install express
     *  6.删除project.config.json中setting中的useCompilerPlugins
     *  7.在project.config.json中setting添加以下代码
     *  8.点击工具->构建npm
     *  9.将刚才删除的project.config.json中setting的useCompilerPlugins还原回来，不然没法运行，不识别ts了

## js版本下构建npm ##

不要按照官方的来，不然会有以下报错  
![在这里插入图片描述][7e5a39d5c8974fefa834d12439daf698.png]

### 1.需要在电脑上按照node，并确保环境变量配置完毕 ###

### 2.新建一个小程序项目，js版本 ###

### 3.从小程序根目录打开cmd命令行 ###

空白处右键，选择在外部终端窗口中打开  
![在这里插入图片描述][caddcdc969e34e218bc2ef09cee11060.png]

### 4.在命令行中执行npm init -y ###

![在这里插入图片描述][5f81fbfac6ab43299944ce3f38b4a7cc.png]

### 5.继续执行npm install express ###

![在这里插入图片描述][3848b2e63961462db7a10b7cd9e02ebd.png]

### 6.修改project.config.json中setting ###

"packNpmManually": true,
     "packNpmRelationList": [
         {
        
             "packageJsonPath": "./package.json",
             "miniprogramNpmDistDir": "./"
         }
     ]

![在这里插入图片描述][fedb0435f86d479daf2d46d6826f8b10.png]

### 7.点击工具->构建npm ###

![在这里插入图片描述][0c7b7ce9e8f94de0802d7a4136bba231.png]  
之后每次安装新的依赖，都要点击一次构建npm！！！，每次！！！

## ts版本下构建npm ##

### 1.需要在电脑上按照node，并确保环境变量配置完毕 ###

### 2.新建一个小程序项目，ts版本 ###

### 3.从小程序根目录打开cmd命令行 ###

空白处右键，选择在外部终端窗口中打开  
![在这里插入图片描述][48aace70c8ee48e99528186231a6fa95.png]

### 4.在命令行中执行npm init -y ###

### 5.继续执行npm install express ###

![在这里插入图片描述][743d5e4c88ed464baf9f6af51f9f1b6c.png]

### 6.删除project.config.json中setting中的useCompilerPlugins ###

每次构建npm都要记得删除，构建结束记得还原回来  
![在这里插入图片描述][c66fa29b7dae4d63a99cb472f566a338.png]

### 7.在project.config.json中setting添加以下代码 ###

"packNpmManually": true,
    "packNpmRelationList": [
            {
        
                "packageJsonPath": "./package.json",
                "miniprogramNpmDistDir": "./miniprogram/"
            }
        ]

![在这里插入图片描述][3007598f84cf452d908b3d0a50ad4332.png]

### 8.点击工具->构建npm ###

![在这里插入图片描述][0c7b7ce9e8f94de0802d7a4136bba231.png]

### 9.将刚才删除的project.config.json中setting的useCompilerPlugins还原回来，不然没法运行，不识别ts了 ###

![在这里插入图片描述][9f2135bbe4a6427bb678831c4f6f1d0a.png]

之后每次安装新的依赖，都要点击一次构建npm！！！，每次！！！  
每次构建npm前，记得先将project.config.json中setting的useCompilerPlugins删除！！！

[7e5a39d5c8974fefa834d12439daf698.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/2b0925b53c4b488481b8f23b7cfed86f.png
[caddcdc969e34e218bc2ef09cee11060.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/94e5adae2a934115a589dce84a21b9ad.png
[5f81fbfac6ab43299944ce3f38b4a7cc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/cf59a9bf68a94e7d85fa12b39b528820.png
[3848b2e63961462db7a10b7cd9e02ebd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/3da27fbbd056466295c64130ebc83938.png
[fedb0435f86d479daf2d46d6826f8b10.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/92bd1be0d7904060bcfb065d338f2c2d.png
[0c7b7ce9e8f94de0802d7a4136bba231.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/7cd8b8b60bf345d79cb5eba7fe1336fe.png
[48aace70c8ee48e99528186231a6fa95.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/aae3d239a3e44439b5d485b7c7372697.png
[743d5e4c88ed464baf9f6af51f9f1b6c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/4d500df35ab242358ea06a1248ec73fb.png
[c66fa29b7dae4d63a99cb472f566a338.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/0f8237bd3f0f484fa0de3d1c604f6cba.png
[3007598f84cf452d908b3d0a50ad4332.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/005937be9d944d3cbd88def79b6fb8ec.png
[9f2135bbe4a6427bb678831c4f6f1d0a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/b636238486d04d2d8c1d8def96ea1973.png