webpack-build-miniprogram

一套即开即用的微信小程序构建方案，应用 webpack 构建工具为原生小程序项目提供扩展能力，该工具提供了以下能力：

• 环境分割，域名自动切换功能
• 路径别名 @ 功能，@ 符号指代 src 目录
• 样式预编译功能，提供 less 语法转换与单位 px 转换 rpx 功能
• 提供常用全局变量访问功能，详细变量请见下文
• 路由工具包自动注入功能，需在微信小程序项目中下载 medusa-wx-router 包
• Toast 常用提示工具包自动注入功能，需在微信小程序项目中下载 medusa-wx-toast 包
• 环境变量读取功能，提供 .env 文件配置功能
• webpack 配置扩展功能
• 编码规范检测功能，提供 ESLint 和 StyleLint 检查功能
• Git 提交 message 检测功能

Installation

$ npm install webpack-build-miniprogram --save-dev

Usage

请将小程序的源代码放置在 src 文件夹下，配置以下脚本命令，即可使用本套构建工具。推荐使用下方展示的目录结构，以获得更好的开发体验：

|-- dist                            编译结果目录
|-- src                             源代码目录
|   |-- app.js                      项目入口文件
|   |-- app.json                    小程序配置文件
|   |-- sitemap.json                小程序配置文件
|   |-- assets                      静态资源存放目录
|   |   |-- images
|   |       |-- commons
|   |       |   |-- error_rockets.png
|   |       |-- icons
|   |           |-- .gitkeep
|   |-- components                  公共组件存放目录
|   |   |-- base                    基础能力组件
|   |       |-- Layout
|   |       |-- Loading
|   |       |-- Skeleton
|   |       |-- ErrorPage
|   |-- dicts                       公共字典存放目录
|   |   |-- .gitkeep
|   |-- libs                        第三方工具库存放目录（外部引入）
|   |   |-- .gitkeep
|   |-- pages                       页面存放目录
|   |   |-- index
|   |       |-- index.js
|   |       |-- index.json
|   |       |-- index.less
|   |       |-- index.wxml
|   |-- scripts                     公共脚本存放目录（wxs）
|   |   |-- .gitkeep
|   |-- services                    API服务存放目录
|   |   |-- .gitkeep
|   |-- styles
|   |   |-- index.less              项目公共样式类文件
|   |   |-- theme.less              项目主题样式（变量 or mixin）
|   |-- templates                   公共模板存放目录
|   |   |-- .gitkeep
|   |-- utils                       公共封装函数存放目录（自我封装）
|       |-- base.js                 基础能力
|       |-- request.js              基础请求功能
|-- .editorconfig                   EditorConfig     配置文件
|-- .env                            环境变量配置文件
|-- .eslintignore
|-- .eslintrc
|-- .gitignore
|-- .stylelintignore
|-- .stylelintrc
|-- commitlint.config.js
|-- config.yaml                     编译配置文件
|-- jsconfig.json
|-- package.json
|-- project.config.json             微信开发者工具项目配置文件
└── webpack.config.js               webpack 配置扩展文件

npm script

/* package.json */
"scripts": {
  "{script}": "medusa-server {env}"
}

example

/* package.json */
"scripts": {
  "dev": "medusa-server development",
  "build": "medusa-server production"
}

Tips

1. 请将完整的项目导入到开发者工具中查看效果。
2. project.config.json文件请放置在项目根目录下，并在其中将 miniprogramRoot 属性配置为 dist。

Config File

该工具还可配套 config.yaml 配置文件一同使用，通过配置文件我们可以为构建提供一些额外的能力，如需使用请在项目的根目录下创建该文件（该文件为可选配置），例：

# 当前项目应用平台
platform: wx
# 样式单位 px 转换 rpx 的比例设定
css_unit_ratio: 1
# 域名配置
{env}_host:
  api: https://www.miniprogram.dev.com

Global Variable

该工具当中注入了三个常用全局变量：

• MS_ENV：运行时环境变量，对应了脚本中配置的 {env} 的值
• MS_ROUTES：路由映射字典，该字典中的每个key取自pages文件夹的名称，value取自app.json中的配置，你可以通过MS_ROUTES.index来替代pages/index/index字符串。
• MS_HOSTS：域名配置对象，当项目根目录中没有配置config.yaml时，该对象是一个没有属性的空对象。存在配置文件时，构建工具会根据环境自动将配置读取到对象中，上述例子配置文件中，你可以使用MS_HOSTS.api访问到https://www.miniprogram.dev.com域名。

License

MIT