微信小程序使用npm教程

news2025/8/12 2:19:00

首先打开工具-详情-勾选使用npm模块

 使用npm的步骤:

1. 安装 npm 包

在小程序 package.json 所在的目录中执行命令安装 npm 包:

npm install

此处要求参与构建 npm 的 package.json 需要在 project.config.json 定义的 miniprogramRoot 之内。

tips:开发者工具 v1.02.1811150 版本开始,调整为根据 package.json 的 dependencies 字段构建,所以声明在 devDependencies 里的包也可以在开发过程中被安装使用而不会参与到构建中。如果是这之前的版本,则建议使用--production选项,可以减少安装一些业务无关的 npm 包,从而减少整个小程序包的大小。

tips: miniprogramRoot 字段不存在时,miniprogramRoot 就是 project.config.js 所在的目录

2. 构建 npm

点击开发者工具中的菜单栏:工具 --> 构建 npm

为何要有此步骤?

3. 构建完成后即可使用 npm 包。

js 中引入 npm 包:

const myPackage = require('packageName')
const packageOther = require('packageName/other')

使用 npm 包中的自定义组件:

{
  "usingComponents": {
    "myPackage": "packageName",
    "package-other": "packageName/other"
  }
}

tips:此处使用 npm 包时如果只引入包名,则默认寻找包名下的 index.js 文件或者 index 组件。

发布 npm 包

发布小程序 npm 包的约束

这里要发布的 npm 包是特指专为小程序定制的 npm 包(下称小程序 npm 包)。因为小程序自定义组件的特殊性,原有的 npm 包机制无法满足我们的需求,所以这里需要对小程序 npm 包做一些约束:

  1. 小程序 npm 包要求根目录下必须有构建文件生成目录(默认为 miniprogram_dist 目录),此目录可以通过在 package.json 文件中新增一个 miniprogram 字段来指定,比如:
{
  "name": "miniprogram-custom-component",
  "version": "1.0.0",
  "description": "",
  "miniprogram": "dist",
  "devDependencies": {},
  "dependencies": {}
}
  1. 小程序 npm 包里只有构建文件生成目录会被算入小程序包的占用空间,上传小程序代码时也只会上传该目录的代码。如果小程序 npm 包有一些测试、构建相关的代码请放到构建文件生成目录外。另外也可以使用.npmignore文件来避免将一些非业务代码文件发布到 npm 中。
  2. 测试、构建相关的依赖请放入 devDependencies 字段中避免被一起打包到小程序包中。

发布其他 npm 包的约束

如果是已经发布过的一些 npm 包,因为一些原因无法改造成小程序 npm 包的结构的话,也可以通过微调后被使用,但是请确保遵循以下几点:

  1. 只支持纯 js 包,不支持自定义组件。
  2. 必须有入口文件,即需要保证 package.json 中的 main 字段是指向一个正确的入口,如果 package.json 中没有 main 字段,则以 npm 包根目录下的 index.js 作为入口文件。
  3. 测试、构建相关的依赖请放入 devDependencies 字段中避免被一起打包到小程序包中,这一点和小程序 npm 包的要求相同。
  4. 不支持依赖 c++ addon,不支持依赖 nodejs 的内置库:
const addon = require('./addon.node'); // 不支持!
const http = require('http'); // 不支持!

tips:对于一些纯 js 实现的 nodejs 内置库(如 path 模块),可以通过额外安装其他开发者实现的 npm 包来支持。

  1. 使用 require 依赖的时候下列几种方式也是不允许的:
// 不允许将 require 赋值给其他变量后再使用,以下代码不会去解析出具体依赖
let r;
r = require;
r('testa');

let r2 = require;
r2('testa');

// 不允许 require 一个变量,以下代码依赖运行时,无法解析出具体依赖
let m = 'testa';
require(m);
  1. 小程序环境比较特殊,一些全局变量(如 window 对象)和构造器(如 Function 构造器)是无法使用的。

发布流程

发布 npm 包的流程简述如下:

  1. 如果还没有 npm 帐号,可以到 npm 官网 注册一个 npm 帐号。
  2. 在本地登录 npm 帐号,在本地执行:
npm adduser

或者

npm login
  1. 在已完成编写的 npm 包根目录下执行:
npm publish

到此,npm 包就成功发布到 npm 平台了。

tips:一些开发者在开发过程中可能修改过 npm 的源,所以当进行登录或发布时需要注意要将源切回 npm 的源。

原理介绍

为了帮助大家更好的理解发布 npm 包中提到的各种要求,这里简单介绍一下原理:

  1. 首先 node_modules 目录不会参与编译、上传和打包中,所以小程序想要使用 npm 包必须走一遍“构建 npm”的过程,在每一份 miniprogramRoot 内开发者声明的 package.json 的最外层的 node_modules 的同级目录下会生成一个 miniprogram_npm 目录,里面会存放构建打包后的 npm 包,也就是小程序真正使用的 npm 包。
  2. 构建打包分为两种:小程序 npm 包会直接拷贝构建文件生成目录下的所有文件到 miniprogram_npm 中;其他 npm 包则会从入口 js 文件开始走一遍依赖分析和打包过程(类似 webpack)。
  3. 寻找 npm 包的过程和 npm 的实现类似,从依赖 npm 包的文件所在目录开始逐层往外找,直到找到可用的 npm 包或是小程序根目录为止。 下面简单介绍下构建打包前后的目录情况,构建之前的结构:
|--node_modules
|    |--testComp // 小程序 npm 包
|    |    |--package.json
|    |    |--src
|    |    |--miniprogram_dist
|    |         |-index.js
|    |         |-index.json
|    |         |-index.wxss
|    |         |-index.wxml
|    |--testa // 其他 npm 包
|         |--package.json
|         |--lib
|         |    |--entry.js
|         |--node_modules
|              |--testb
|                   |--package.json
|                   |--main.js
|--pages
|--app.js
|--app.wxss
|--app.json
|--project.config.js

构建之后的结构:

|--node_modules
|--miniprogram_npm
|    |--testComp // 小程序 npm 包
|    |    |-index.js
|    |    |-index.json
|    |    |-index.wxss
|    |    |-index.wxml
|    |--testa // 其他 npm 包
|         |--index.js // 打包后的文件
|         |--miniprogram_npm
|              |--testb
|                   |--index.js // 打包后的文件
|                   |--index.js.map
|--pages
|--app.js
|--app.wxss
|--app.json
|--project.config.js

tips:打包生成的代码在同级目录下会生成 source map 文件,方便进行逆向调试。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/15266.html

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

相关文章

【大数据存储技术】思考题及参考答案

文章目录第1章 绪论1. NoSQL和关系型数据库在设计目标上有何主要区别?2. 简要总结一下NoSQL数据库的技术特点。第2章 NoSQL数据库的基本原理1. 描述分布式数据管理的特点。2. 什么是CAP原理?CAP原理是否适用于单机环境?3. 简述BASE理论的具体…

【附源码】计算机毕业设计JAVA校园疫情防控管理软件

【附源码】计算机毕业设计JAVA校园疫情防控管理软件 目运行 环境项配置: Jdk1.8 Tomcat8.5 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: JAVA…

(SVN+SSH)搭建SVN并使用SSH进行免密拉取推送代码

【SVNSSH】搭建SVN并使用SSH进行免密拉取推送代码一、安装svn、openssh-server服务二、开启svn服务,创建测试仓库,并能通过账号密码拉取定义svn仓库文件位置创建仓库:acc_repo配置拉取仓库的账号密码通过账号密码拉取代码三、创建测试仓库,通…

云安全系列3:如何构建云安全策略

云计算拯救了很多企业,因为它可以迅速调整以支持更大规模的工作以及更多的在线用户。随着2023年的到来,宏观经济逆风聚集,它将更加具有吸引力,这归功于它更高的业务敏捷性和更优的成本效率比。Gartner 预测,到 2023 年…

聚观早报|腾讯员工平均月薪超8万;马斯克考虑卸任特斯拉CEO

今日要闻:腾讯员工平均月薪超8万;马斯克考虑卸任特斯拉CEO;iPhone双十一销量近350万部;暴雪将在大陆暂停多数服务;高德地图上线北斗卫星定位查询系统腾讯员工平均月薪超8万 据报道,腾讯控股11月16日发布202…

4-8岁儿童EEG微状态研究:年龄和性别的影响

大规模神经网络的超快时空动态可以通过静息状态脑电图(EEG)微观状态来检验,这代表了随时间动态演化的同步神经活动的短暂时期。在成人中,四种典型的微观状态已被证明可以解释静息状态脑电图的大部分地形差异。它们的时间结构依赖于…

【北亚数据恢复】硬盘出现坏道的数据恢复方案

经常使用电脑和移动硬盘的用户,如果察觉到电脑运行速度变得很慢,即使做了磁盘整理和系统重装操作后速度还是没有恢复到正常状态,这个时候就要小心是硬盘盘片出现坏道了。 如果这个时候用硬盘检测软件扫描硬盘就会发现扫描界面上出现很多绿块&…

SEO的了解

什么是SEO SEO,也就是搜索引擎优化的逻辑,其实是非常简单的。这就像是在大学里的学生会主席,你要让投票者给你更多的选票。那么,你需要先「自我优化」,无论是外表还是能力;此外,你还需获得更多…

【猿创征文】Vue3 企业级优雅实战 - 组件库框架 - 7 组件库文档的开发和构建

本系列已更新文章: 分享一个实用的 vite vue3 组件库脚手架工具,提升开发效率 开箱即用 yyg-cli 脚手架:快速创建 vue3 组件库和vue3 全家桶项目 Vue3 企业级优雅实战 - 组件库框架 - 1 搭建 pnpm monorepo Vue3 企业级优雅实战 - 组件库框架…

Vue2的路由和异步请求

目录 1.路由 1.1路由的作用 1.2使用CLI3创建带路由功能的Vue2项目(案例) (1)创建vue项目 (2)选择手动设置特性(Manually select features) (3)添加路由特性选项 1.3 路由使用入门 …

企业如何利用APS排程软件建立起精益供应链与生产体系

精益供应链,英文称为Lean Supply Chains,它来源于精益管理,将从产品设计到顾客得到产品,整个过程所必需的步骤和合作伙伴整合起来,快速响应顾客多变的需求,其核心是减少、消除企业中的浪费,用尽…

skywalking全链路追踪

系统: centos7.6.1810 内核: 3.10.0-957.el7.x86_64 一、先下载相关的工具 官网下载地址: https://skywalking.apache.org/downloads/ openresty官网下载地址: http://openresty.org/en/download.html 下载openresty工具,捆绑了lua模块,收集日志需要用到…

Arctic——流式湖仓系统

1、Arctic介绍 Arctic 是由网易开源的流式湖仓系统,Arctic 在 Iceberg 和 Hive 之上添加了更多实时场景的能力,并且面向 DataOps 提供流批统一,开箱即用的元数据服务,让数据湖更加好用和实用。 Arctic 是搭建在 Apache Iceberg …

详解MybatisPlus数据安全

MybatisPlus数据安全 概述 ​ 存在数据库中的数据对于普通用户而言是不可见的,好像是藏起来了一样,但对于开发者,只要知道数据库的连接地址、用户名、密码,则数据不再安全;这也意味着,一旦连接数据库的配…

卡塔尔世界杯倒计时!世界杯直播在哪里观看?美家市场汇总来了!

来了来了,2022卡塔尔世界杯倒计时3天!2022卡塔尔世界杯将在北京时间11月21日开始,持续时间28天,至2022年12月18日结束,将近一个月的赛程让众多球迷们期待不已,这一个月将是全世界球迷们最快乐的一个月&…

【网站架构】如何长久运行升级?高可用部署只是基础,巡检、监控、应用数据备份、日志、灰度发布

大家好,欢迎来到停止重构的频道。本期讨论大型网站的可用性。 高可用指的是当一部分服务器宕机时,网站系统仍可正常运行。 一些常用的软件服务的高可用部署方案 ,如Tomcat、Nginx、Redis、MySQL等,在往期性能调优时已经有详细的介…

H5组件Canvas画电子印章

效果图 代码 <!DOCTYPE html> <html> <head> <meta charset"UTF-8"> <title>HTML5 Canvas印章</title> <script type"text/javascript" src"https://code.jquery.com/jquery-2.2.4.js"></scri…

电科大离散数学-4-二元关系

目录 4.1 序偶和笛卡尔积 4.1.1 有序组的定义 4.1.2 笛卡儿积 4.1.3 笛卡儿积的性质 4.1.4 推广 4.2 关系的定义 4.2.1 二元关系的定义 4.2.2 二元关系的数学符号 4.2.3 枚举二元关系 4.2.4 几种重要关系 4.2.5 定义域和值域 4.2.6 n元关系 4.3 关系的表示 4.3.1…

[附源码]SSM计算机毕业设计中小型艺术培训机构管理系统JAVA

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

List<Map<String, Object>>,Map<String,List<Map<String, Object>>>多方式循环遍历

多方式循环遍历1. List<Map<String, Object>>多方式循环测试结果2. Map&#xff1c;String,List&#xff1c;Map&#xff1c;String, Object&#xff1e;&#xff1e;&#xff1e;测试结果☀️相关笔记章节&#xff1a; &#x1f339;java 1.8 stream使用总结&…