uniapp通过npm使用第三方库兼容微信小程序

文章目录

• 前言
• 一、uniapp中初始化npm
• 二、手动在项目根目录下添加一个文件project.config.json这个文件配置文件让微信小程序识别
• 三、hbuiderx中运行到微信小程序，然后在微信开发者工具执行下面操作构建npm
• 四、最后使用的时候通过模块或者commonjs引入使用即可

---

前言

用uniapp开发微信小程序的时候想要使用npm第三方库它需要自己手动构建

---

一、uniapp中初始化npm

先在uniapp中npm init -y初始化npm

二、手动在项目根目录下添加一个文件project.config.json这个文件配置文件让微信小程序识别

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

三、hbuiderx中运行到微信小程序，然后在微信开发者工具执行下面操作构建npm

点击菜单栏的「工具」》选择「构建npm」》构建成功后，项目目录中会生成miniprogram_npm文件夹，这是小程序版的npm包目录

四、最后使用的时候通过模块或者commonjs引入使用即可

// ES6模块引入方式
import package from 'packageName'

// CommonJS引入方式  
const package = require('packageName')