Modern Js

layout: post
title:  modern 入门
tags: modern
categories: modern

官网

建议全局安装

• pnpm add -g @modern-js/create
• pnpm add @rspack/core @rspack/cli -g

创建项目

• mkdir react-ai && cd react-ai
• npx @modern-js/create@latest

  或者(此方法可以保证想要的版本不干扰全局安装的版本)

• pnpm dlx @modern-js/create react-ai

注意

如果有biomejs依赖，需要安装

pnpm i -D –save-exact @biomejs/biome

运行项目

可在新项目的目录下运行以下命令：

• pnpm run dev # 启动开发服务器
• pnpm run build # 构建生产环境产物
• pnpm run serve # 启动生产环境服务
• pnpm run lint # 运行 ESLint 并自动修复问题
• pnpm run new # 启用可选功能或创建项目要素

目录结构

├── node_modules
├── src
│   ├── modern-app-env.d.ts
│   └── routes
│       ├── index.css
│       ├── layout.tsx
│       └── page.tsx
├── modern.config.ts
├── package.json
├── pnpm-lock.yaml
├── README.md
└── tsconfig.json

单入口与多入口

单入口

• src/routes/index.tsx ``` import React from ‘react’; import { render } from ‘react-dom’; import App from ‘./App’;

render(, document.getElementById(‘root’));

### 多入口
- src/routes/index.tsx

import React from ‘react’; import { render } from ‘react-dom’; import App from ‘./App’;

const routes = [ { path: ‘/’, component: App, }, { path: ‘/about’, component: () => import(‘./About’), }, ];

render( <Router routes={routes}> <Route path="/" component={App} /> <Route path="/about" component={About} /> </Router>, document.getElementById(‘root’), );

```

使用 Tailwind CSS

在 Modern.js 中使用 Tailwind CSS，你只需要按照以下步骤操作：

在项目根目录下执行 pnpm run new，按照如下进行选择： ? 请选择你想要的操作 启用可选功能 ? 请选择功能名称 启用 「Tailwind CSS」 支持

成功开启后，你会看到 package.json 中新增了 tailwindcss 和 @modern-js/plugin-tailwindcss 依赖。 在 modern.config.ts 中注册 Tailwind 插件: modern.config.ts import { tailwindcssPlugin } from ‘@modern-js/plugin-tailwindcss’;

export default defineConfig({ plugins: […, tailwindcssPlugin()], });

创建 index.css 文件，添加以下代码： index.css @tailwind base; @tailwind components; @tailwind utilities;

使用其他 React 组件库

Modern.js 可以与社区中任意的 React 组件库搭配使用，

• MUI、Ant Design、Arco Design、Semi Design、Radix UI 等。