@modern-js/main-doc 2.5.0 → 2.7.0

package/zh/apis/app/commands/lint.mdx

@@ -1,19 +0,0 @@
----
-sidebar_position: 4
-title: lint
----
-# lint
-
-```bash
-Usage: modern lint [options] [...files]
-
-lint and fix source files
-
-Options:
-  --no-fix    disable auto fix source file
-  -h, --help  display help for command
-```
-
-运行 `ESLint` 检查代码语法情况。通常情况下，我们只需要在 `git commit` 阶段通过 `lint-staged` 检查本次提交修改的部分代码。
-
-- `--no-fix` 参数设置后可以关闭自动修复 lint 错误代码的能力。

package/zh/apis/app/commands/new.mdx

@@ -1,54 +0,0 @@
----
-sidebar_position: 2
----
-# new
-
-```bash
-Usage: modern new [options]
-
-应用工程中执行生成器
-
-Options:
-  -d, --debug            开启 Debug 模式，打印调试日志信息 (default: false)
-  -c, --config <config>  生成器运行默认配置(JSON 字符串)
-  --dist-tag <tag>       生成器使用特殊的 npm Tag 版本
-  --registry             生成器运行过程中定制 npm Registry
-  -h, --help             显示命令帮助
-```
-
-`modern new` 命令用于在已有项目中添加项目元素。
-
-比如添加应用入口、启用启用一些可选功能如 Tailwind CSS、微前端开发模式等。
-
-### 添加入口
-
-在应用工程中，执行 `new` 命令添加入口如下：
-
-```bash
-$ npx modern new
-? 请选择你想要的操作 创建工程元素
-? 创建工程元素 新建「应用入口」
-? 请填写入口名称 entry
-```
-
-### 启用可选功能
-
-在应用工程中，执行 `new` 命令启用可选能力如下：
-
-```bash
-$ npx modern new
-? 请选择你想要的操作 启用可选功能
-? 启用可选功能 (Use arrow keys)
-❯ 启用 Tailwind CSS 支持
-  启用「BFF」功能
-  启用「微前端」模式
-  启用「单元测试 / 集成测试」功能
-  启用「Visual Testing (Storybook)」模式
-```
-
-:::caution 注意
-`--config` 参数对应参数值需要使用 JSON 字符串。
-
-pnpm 暂不支持使用 JSON 字符串作为参数值，可使用 `npm new` 开启相关功能。【[相关 Issue](https://github.com/pnpm/pnpm/issues/3876)】
-
-:::

package/zh/apis/app/commands/serve.mdx

@@ -1,27 +0,0 @@
----
-sidebar_position: 6
----
-# serve
-
-```bash
-Usage: modern serve [options]
-
-run server
-
-Options:
-  -c --config <config>  指定配置文件路径，可以为相对路径或绝对路径
-  -h, --help            显示命令帮助
-  --api-only            仅启动 API 接口服务
-```
-
-通常使用 `modern serve` 命令在生产环境下启用应用工程, 需要提前执行 [`build`](/apis/app/commands/build) 命令构建出对应产物。
-
-默认情况下，应用将会在 `localhost:8080` 启动，可以通过 `server.port` 修改 Server 端口号：
-
-```js
-export default defineConfig({
-  server: {
-    port: 8081,
-  },
-});
-```

package/zh/apis/app/commands/test.mdx

@@ -1,35 +0,0 @@
----
-sidebar_position: 3
----
-# test
-
-```bash
-Usage: modern test [options]
-
-Options:
-  -h, --help  显示命令帮助
-```
-
-:::caution 注意
-`modern test` 命令需要先通过 [`new`](/apis/app/commands/new) 命令启用「单元测试 / 集成测试」功能
-
-:::
-
-`modern test` 命令会自动运行项目下的测试用例，效果如下：
-
-```bash
-$ npx modern test
- PASS  src/tests/index.test.ts
-  The add method
-    ✓ should work fine. (2ms)
-
-Test Suites: 1 passed, 1 total
-Tests:       1 passed, 1 total
-Snapshots:   0 total
-Time:        0.994 s, estimated 1 s
-```
-
-:::info
-`src` 和 `api` 目录下面 `*.test.(js|ts)` 都会默认识别为测试用例。
-
-:::

package/zh/apis/app/commands/upgrade.mdx

@@ -1,18 +0,0 @@
----
-sidebar_position: 8
----
-# upgrade
-
-```
-Usage: modern upgrade [options]
-
-升级 Modern.js 到最新版本
-
-Options:
-  --registry <registry>  定制 npm registry (default: "")
-  -d,--debug             开启 Debug 模式，打印调试日志信息 (default: false)
-  --cwd <cwd>            项目路径 (default: "")
-  -h, --help             display help for command
-```
-
-在项目根目录下执行命令 `npx modern upgrade`，会默认将当前执行命令项目的 `package.json` 中的 Modern.js 相关依赖更新至最新版本。

package/zh/guides/css/_category_.json

@@ -1,5 +0,0 @@
-{
-  "label": "CSS 开发方案",
-  "position": 5,
-  "collapsed": false
-}

package/zh/guides/css/css-in-js.mdx

@@ -1,40 +0,0 @@
----
-sidebar_position: 1
----
-
-# CSS-in-JS
-
-CSS-in-JS 是一种可以将 CSS 样式写在 JS 文件里的技术。Modern.js 集成了社区常用的 CSS-in-JS 实现库 [styled-components](https://styled-components.com/)，它使用 JavaScript 的新特性 [Tagged template](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) 编写组件的 CSS 样式。可以直接从 `@modern-js/runtime/styled` 引入 [styled-components](https://styled-components.com/) 的 API 进行使用。
-
-当需要编写一个内部字体为红色的 `div` 组件时，可以如下实现：
-
-```js
-import styled from '@modern-js/runtime/styled';
-
-const RedDiv = styled.div`
-  color: red;
-`;
-```
-
-当需要根据组件的 `props` 动态设置组件样式时，例如 `props` 的属性 `primary` 为 `true` 时，按钮的颜色为白色，其他情况为红色，实现代码如下：
-
-```js
-import styled from '@modern-js/runtime/styled';
-
-const Button = styled.button`
-  color: ${props => (props.primary ? 'white' : 'red')};
-  font-size: 1em;
-`;
-```
-
-关于 styled-components 的更多用法，请参考【[styled-components 官网](https://styled-components.com/)】。
-
-:::info 补充信息
-Modern.js 内部使用了 Babel 插件 [babel-plugin-styled-components](https://github.com/styled-components/babel-plugin-styled-components)，可以通过 [`tools.styledComponents`](/configure/app/tools/styled-components) 对插件进行配置。
-
-:::
-
-:::tip 提示
-如果需要使用 [styled-jsx](https://www.npmjs.com/package/styled-jsx)、[Emotion](https://emotion.sh/) 等其他 CSS-in-JS 库，需要先安装对应库的依赖。具体使用方式请参考对应库的官网。
-
-:::

package/zh/guides/css/css-modules.mdx

@@ -1,87 +0,0 @@
----
-sidebar_position: 5
----
-
-# CSS Modules
-
-Modern.js 为 [CSS Modules](https://github.com/css-modules/css-modules) 提供了开箱即用的支持。
-
-## 文件后缀形式 CSS Modules
-
-默认情况下，以 `.module.(css|scss|sass|less)` 结尾的文件会作为 CSS Modules 文件处理，例如：
-
-```css title="button.module.css"
-.redColor {
-  color: red;
-}
-```
-
-```js title="Button.jsx"
-import styles from './button.module.css';
-
-export default function Button() {
-  return (
-    <button type="button" className={styles.redColor}>
-      red button
-    </button>
-  );
-}
-```
-
-最终将被编译为
-
-```js
-<button type="button" className="button_redColor__1-RBg">
-  red button
-</button>
-```
-
-## 全面启用 CSS Modules
-
-如果想去掉文件名中 `.module` 后缀，可以设置 [`output.disableCssModuleExtension`](/configure/app/output/disable-css-module-extension)。
-
-设置后，除了 `node_modules/` 目录下的样式文件和文件名称格式为 `[name].global.(css|scss|sass|less)` 之外的所有样式文件，都会作为 CSS Modules 处理。
-
-如果此时需要全局样式，可以通过创建文件名称格式为 `[name].global.(css|less|scss|sass)` 的样式文件来解决， 例如:
-
-```css title="app.global.css"
-.bg-blue {
-  background-color: blue;
-}
-```
-
-```css title="button.css"
-.redColor {
-  color: red;
-}
-```
-
-```js title="App.jsx"
-import './app.global.css';
-import styles from './button.css';
-
-export default function Button() {
-  return (
-    <button type="button" className={`${styles.redColor} bg-blue`}>
-      button
-    </button>
-  );
-}
-```
-
-最终将被编译为:
-
-```js
-<button type="button" className="button__redColor--JsFYl bg-blue">
-  button
-</button>
-```
-
-最终效果如下：
-
-![](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/more-css-modules.png)
-
-:::tip 提示
-使用 [babel-plugin-react-css-modules](https://github.com/gajus/babel-plugin-react-css-modules) 时需要注意，该插件的配置选项 `generateScopedName` 需要和 [`output.cssModuleLocalIdentName`](/configure/app/output/css-module-local-ident-name) 保持一致。
-
-:::

package/zh/guides/css/less-sass.mdx

@@ -1,17 +0,0 @@
----
-sidebar_position: 4
----
-
-# Less 和 Sass
-
-[Less](https://lesscss.org/) 和 [Sass](https://sass-lang.com/) 是常用的两种 CSS 预处理器，Modern.js 内置了 Less 和 Sass 编译能力的支持。
-
-## 自定义配置
-
-- 如果需要自定义 [less-loader](https://github.com/webpack-contrib/less-loader) 的配置，请参考 [tools.less](/configure/app/tools/less) 配置项。
-- 如果需要自定义 [sass-loader](https://github.com/webpack-contrib/sass-loader) 的配置，请参考 [tools.less](/configure/app/tools/sass) 配置项。
-
-:::tip 提示
-经过 Less 和 Sass 预编译后的 CSS 文件，仍然会经过 Modern.js 内置的 [PostCSS](https://postcss.org/) 的转换，具备良好的浏览器兼容性。相关内容请参考【[PostCSS](/guides/css/postcss)】。
-
-:::

package/zh/guides/css/postcss.mdx

@@ -1,80 +0,0 @@
----
-sidebar_position: 3
----
-
-# PostCSS
-
-[PostCSS](https://postcss.org/) 是一个用 JavaScript 工具和插件转换 CSS 代码的工具。Modern.js 内置 PostCSS，并集成 [Autoprefixer](https://github.com/postcss/autoprefixer) 等常用的 PostCSS 插件，能够满足大多数项目的样式开发需求。
-
-默认情况下，Modern.js 会对 CSS 进行以下编译和转换：
-
-1. [Autoprefixer](https://github.com/postcss/autoprefixer) 根据需要支持的浏览器范围，会自动为 CSS 规则添加需要的浏览器厂商前缀。Modern.js 默认支持的浏览器范围为：`['> 0.01%', 'not dead', 'not op_mini all']`。
-
-:::info 注意
-
-- 【支持的浏览器范围为：`> 0.01%`】是指浏览器市场份额大于 0.01%。
-- `not dead` 是指不包含官方不再支持的浏览器和过去 24 个月没有更新的浏览器。
-- `not op_mini all` 是指不包含 Opera Mini。
-
-:::
-
-:::info 补充信息
-如果需要修改默认浏览器支持范围，可以在项目的 `package.json` 文件中配置 `browserslist`，设置规则参考 [Browserslist](https://github.com/browserslist/browserslist) 的使用，下面是一个示例：
-`json title="package.json" { "browserslist": [ "last 1 version", "> 1%", "IE 10" ] } `
-
-:::
-
-2. 提供 [CSS custom properties](https://www.w3.org/TR/css-variables-1/) 支持，可以在 CSS 中定义和使用自定义变量，如：
-
-```css
-:root {
-  --main-bg-color: pink;
-}
-
-body {
-  background-color: var(--main-bg-color);
-}
-```
-
-3. 提供 [CSS Nesting](https://drafts.csswg.org/css-nesting-1/) 支持，可以在 CSS 中使用嵌套写法，如：
-
-```css
-table.colortable td {
-  text-align: center;
-}
-table.colortable td.c {
-  text-transform: uppercase;
-}
-```
-
-也可以改写成 CSS 嵌套写法：
-
-```css
-table.colortable {
-  & td {
-    text-align: center;
-    &.c {
-      text-transform: uppercase;
-    }
-  }
-}
-```
-
-4. 修复已知的 [Flexbugs](https://github.com/philipwalton/flexbugs) 。
-5. 对以下 CSS 特性提供兼容：
-   - [`initial` 属性值](https://developer.mozilla.org/en-US/docs/Web/CSS/initial_value)
-   - [`break-` 属性](https://developer.mozilla.org/en-US/docs/Web/CSS/break-after)
-   - [`font-variant`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant)
-   - [Media Query Ranges](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#syntax_improvements_in_level_4)
-
-当需要修改 PostCSS 配置时，可以通过底层配置 [`tools.postcss`](/configure/app/tools/postcss) 来实现，下面是一个示例：
-
-```ts title="modern.config.ts"
-export default defineConfig({
-  tools: {
-    postcss: {
-      plugins: ['autoprefixer', ('postcss-flexbugs-fixes': {})],
-    },
-  },
-});
-```