npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

webpack-build-miniprogram

v2.0.4

Published

基于webpack的小程序构建策略

Downloads

24

Readme

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