sakurawen / monado

用于创建react应用的脚手架及其打包工具、基于webpack和swc构建

@monado/cli

创建 react 应用的脚手架

usage

# npm usage
npm install @monado/cli -g
@monado/cli create <projectName>

# pnpm usage
pnpm dlx @monado/cli create <projectName>

@monado/scripts

基于 webpack 的用于构建 react 应用的打包工具，支持 typescript、mdx、tailwindcss、postcss 等常用库

usage

# 安装
npm install -D @monado/scripts

# 启动开发环境
npx monado-scripts start

# 启动打包
npx monado-scripts build

打包入口

monado-scripts 会从项目文件夹下的src目录中按照优先级读取以下文件之一作为打包入口

• index.tsx
• index.ts
• main.tsx
• main.ts
• index.jsx
• index.js
• main.jsx
• main.js

配置文件

在项目文件夹下创建 monado.config.json 作为配置文件，目前支持的配置如下

{
  "publicPath": "/",
  "devServer": {
    "port": 4000,
    "proxy": {
      "/api": "http://localhost:9000"
    }
  },
  "alias": {
    "@": "src"
  },
  "plugins": {
    "bundleAnalyzer": false
  }
}

启用 mdx

安装@mdx-js/react 后 monado-scirpts 自动启用 mdx-loader

npm install @mdx-js/react

启用 scss

安装 sass 后 monado-scirpts 自动启用 sass-loader,并支持 css module

npm install sass

开发代理配置

@monado/scripts 的配置文件的开发服务代理使用与 webpack 开发代理一样的规则

{
  "devServer": {
    "proxy": {
      "/api": {
        "target": "http://localhost:8000",
        "pathRewrite": {
          "^/api": ""
        }
      }
    }
  }
}

别名配置

在 monado.config.json 的 alias 字段下配置别名 以下为将@作为项目根目录下src目录别名的配置

{
  "alias": {
    "@": "src"
  }
}

感谢

感谢 jetbrains 提供开源开发许可证对本项目的支持