使用第三方包

微信小程序使用第三方包安装后为什么还npm构建了一次,才能导入使用

微信小程序在使用第三方包时需要进行npm构建的原因主要包括以下几点：

1. 兼容性处理：由于微信小程序的环境与Node.js环境不同，直接使用npm包可能会遇到兼容性问题。构建过程可以将npm包转换为小程序可以识别和使用的格式。

2. 依赖分析和打包 ：构建过程中，会进行依赖分析和打包，类似于webpack的过程。小程序npm包会直接拷贝构建文件生成目录下的所有文件到miniprogram_npm 中；其他npm包则会从入口js文件开始走一遍依赖分析和打包过程。

3. 项目目录结构要求 ：node_modules目录不会参与编译、上传和打包，所以小程序想要使用npm包必须走一遍“构建npm”的过程。在最外层的node_modules的同级目录下会生成一个miniprogram_npm 目录，里面存放构建打包后的npm包，也就是小程序真正使用的npm包。

4. 使用npm模块的配置：在微信开发者工具中，需要勾选“使用npm模块”选项，以确保项目能够识别和使用npm包。

5. 构建步骤的必要性：每次安装模块之后都需要构建npm，以确保新安装的模块能够被小程序识别和使用。

6. TypeScript项目的特殊要求：对于使用TypeScript的项目，构建步骤还涉及到 TypeScript 代码的编译，确保.ts文件被转换成.js文件，这样才能被小程序识别和使用。

7. 配置TypeScript路径别名：

   • tsconfig.json中的"paths"配置允许你在TypeScript代码中使用别名（如@vant/weapp ）来引用模块，而不是直接引用具体的文件路径。这样做可以简化引用路径，提高代码的可读性和可维护性。

8. 指定npm包构建目录：

   • project.config.json中的"packNpmRelationList" 配置指定了npm包构建后存放的目录。这告诉微信开发者工具在构建过程中，将npm包从node_modules目录复制到miniprogram/ 目录下，并创建一个miniprogram_npm文件夹来存放这些构建后的文件。

9. 构建npm包：

   最后一步是实际执行构建操作，微信开发者工具会根据上述配置，将npm包复制和转换到指定目录，确保它们能够在小程序中被正确识别和使用。这个步骤是必要的，因为小程序不支持直接引用node_modules 中的包，必须经过构建过程。

10. 使用npm包：

    • 在小程序的app.json中，添加usingComponents字段，指定组件路径，告诉微信开发者工具在编译时，将这些组件替换为对应的npm包。

添加配置：

tsconfig.json

"baseUrl": ".",
"paths": {
    "@vant/weapp/*": ["./node_modules/@vant/weapp/dist/*"]
  },

project.config.json

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

工具构建npm

    "usingComponents": {
        "van-button": "@vant/weapp/button/index"
    },