🛠️ megalo的开箱即用webpack小程序脚手架配置,内置megalo生态的部分插件,并提供用户自定义配置的入口(megalo for vue-cli3插件出来之前的临时替代方案)
本仓库为0.x版本,最新1.x版本已经迁移到https://github.com/megalojs/megalo-cli
- 零配置可用
- 可根据自己的需求修改webpack原始配置
- 内置了小程序项目常用的基础设施配置,满足基本需求
- 项目配置分离,零耦和,配置插件化
@megalo/cli-service
依赖 @megalo/entry
、@megalo/env-plugin
、@megalo/target
、@megalo/template-compiler
npm i @megalo/entry @megalo/env-plugin @megalo/target @megalo/template-compiler @megalo/cli-service@0.1.2 -D
@megalo/cli-servic
1.0 版本后 与0.X版本将不兼容
在项目根目录的package.json
文件中的scripts
选项加上一条:
"scripts": {
"dev:wechat": "megalo-cli-service --mode development --platform wechat"
}
运行命令:
npm run dev:wechat
控制台参数文档参考这里
如果你觉得webpack配置不满足项目需求,你可以在项目根目录下,新建一个megalo.config.js
文件,书写自己的配置并导出,目前该配置文件的默认配置如下(均为选填):
module.exports = {
// 构件生产模式时的配置(仅在process.env.NODE_ENV === 'production' 时该选项生效)
build: {
// 生成分析报告
bundleAnalyzerReport: false,
// 生成sourceMap 'none' 或者 'cheap-source-map'
sourceMap: 'none'
},
configureWebpack: config => {
// 你可以在这里修改webpack的配置并返回,或者直接创建一个新的webpack配置对象返回;
// 你的配置将被 webpack-merge 合并 (https://github.com/survivejs/webpack-merge)
return config
},
// 原生小程序组件存放目录,默认为src/native
// 如果你有多个平台的原生组件,你应当在此目录下再新建几个子文件夹,我们约定,子文件夹名和平台的名字一致:
// 微信小程序组件则命名为 'wechat',支付宝为'alipay', 百度为 'swan'
// 如果只有一个平台,则无需再新建子文件夹
nativeDir: '/src/native'
}
以下使用以下 megalo
插件时,直接 npm i 插件名
即可,无需更改 webpack
配置,直接使用:
- megalo-api (重新封装各个端中的API,由 megalo 统一对外抛出方法名)
- megalo-px2rpx-loader (将项目中的
px
单位统一转成rpx
单位) - megalo-vhtml-plugin (富文本插件)
- megalo-env-plugin (环境变量设置、替换)
内置的其他的 webpack
配置:
- css-loader、less-loader、sass-loader、stylus-loader等 css预编译相关配置
- file-loader 处理图片资源文件
- eslint 如果不需要启用,直接干掉项目根目录下的
.eslintrc.js
文件即可 - babel 转 es5
- 编译、压缩、混淆等
@megalo/cli-service
对项目目录结构有一定要求, 例如:
src
目录下一定要有index.js
文件,作为入口
https://github.com/bigmeow/megalo-demo
- 集成到
megalo-cli
- typescript 支持
- [0.1.1 ] 修复windows路径兼容问题
- [0.1.2 ] 内置
@megalo/api
插件的webpack配置; 内置px2rpx-loader
,将px
单位统一转换成rpx
单位,默认转换比例为: 1px ==> 2rpx