小程序 npm 支持

使用 npm 包

复制代码

目前小程序已经支持使用 npm 安装第三方包，因为 node_modules 目录中的包不会参与小程序项目的编译、
上传和打包，因此在小程序
项目中要使用的 npm 包，必须走一遍构建 npm 的过程。

在构建成功以后，默认 会在小程序目录根目录，
也就是 node_modules 同级目录下生成 miniprogram_npm 目录，
里面存放着构建完成以后的 npm 包，也就是小程序运行过程中真正使用的包

1、在项目根目录中右键选择【在内建终端中打开】

从底部弹出终端的窗口中输入 npm init -y

3.在命令行输入需要安装的包后在微信开发者工具中点击工具点击构建npm 这样npm包才可以使用

注意

小程序运行在微信内部，因为运行环境的特殊性，这就导致并不是所有的包都能够在小程序使用

我们在小程序中提到的包指专为小程序定制的 npm 包，简称小程序npm包，在使用包之前需要先

确定该包是否支持小程序

开发者如果需要发布小程序包，需要打开官方规范：官方规范

自定义构建npm

复制代码

在实际开发中，随着项目的功能越来越多、项目越来越复杂、文件目录也变的很繁琐，为了方便进行项目的开发,
开发人员通常会对目录结构进行调整优化，例如：将小程序源码放到 miniprogram 目录下

这时候需要开发者在 project.config.json 中 指定 node_modules 的位置 和 
目标 miniprogram_npm 的位置
配置如下：
	1. 配置 project.config.json 的 miniprogramRoot 指定小程序源码的目录
	
	2. 配置 project.config.json 的 setting.packNpmManually 为true，开启自定义
		 node_modules 和 miniprogram_npm 位置的构建 npm 方式
		 
	3. 配置 project.config.json 的 setting.packNpmRelationList 项,指定 packageJsonPath 
		和 miniprogramNpmDistDor的位置
	4. 重新打开项目 才能生效成功

javascript 复制代码

{
  "appid": "。。。",
  "compileType": "miniprogram",
  "libVersion": "3.4.8",
  "miniprogramRoot": "miniprogram/",
  "packOptions": {
    "ignore": [],
    "include": []
  },
  "setting": {
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram"
      }
    ],
    "useCompilerPlugins": [
      "sass"
    ],
    "coverView": true,
    "es6": true,
    "postcss": true,
    "minified": true,
    "enhance": true,
    "showShadowRootInWxmlPanel": true,
    "babelSetting": {
      "ignore": [],
      "disablePlugins": [],
      "outputPath": ""
    }
  },
  "condition": {},
  "editorSetting": {
    "tabIndent": "insertSpaces",
    "tabSize": 2
  },
  "srcMiniprogramRoot": "miniprogram/"
}