小程序 npm 支持

news2024/10/6 6:13:23

使用 npm 包

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

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

在这里插入图片描述
1、在项目根目录中 右键 选择【在内建终端中打开】
在这里插入图片描述
2. 从底部弹出终端的窗口中 输入 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. 重新打开项目 才能生效成功 
{
  "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.coloradmin.cn/o/1895603.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

015-GeoGebra基础篇-定点旋转物体、动态显示数值并显示运动轨迹

这可能是我能想到的最大概率可以被你搜索到的标题了,容我先喘口气~ 目录 一、成品展示二、涉及内容三、做图步骤(1)绘制三角形t(2)建立定点D(3)制作角度滑动条(4)图形绕点…

如何利用AI撰写短文案获客?分享6大平台和3大步骤!

从去年开始,很多大厂都在裁员,原因就是因为AI的火爆,替代了很多机械式的劳动力。以前很多人可以通过机械式的工作来摸鱼,现在AI完成的效率比人工的要高很多倍。 国内好用的AI平台非常多,有时候也可以使用几个AI平台结合…

线程(基础概念)

文章目录 一、线程和进程?二、线程初识2.1 线程属性2.2 线程的调度策略2.3 线程的优先级2.3 线程实验 一、线程和进程? 我们经常描述进程(process)和线程(thread): 进程是资源管理的最小单位&a…

每天五分钟深度学习框架pytorch:tensor向量的统计函数的运算

本文重点 给定一个向量,我们如何才能获取到这个向量中重要的那部分呢?比如均值,最大值等等,我们可以使用pytorch中已经封装好的方法来完成这些任务。 常用的统计方法 L1范式 L1范式就是将向量中所有元素的绝对值相加求和,以上是对a、b、c三个向量求L1范式,都是8 L2范数…

GEE计算遥感生态指数RSEI

目录 RESI湿度绿度热度干度源代码归一化函数代码解释整体的代码功能解释:导出RSEI计算结果参考文献RESI RSEI = f (Greenness,Wetness,Heat,Dryness)其遥感定义为: RSEI = f (VI,Wet,LST,SI)式中:Greenness 为绿度;Wetness 为湿度;Thermal为热度;Dryness 为干度;VI 为植被指数…

QT5.12环境搭建与源码编译

一、概述 QT版本:QT5.12.10 Qt网址:http://download.qt.io/archive/qt/ 编译平台 ubuntu18.04 二、安装交叉编译工具链 1、获取交叉编译工具链 一般如果是编译系统如果有对应的gcc 就是用这个就可以了 比如rk3128 lin…

校园失物招领系统带万字文档java项目失物招领管理系统java课程设计java毕业设计springboot vue

文章目录 校园失物招领系统一、项目演示二、项目介绍三、万字字项目文档四、部分功能截图五、部分代码展示六、底部获取项目源码带万字文档(9.9¥带走) 校园失物招领系统 一、项目演示 校园失物招领系统 二、项目介绍 语言: Java 数据库&…

【WebRTC实现点对点视频通话】

介绍 WebRTC (Web Real-Time Communications) 是一个实时通讯技术,也是实时音视频技术的标准和框架。简单来说WebRTC是一个集大成的实时音视频技术集,包含了各种客户端api、音视频编/解码lib、流媒体传输协议、回声消除、安全传输等。对于开发者来说可以…

【matlab】智能优化算法——求解目标函数

智能优化算法在求解目标函数方面发挥着重要作用,它通过迭代、筛选等方法来寻找目标函数的最优值(极值)。以下是关于智能优化算法求解目标函数的详细介绍: 一、智能优化算法概述 智能优化算法是一种搜索算法,旨在通过…

吴恩达机器学习 第三课 week2 推荐算法(下)

目录 01 学习目标 02 基于内容的过滤算法 03 实现“电影推荐系统” 3.1 问题描述 3.2 算法实现 04 大项目(数据很大)的推荐方法※ 4.1 方法原理 4.2 实施示例 05 总结 01 学习目标 (1)理解基于内容的过滤算法&#xff08…

模拟退火算法4—应用

TSP(旅行商)问题是最有代表性的优化组合问题之一,其应用已逐步渗透到各个技术领域和我们的日常生活中.它一开始是为交通运输而提出的,比如飞机航线安排、送邮件、快递服务、设计校车行进路线等等.实际上其应用范围扩展到了许多其他…

阿里模型调用体验

引言 随着人工智能技术的飞速发展,大型模型已成为推动技术进步的关键因素之一。阿里大模型作为国内领先的人工智能技术之一,其在多个领域的应用展示了强大的潜力。本文将通过调用案例,简单解析阿里大模型在特定场景中的应用及其效果。 1.导…

Aigtek高压功率放大器主要应用场景是什么

高压功率放大器是一种关键的电子设备,其主要功能是将低电压信号放大到较高电压水平,以满足特定应用的需求。这种类型的放大器在各种领域都发挥着至关重要的作用。安泰电子官网将为大家介绍高压功率放大器的主要应用场景,并介绍其在这些领域中…

Qt 网络编程实战

一.获取主机的网络信息 需要添加network模块 QT core gui network主要涉及的类分析 QHostInfo类 QHostInfo::localHostName() 获取本地的主机名QHostInfo::fromName(const QString &) 获取指定主机的主机信息 addresses接口 QNetworkInterface类 QNetworkInterfac…

《操作系统真象还原》学习笔记:第2章——编写MBR主引导记录

2.1 计算机的启动过程 载入内存: (1) 程序被加载器(软件或硬件)加载到内存某个区域 (2)CPU 的 cs:ip 寄存器被指向这个程序的起始地址 2.2 软件接力第一棒,BIOS 2.2.1 实模式下的…

78110A雷达信号模拟软件

78110A雷达信号模拟软件 78110A雷达信号模拟软件(简称雷达信号模拟软件)主要用于模拟产生雷达发射信号和目标回波信号,软件将编译生成的雷达信号任意波数据下载到信号发生器中,主要是1466-V矢量信号发生器,可实现雷达信号模拟产生。软件可模…

结构方程模型-验证性因子分析模型

初级 第7讲 验证性因子分析模_哔哩哔哩_bilibili

【matlab】【python】爬虫实战

目录 引言 具体步骤 1.设置请求选项 2.发送请求并获取响应 3.设置正则表达式 4.执行正则表达式匹配 matlab完整代码 python代码示例 引言 在当今这个信息爆炸的时代,数据已成为推动社会进步和企业发展的核心动力之一。随着互联网的普及和技术的飞速发展&am…

7.Android逆向协议-抓取安卓http和https数据包(设备需要root权限)

免责声明:内容仅供学习参考,请合法利用知识,禁止进行违法犯罪活动! 内容参考于:微尘网校 上一个内容:6.Android逆向协议-配置FD抓包环境 root: 现在的安卓手机不好搞,有很多坑&am…

ECSNet: Spatio-Temporal Feature Learning for Event Camera

标题:ECSNet:事件相机的空间时间特征学习 源文:https://ieeexplore.ieee.org/stamp/stamp.jsp?tp&arnumber9869656https://ieeexplore.ieee.org/stamp/stamp.jsp?tp&arnumber9869656 源码:GitHub - zhiwen-xdu/ECSNet…