【源码】基于Webpack和Vedux的微信小程序开发框架

项目简介

本项目是一个基于Webpack和Vedux（Redux绑定库）的微信小程序开发框架。它具备丰富功能，支持引用node_modules模块，能使用Vedux库进行类Redux开发，异步action支持Redux - thunk开发。集成了BundleAnalyzerPlugin可实时分析包体积，支持通过配置alias避免复杂模块引用，通过babel支持更丰富的ES6特性。支持用scss编写wxss文件，还提供__DEV__和process.env.NODE_ENV全局常量辅助开发，可通过命令行快速创建微信小程序页面。

项目的主要特性和功能

1. Redux逻辑处理：借助Vedux库让Redux与小程序无缝连接，简化开发流程。
2. Webpack配置：提供丰富的Webpack配置，支持动态图片打包、文件复制等操作。
3. 开发工具：提供lint检查、代码格式化等工具，提高开发效率。
4. 快速创建页面：可通过命令行快速创建微信小程序页面，简化开发流程。
5. 代码压缩：支持在production环境下压缩代码，优化项目体积。

安装使用步骤

1. 确保已安装Node.js（>=v4.2）和yarn或npm。
2. 执行git clone将项目下载到本地。
3. 进入项目目录，执行yarn安装依赖模块。
4. 执行yarn start开始开发。
5. 通过微信开发者工具，将dist（开发环境）目录添加到项目，生产环境代码在release文件夹中。

内置命令

• yarn start：启动Webpack开发微信小程序项目，可监听文件变化自动重新编译。
• yarn build：编译生成production环境的代码到release文件夹。
• yarn lint:build：执行yarn build命令，并使用eslint和stylelint校验代码规范。
• yarn prettier：执行prettier格式化src目录下的代码。

文件复制与动态图片打包问题

若wxml或axml中有动态引入文件（如src="{{'images/' + type + '.png'}}"），Webpack无法动态引入，可能导致打包后文件缺失，可通过copy - webpack - plugin插件解决，本框架已内置此插件。为方便使用，可在package.json中增加copyWebpack字段实现目录或文件自动复制，例如：在package.json中增加"copyWebpack": ["images", "icons"]，执行yarn start或yarn build时，src/images和src/icons目录会自动复制到dist/wechat/images和dist/wechat/icons目录（支付宝小程序同理）。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】