1.3.3 • Published 3 years ago

dndc-webpack-build-miniprogram v1.3.3

Weekly downloads
-
License
MIT
Repository
gitlab
Last release
3 years ago

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