Skip to content

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

License

Notifications You must be signed in to change notification settings

sakurawen/monado

Repository files navigation

@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 提供开源开发许可证对本项目的支持

JetBrains Logo (Main) logo.

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published