小程序 npm 支持

news/2024/7/8 2:59:57 标签: 小程序, npm, 前端

npm__0">使用 npm

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

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

在这里插入图片描述
1、在项目根目录中 右键 选择【在内建终端中打开】
在这里插入图片描述
2. 从底部弹出终端的窗口中 输入 npm init -y
在这里插入图片描述
3.在命令行输入需要安装的包后 在微信开发者工具中 点击 工具 点击 构建npm 这样npm包才可以使用
在这里插入图片描述
注意
小程序运行在微信内部,因为运行环境的特殊性,这就导致并不是所有的包都能够在小程序使用
我们在小程序中提到的包指专为小程序定制的 npm 包,简称小程序npm包,在使用包之前需要先
确定该包是否支持小程序
开发者如果需要发布小程序包,需要打开官方规范:官方规范

npm_21">自定义构建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. 重新打开项目 才能生效成功 
{
  "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/"
}

在这里插入图片描述


http://www.niftyadmin.cn/n/5536201.html

相关文章

VSCode常用的一些插件

Chinese (Simplified) 汉语(简体)拓展包。 Auto Close Tag 可以自动增加xml/html的闭合标签。 CodeSnap 截图神器。截图效果在下面。 Dracula Official vscode一个很好看的主题。 Git Graph git管理工具。 GitHub Repositories 有了它,不…

山西车间应用LP-LP-SCADA系统的好处有哪些

关键字:LP-SCADA系统, 传感器可视化, 设备可视化, 独立SPC系统, 智能仪表系统,SPC可视化,独立SPC系统 LP-SCADA(监控控制与数据采集)系统是工业控制系统的一种,主要用于实时监控、控制和管理工业生产过程。 在车间应用LP-SCADA系统&#xf…

图像练习-识别中圆形锡点 (04)

图片 代码 cv::Mat src cv::imread("light_point.png", cv::IMREAD_COLOR);cv::Mat draw src.clone();cv::Rect rt0(20, 80, src.cols - 30, 190);cv::Rect rt1(20, 480, src.cols - 30, 190);cv::Mat gray;cv::cvtColor(src, gray, cv::COLOR_BGR2GRAY);cv::Mat …

Semantic Kernel:微软大模型开发框架——LangChain 替代

大模型相关目录 大模型,包括部署微调prompt/Agent应用开发、知识库增强、数据库增强、知识图谱增强、自然语言处理、多模态等大模型应用开发内容 从0起步,扬帆起航。 基于Dify的QA数据集构建(附代码)Qwen-2-7B和GLM-4-9B&#x…

【超级实用的一些adb命令】

实用的一些adb命令 #实用的一些adb命令 ##获取屏幕分辨率 adb shell wm size Physical size: 1920x1080##获取屏幕密度 adb shell wm density Physical density: 240##获取CPU信息 adb shell cat /proc/cpuinfo##获取内存信息 adb shell cat /proc/meminfo##给模拟器输入框输…

Avalonia应用在基于Linux的国产操作deepin上运行

deepin系统介绍 deepin(原名Linux Deepin)致力于为全球用户提供美观易用,安全可靠的 Linux发行版。deepin项目于2008年发起,并在2009年发布了以 linux deepin为名称的第一个版本。2014年4月更名为 deepin,在中国常被称为“深度操作系统”。 …

docker集群部署主从mysql

搭建一个mysql集群,1主2从,使用docker容器 一、创建docker的mysql镜像 下次补上,因为现在很多网络不能直接pull,操作下次补上。 二、创建mysql容器 创建容器1 docker run -it -d --name mysql_1 -p 7001:3306 --net mynet --…

FPGA问题

fpga 问题 ep2c5t144 开发板 第一道坎,安装软件;没有注册,无法产生sop文件,无法下载 没有相应的库的quartus ii版本,需要另下载 第二道坎,模拟器的下载,安装; 第三道,v…