创建 react 应用的脚手架
# npm usage
npm install @monado/cli -g
@monado/cli create <projectName>
# pnpm usage
pnpm dlx @monado/cli create <projectName>
基于 webpack 的用于构建 react 应用的打包工具,支持 typescript、mdx、tailwindcss、postcss 等常用库
# 安装
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-js/react 后 monado-scirpts 自动启用 mdx-loader
npm install @mdx-js/react
安装 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 提供开源开发许可证对本项目的支持