Small micro-channel uses npm install third-party libraries

Small micro-channel program after version 2.2.1 adds support for npm package loaded, the small program supports the use of npm install third-party packages.

Before selecting the micro-letter Developer Tools "Building npm" being given " not found node_modules" directory ", because" open the wrong way. "

We have to praise the installation of  vantlibraries do examples

1. Initialization

Now create a small program,

(Miniprogram) execute the applet root directory:

nPM heat

Enter some basic information, you can always enter, by default you can, and then generates a package.jsonfile

2. Install third-party libraries

There are documents like address: https://youzan.github.io/vant-weapp/#/intro

The next generation package-lock.json, the use of third-party plug record:

npm install --production

Use --productionoption, you can reduce the number of business-related npm install packages, thereby reducing the size of the entire small package.

Followed by introduction of third-party components:

npm i vant-weapp -S --production

Chan was introduced there is a UI component, it feels good. It will generate a node_modulesdirectory.

3, packet constructed npm

node_modules compile directory will not participate, upload and Packing, so little program you want to use npm package must go again "Building npm" process, in the outermost layer of the same directory node_modules will generate a miniprogram_npmdirectory, which will be stored building npm package after package, which is a small program npm package actually use.

Click on "Tools -> Build npm" in the micro-letter Developer Tools

Finally, in the root directory is generated as follows:

4, the use of the package npm

First cited in .json in:

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

Re-use in .wxml in:

<van-button type="danger">危险按钮</van-button>
<van-progress percentage="50" />

 

 

Reference links:

1. https://blog.csdn.net/junmoxi/article/details/90021817

2. https://segmentfault.com/a/1190000016706395