本文探讨了小程序从最初的wxml、wxss、wxs到支持npm的演变，进而采用webpack进行工程化改造的过程。通过webpack，实现远程小程序的工程化环境，包括项目初始化、npm依赖管理、多页应用适配、性能优化如runtime trunk和tree shaking等。同时，文章还讨论了开发优化，如自动化watch和多环境配置，以及如何拓展到less等CSS预处理器的使用。
小程序演变
- 小程序最初的样子 - wxml wxss wxs => js
- 原生部分支持npm => 类webpack配置&打包 => miniprogram_dist
- 跨平台的需求 + babel + plugin + ut => 统一走webpack工程化环境
……CICD 集成布署
目标
- 利用webpack，搭建远程小程序的工程化环境
- 理解小程序能工程化的基础
- 提炼小程序工程化与web工程化区别
开始
准备工作
新建项目
- 新建小程序项目
- 初始化npm
- 部分npm报错
=> 面试题： 为何部分npm报在小程序中无法直接使用 / 小程序的执行环境和web区别 / 小程序开发中遇到过执行环境问题吗
=> 小程序的执行环境中，包解析编译时注入了上下文和全局环境
=> 所以说是类node/webpack模式
=> 通用的方式：clone源码手动编译 <===> jquery window this
只有纯正的工程化webpack才能救开发
- 安装webpack依赖
- 增加webpack的基础配置
- 调整小程序入口，指向webpack的产出dist
- npx webpack!
工程化小程序思路
- 需要处理打
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
