小程序 --- 项目开发环境配置

1. NPM

1. 概述

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

2. 使用 NPM

1. 检查包

小程序运行在微信内部, 因为运行环境的特殊性, 这就导致 并不是所有的包都能够在小程序使用, 我们在小程序中提到的包指专门为小程序定制的 npm 包. 简称 小程序 npm 包,在使用包之前需要先确认该包是否支持小程序

2. 下载并构建 NPM

1. 终端中输入一下命令, 初始化 npm,会在根目录下生成一个 page.json 文件,用以存放 npm下载包的一些版本信息等

npm init -y

2. 使用 npm 安装 Weapp 组件库

npm i @vant/weapp

3. 构建 NPM

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

2. 目录规划

在实际开发中, 随着项目的功能越来越多、功能越来越复杂, 文件目录也会变得很繁琐,为了方便进行项目的开发,通常会对目录结构进行调整优化

1. 调整源码位置

将小程序源码调整到 miniprogram 目录下

2. 自定义构建 NPM

1. project.cofig.json 中 指定 源码位置、 node_modules 的位置、目标 miniprogram_npm 的位置

{
  "setting": {
    // 指定 npm 存放目录
    "packNpmManually": true,  // 允许自定义 npm 的存放目录
    "packNpmRelationList": [{
      // 指定在package.json文件中查找依赖,将构建好的包存放在miniprogram文件中
      "packageJsonPath": "./package.json", 
      "miniprogramNpmDistDir": "./miniprogram"
    }],
    },
  },
  // 指定小程序的源码目录
  "miniprogramRoot": "miniprogram/",
  "srcMiniprogramRoot": "miniprogram/"

}

1. NPM

1. 概述

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

2. 使用 NPM

1. 检查包

小程序运行在微信内部, 因为运行环境的特殊性, 这就导致 并不是所有的包都能够在小程序使用, 我们在小程序中提到的包指专门为小程序定制的 npm 包. 简称 小程序 npm 包,在使用包之前需要先确认该包是否支持小程序

2. 下载并构建 NPM

1. 终端中输入一下命令, 初始化 npm,会在根目录下生成一个 page.json 文件,用以存放 npm下载包的一些版本信息等

npm init -y

2. 使用 npm 安装 Weapp 组件库

npm i @vant/weapp

3. 构建 NPM

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

2. 目录规划

在实际开发中, 随着项目的功能越来越多、功能越来越复杂, 文件目录也会变得很繁琐,为了方便进行项目的开发,通常会对目录结构进行调整优化

1. 调整源码位置

将小程序源码调整到 miniprogram 目录下

2. 自定义构建 NPM

1. project.cofig.json 中 指定 源码位置、 node_modules 的位置、目标 miniprogram_npm 的位置

{
  "setting": {
    // 指定 npm 存放目录
    "packNpmManually": true,  // 允许自定义 npm 的存放目录
    "packNpmRelationList": [{
      // 指定在package.json文件中查找依赖,将构建好的包存放在miniprogram文件中
      "packageJsonPath": "./package.json", 
      "miniprogramNpmDistDir": "./miniprogram"
    }],
    },
  },
  // 指定小程序的源码目录
  "miniprogramRoot": "miniprogram/",
  "srcMiniprogramRoot": "miniprogram/"

}