@megalo/cli-service

🛠️ 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/[email protected] -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 文件,作为入口

demo

https://github.com/bigmeow/megalo-demo

TODO

• 集成到 megalo-cli
• typescript 支持

更新记录

• ［0.1.1 ］ 修复windows路径兼容问题
• ［0.1.2 ］ 内置 @megalo/api 插件的webpack配置; 内置 px2rpx-loader,将px单位统一转换成rpx单位,默认转换比例为: 1px ==> 2rpx