小程序微信 npm 支持

小程序不能直接使用在 npm 下载的模块包，必须经过小程序开发者工具进行构建后才可以使用，这一节我们来学习支持 npm 模块包的步骤：

1. 打开终端窗口

 

1. 安装一个 npm 模块包，以 dayjs 为例

# 创建 package.json
npm init -y
​
# 安装一个模块
npm install dayjs

这一步操作是与以往的 npm 模块安装没有任何的区别，会将模块安装到 node_modules 当中，但是下载的模块无法直接导入到小程序中，如下图所示：

 

1. 构建 npm，

 

构建 npm 的结果会创建一个新的目录 miniprogram_npm 把构建后的 npm 模块放到了这个目录之下，此时在小程序中便可以成功导入 npm 的模块包了。

自定义项目目录

默认情况下项目目录的最外层是小程序的根目录，通过 project.config.json 可以指定小程序的根目录，这样做的好处是能够优化目录结构，更好的管理项目的代码:

 

场景：

 

1. 公司中小程序代码单独放到一个目录维护，这时候需要自定义项目根目录

   {
     "setting": {
       ...
     },
   + "miniprogramRoot": "src/",
     "compileType": "miniprogram",
     "libVersion": "2.19.4",
     "appid": "wx3eb80995b7e84924",
     "projectname": "demo",
   }

    

2. 如果项目中有npm依赖，也需要自定义npm目录（重新构建npm需要）

   {
     "setting": {
   -    "ignoreDevUnusedFiles": false,
   -    "ignoreUploadUnusedFiles": false,
       ...
   +    "packNpmManually": true,
   +    "packNpmRelationList": [
         {
   +        "packageJsonPath": "./package.json",
   +        "miniprogramNpmDistDir": "./src"
         }
       ],
       ...
     },
     "libVersion": "2.19.4",
     "miniprogramRoot": "src/",
     "compileType": "miniprogram",
     "appid": "wx3eb80995b7e84924",
     "projectname": "demo",
   }

    

说明：

• miniprogramRoot 自定义小程序的根目录

• packNpmManually 启用 npm 构建手动配置

• packNpmRelationList 手动构建 npm 配置详情：

  • packageJsonPath包管理文件位置

  • miniprogramNpmDistDir构建npm文件存储位置

问题：如何解决“Error: xxx.js 已被代码依赖分析忽略，无法被其他模块引用”报错？