Detailed explanation of WeChat applet using npm to introduce third-party packages

1 Introduction

Starting from Mini Program Basic Library version 2.2.1 or above, and Developer Tools 1.02.1808300 or above, Mini Program supports using npm to install third-party packages.

This document requires developers to have a certain understanding of npm, so it will not introduce the basic functions of npm. If you have not come into contact with npm before, please read the official npm documentation to learn.

2 WeChat applet npm environment construction

2.1 Create package.json file

Currently, all newly created mini program projects have a package.json file. If there is no such file, directly enter the root folder of the mini program project and use the terminal to enter the following command to initialize the environment:

npm init

Note: Using this command requires the node environment to be installed on the computer; just press Enter all the way during the first init

Get the following file structure:

Insert image description here

2.2 Modify project.config.json

Projects created by the developer tools, miniprogramRootby default miniprogram, package.jsonhave npm builds that do not work properly outside of them.

You need to manually project.config.jsonadd the following configuration inside so that the developer tools can correctly index the location of npm dependencies.

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

Note: Due to the file structure problem of the mini program directory created by the current new version of developer tools, the file directory built by npm is miniprogram_npm, and the development tool will create the file name of miniprogram_npm in the current directory by default, so the new version of miniprogramNpmDistDir is configured as './ 'That's it

2.3 Modify project.private.config.json configuration

The project.private.config.json file configuration will overwrite the project.config.json file configuration. You need to modify the project.private.config.json setting. Beginners can delete it directly.

2.4 Build npm package

Open the WeChat developer tools, click Tools -> Build npm , and check the Use npm module option. After the build is completed, you can introduce the component.

Insert image description here
Note: If you follow the above steps to build and still get a build error, check whether the project.config.json file contains the following configuration:

    "useCompilerPlugins": [
      "typescript"
    ]

If there is any, delete it directly and try to rebuild it.

2.5 typescript support

If you use typescript to develop small programs, you also need to do the following operations to obtain a smooth development experience.

Install miniprogram-api-typings

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

2.6 Install components

This case takes the vant component as an example.

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

2.7 Introduce and use components

Taking the Button component as an example, you only need to configure the path corresponding to the Button in app.jsonor .index.json

The import paths in all component documents take npm installation as an example. If you use @vant/weapp by downloading the source code, please change the path to the directory where @vant/weapp is located in the project.

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

After introducing the component, you can use the component directly in wxml

<van-button type="primary">按钮</van-button>

As shown in the picture:

Insert image description here

At this point, the third-party component package has been successfully introduced