@mega-apps/cli

@mega-apps/cli

Mom Web 应用统一构建工具

附带推荐的基础运行依赖包，开发者可以在实际使用中查缺补漏。

特性

• 重点支持使用Nuxt脚手架创建的项目(附带推荐依赖包)
• 支持使用VueCLI脚手架创建的项目（不附带依赖包）
• 自动识别Nuxt项目及VueCLI项目
• 注入VueLoader, 实现 Vue 开启组件名称自动命名与开发环境统一。
• 注入Vue补丁, 实现嵌套子布局路由正常（Keepalive情况下)。
• 注入Module.prototype.require, 兼容依赖包查找
• 注入项目规范检测及修补机制
• 依赖安装加速控制(.npmrc, .yarnrc) 适用于npm中国镜像站
• 推荐使用Yarn或者pnPm来管理依赖
• 集成项目、代码规范依赖；如：ls-lint, eslint, stylelint, ...
• 集成Jest, Playwright, Vitest 等测试框架
• 集成TypeScript引擎
• 集成TailwindCSS，PostCSS, LESS, SASS 等引擎
• 集成@types 类型库
• 集成 Nuxtjs >= 2.15.8, Nuxt Libs 常用库: https://modules.nuxtjs.org/
• 集成适用于Webpack, Vite 常用构建工具
• 集成各种Mock工具，支持HTTP/HTTPS, WebSocket, Native Mock
• 集成MegaMom平台的各种插件/库/模块. 如：@mega-apps/nuxt-plugin-mom

安装

# 推荐使用 Yarn 来安装依赖

yarn add @mega-apps/cli --dev

# 或使用 pnPm 安装依赖

pnpm add -D @mega-apps/cli

配置

// package.json 文件
{
  // 修改 package.json 中的配置
  // ...
    "scripts": {
    "dev": "mom",
    "build": "mom generate"
    // ...
  },
}

应用

如何扩展 nuxt.config.js

// "@mega-apps/cli" 提供了 nuxtConfigExtend 函数 及 momMerge 函数
// momMerge 函数的原型：
// import momMerge from "deepmerge";
// export { momMerge };

import { nuxtConfigExtend, momMerge } from "@mega-apps/cli";

默认提供了基础的nuxt.config 配置

// 引入基础的nuxt.config.配置
import { generateBaseConfig, def } from "@mega-apps/cli/config/nuxt.config";

如何生成一个新的配置

// 引入基础的nuxt.config.配置
import { generateBaseConfig, def } from "@mega-apps/cli/config/nuxt.config";

// def 函数，是一个兼容的快捷定义函数


const baseCfg = generateBaseConfig({
  supportESLint: false,
  supportStyleLint: false,
  supportTypeScript: false,
  supportTailwindCSS: false,
});

// 构造新的 nuxt.config
const config = nuxtConfigExtend([
  {},
  def(1, {})
], baseCfg);

// 导出配置
export default config;

如何对node-sass 进行配置

import {getDefaultSassImplementation } from "@mega-apps/cli/config/nuxt.config";

/**
 * 获得默认的Sass解析器
 * @param defaultPkg, 默认值：node-sass, 可选值：sass
 * @returns module.exports
 * @note 关于node-sass的版本要根据nodejs的版本指定，参见：https://www.npmjs.com/package/node-sass 内的版本号对应说明
 *

如何查看基础的配置内容

基础配置存放到： "@mega-apps/cli/config/nuxt.config.js"

变更日志

CHANGELOG