微信小程序使用npm引入三方包详解

从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始，小程序支持使用 npm 安装第三方包。

此文档要求开发者们对 npm 有一定的了解，因此不会再去介绍 npm 的基本功能。如若之前未接触过 npm，请翻阅官方 npm 文档进行学习。

目前新建的小程序项目都回有package.json 文件，若没有该文件，直接在小程序项目根文件夹下，使用终端输入如下命令初始化环境：

npm init

注：使用该命令需要电脑安装好node环境；初次init直接一路回车即可

得到如下文件结构：

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

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

proje ct.private.config.json 文件配置会覆盖 proje ct.config.json 文件配置，需要修改 proje ct.private.config.json里面的setting，初学者可以直接删除。

    "useCompilerPlugins": [
      "typescript"
    ]

# 通过 npm 安装
npm i -D miniprogram-api-typings

# 通过 npm 安装
npm i @vant/weapp -S --production

以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。

// 通过 npm 安装
// app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

<van-button type="primary"&gt;按钮</van-button&gt;

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

npm 微信程序

目录

1 前言

2 微信 小程序 npm 环境 搭建

2.1 创建 package.json 文件

2.2 修改 project.config.json

2.3 修改 project.private.config.json 配置

2.4 构建 np m 包

2.5 typescript 支持

2.6 安装组件

2.7 引入使用组件

发表回复取消回复

1 前言

2 微信小程序npm环境搭建

2.1 创建package.json文件

2.2 修改 project.config.json

2.3 修改project.private.config.json配置

2.4 构建 npm 包