小程序分包构建npm

最新推荐文章于 2024-09-05 10:19:00 发布

夕色灬琉璃

最新推荐文章于 2024-09-05 10:19:00 发布

阅读量976

点赞数 4

文章标签： javascript npm 小程序

本文链接：https://blog.csdn.net/Robert_jackson/article/details/114947637

版权

小程序主包和分包大小都限制在2M大小，有时候构建一个npm包就能占掉大半，导致主包过大无法编译打包，
解决，可以使用分包构建npm来分担主包压力

	/project.config.json内
	setting.packNpmRelationList为构建npm配置
	为分包构建npm需加一项，
		packageJsonPath：需要分包的package.json地址
		miniprogramNpmDistDir：分包构建npm保存位置

具体代码如下：
在这里插入图片描述

填坑不易，转载请注明出处，谢谢！！！！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

夕色灬琉璃

关注关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

小程序npm构建

m0_55954117的博客

05-18

303

在构建小程序npm的时候遇到一些问题及vant组件库在小程序中怎么去使用以下是解决方案首先，从当前文件根目录打开终端控制， 1、输入 npm init -y 初始化项目 2、再输入 npm i miniprogram-sm-crypto --production 3、再点击工具里的 npm构建即可构建成功如需引入vant 组件库则通过 npm 安装 1、 npm i @vant/weapp -S --production 2、将 app.json 中的 “style”: “v2” 去

微信小程序使用npm包、全局数据共享和分包_npm 能不能让所有包放到一起(1)

2301_82243558的博客

04-20

333

Vant Weapp 是有赞前端团队开源的一套小程序 UI 组件库，助力开发者快速搭建小程序应用。它所使用的是 MIT 开源许可协议，对商业使用比较友好。官方文档地址API Promise化，指的是通过额外的配置，将官方提供的、基于回调函数的异步 API，升级改造为基于 Promise 的异步 API，从而提高代码的可读性、维护性，避免回调地狱的问题。全局数据共享（又叫做：状态管理）是为了解决组件之间数据共享的问题。开发中常用的全局数据共享方案有：Vuex、Redux、MobX 等。

参与评论您还未登录，请先登录后发表或查看评论

【无标题】微信小程序使用npm，（以vant为例）

weixin_43444977的博客

10-20

620

4、修改project.config.json。执行完后，会生成package.json文件。1、新建一个小程序项目，在【终端】输入。出现 node_modules 文件夹。出现miniprogram_npm。在index.json文件中配置。3、【工具】——【构建npm】6、使用一个button为例。

五、npm包&全局数据共享&分包

最新发布

m0_63790435的博客

09-05

774

微信小程序使用npm包；微信小程序使用Vant Weapp；微信小程序使用MobX进行全局数据共享；微信小程序的分包

小程序-npm安装，分包，等

莫莫

07-27

812

插件，分包，等使用npm 安装插件初始化`npm init `安装对应的组件安装插件通过 npm 安装通过 yarn 安装安装 0.x 版本设置npm模块构建npm使用组件使用分包为什么需要使用分包？注意怎么分包分包配置分包局部更新使用npm 安装插件初始化npm init 在对应小程序的app.json文件同目录下进行cmd命令，npm init 生成 package.json文件安装对应的组件安装插件通过 npm 安装 npm i @vant/weapp -S --production

微信小程序（使用npm包、全局数据共享、分包、自定义tabBar）

ZHAOKAIYUR的博客

03-14

1121

黑马程序员，学习记录黑马程序员前端微信小程序开发教程，微信小程序从基础到发布全流程_企业级商城实战自定义 tabBar | 微信开放文档 (qq.com)"custom" : true , // 加上这个即可 "list" : [ ... // 为了兼容性完整保留下来 ] } ,创建必须叫这个名字。

【小程序 - 加强】自定义组件、使用npm包、全局数据共享、分包_05

青春木鱼的博客

10-03

2104

自定义组件、使用npm包、全局数据共享、分包

小程序npm包及分包

pauline_的博客

12-19

1320

小程序对npm的支持与限制目前,小程序中已经支持使用npm安装第三方包,从而来提高小程序的开发效率,但是在小程序中使用npm包有如下3个限制: 不支持依赖于Node.js 内置库的包不支持依赖于浏览器内置对象的包不支持依赖于C++插件的包 1.什么是Vant Weapp Vant Weapp是有赞前端团队开源的一套小程序UI组件库,助力开发者快速搭建小程序应用.它所使用的是MIT开源许可协议,对商业使用比较友好官方文档:https://github.com/youzan/vant-wea

微信小程序使用npm包、全局数据共享和分包_npm 能不能让所有包放到一起

2301_82243558的博客

04-20

393

微信小程序学习笔记(五) npm包+全局数据共享+分包

kianagrow的博客

11-06

502

微信小程序学习笔记(五) npm包+全局数据共享+分包

小程序分包以及云开发

m0_69674158的博客

09-04

254

小程序分包以云开发

纯手工打造：微信小程序接入NPM依赖的Webpack方案

"探讨如何在不使用第三方框架的情况下，让微信小程序支持NPM包的使用，主要利用Webpack进行资源打包，创建一个入口文件，使得小程序能够通过这个入口文件引用npm模块。" 在微信小程序的开发环境中，由于其自身的...

微信小程序基础学习（5）：使用 npm包、全局数据共享、分包

icemwj的博客

11-23

845

微信小程序基础学习（5）：使用 npm包、全局数据共享、分包

微信小程序开发3

m0_64599482的博客

07-11

270

下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。生命周期(Life Cycle)是指一个对象从创建->运行->销毁的整个阶段，强调的是一个时间段生命周期函数：是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行生命周期函数的作用：运行程序员在特点的时间点，执行某些特定的操作，例如，页面刚加载的时候，可以在onLoad生命周期函数中初始化页面的数据。

微信小程序npm

weixin_49352711的博客

09-19

246

然后针对每个小程序，要在终端重新npm init，输入名字的话直接跳过，不能跳过的随便输个test。构建npm，不行的话改这里。（project.config.jason)然后npm 下载，或者下载好之后复制到文件夹里。电脑上下的要有npm，nodejs啥的，用的时候在xxx.jason写引用。app.wxss里面也要写。输入npm -v 有反应。

微信小程序 构建npm报错没有生成miniprogram_npm目录

MorrisGeek的博客

11-09

4439

拉取已有仓库，在目录下执行npm install，再在微信开发者工具里点构建npm，报错说找不到/miniprogram_npm

构建npm报错miniprogram\的文件或目录未找到

2301_77231855的博客

02-15

1080

message：发生错误 Error: C:\Users\红鲤鱼的爸爸白鲤鱼\Desktop\second\miniprogram\ 未找到 appid: wx98935fbf9774bf5a openid: o6zAJs_7u5_ToUSDgocGnMIG_gF0 ideVersion: 1.06.2306020 osType: win32-x64 time: 2024-02-15 20:40:54。后面找半天发现官方文档给了建议的。以下是构建npm包时官方文档给出的代码。把最后一行代码改成如下即可。

微信小程序npm构建

HanXiaoXi_yeal的博客

05-17

656

步骤：一：初始化 npm init -y 自动生成生成package.json文件二：project.config.js配置项 "packNpmManually": false, "packNpmRelationList": [ { "packageJsonPath": "./package.json", "miniprogramNpmDistDir": "./node_modules" } ] 三：下载所需依赖 npm ins

微信小程序npm构建生成miniprogram_npm文件问题

weixin_44245867的博客

03-23

6768

微信小程序 构建npm 无法生成miniprogram_npm文件

微信小程序分包怎么使用

03-30

微信小程序分包是为了优化小程序的启动速度和性能而设计的。分包是指将小程序中的代码和资源分散到不同的包中，使小程序在启动时只加载必要的包，而不是全部加载。下面是使用微信小程序分包的步骤： 1. 在小程序项目根目录下新建一个名为“subpackages”的文件夹。 2. 在“subpackages”文件夹下新建一个名为“subpackage1”的文件夹，并将需要分包的代码和资源文件移动到“subpackage1”文件夹中。 3. 在小程序的app.json文件中添加“subpackages”字段，如下所示： ``` { "pages": [ "pages/index/index", "pages/detail/detail" ], "subpackages": [ { "name": "subpackage1", "pages": [ "pages/subpackage1/index" ] } ] } ``` 其中，“name”表示分包的名称，“pages”表示分包中包含的页面。 4. 在需要使用分包的页面配置文件中，如“pages/subpackage1/index.json”中，添加“usingComponents”字段，如下所示： ``` { "usingComponents": {} } ``` 5. 在需要使用分包的页面的wxml文件中，通过“<import>”标签引入分包中的组件和模板，如下所示： ``` <import src="/subpackage1/components/component1.wxml" /> <template is="template1" data="{{...data1}}" /> ``` 6. 在小程序开发工具中，点击“构建npm”按钮，构建分包，并在“分包预览”中查看分包效果。通过以上步骤，你就可以使用微信小程序分包优化你的小程序了。