一、官方脚手架
二、特性
- 支持使用 less 语法编写 wxss 文件
- 使用 webpack 构建 js
- 支持自定义组件单元测试
- 支持 eslint
- 支持多入口构建
三、项目结构
|--miniprogram_dev // 开发环境构建目录
|--miniprogram_dist // 生产环境构建目录
|--src // 源码
| |--components // 通用自定义组件
| |--images // 图片资源
| |
| |--xxx.js/xxx.wxml/xxx.json/xxx.wxss // 暴露的 js 模块/自定义组件入口文件
|
|--test // 测试用例
|--tools // 构建相关代码
| |--demo // demo 小程序目录，开发环境下会被拷贝生成到 miniprogram_dev 目录中
| |--config.js // 构建相关配置文件
|
|--gulpfile.js
四、配置文件config配置
module.exports = {
//入口 如果组件都在src/components下，则配置为components,否则配置为对应路径
entry: ['components'],
isDev,
isWatch,
srcPath: src, // 源目录
distPath: isDev ? dev : dist, // 目标目录
demoSrc, // demo 源目录
demoDist, // demo 目标目录
wxss: {
less: true, // 使用 less 来编写 wxss
sourcemap: false, // 生成 less sourcemap
},
js: {
webpack: true, // 使用 webpack 来构建 js
},
copy: {
src: ['./static/**/*', './**/*.wxss', './**/*.wxs']
}, // 不需要编译的静态文件直接copy
五、开发预览
npm run watch
执行后将会编译tools/demo下的文件，到目录miniprogram_dev
打开微信开发者工具，将此文件夹导入，即可预览
此后每次更改demo中的文件即可实时预览
六、发布组件库到npm
npm run build
执行后将会编译src下的文件，到目录miniprogram_dist
切换到此目录，执行
npm init
生成好package.json后，添加以下代码，作用是声明此仓库是小程序自定义组件包，否则小程序将以常规npm包去编译找入口文件，造成编译错误
"miniprogram": "weapp"
七、使用npm包
npm install xxx
更改小程序项目配置project.config.json
packNpmManually: true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./"
}
],
点击开发者工具顶部工具>构建npm
将会在项目顶层生成miniprogram_npm文件夹,此处以vant为例
|--miniprogram_npm
| |--@vant
| |-- |--weapp
| |-- |-- |--button
页面中使用
{
"navigationBarTitleText": "首页",
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
}
参考：
微信小程序使用npm包
