@modern-js/main-doc 0.0.0-next-20221209080421 → 0.0.0-next-20221209140613
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +1 -1
- package/CHANGELOG.md +21 -17
- package/en/docusaurus-plugin-content-docs/current/apis/app/commands/inspect.md +0 -4
- package/en/docusaurus-plugin-content-docs/current/configure/app/server/routes.md +2 -4
- package/package.json +3 -3
- package/zh/apis/app/commands/inspect.md +0 -4
- package/zh/configure/app/server/routes.md +2 -4
- package/zh/guides/advanced-features/compatibility.md +0 -36
- package/zh/tutorials/first-app/c04-es6-plus-and-ts/4.3-compatibility.md +0 -17
- package/en/docusaurus-plugin-content-docs/current/configure/app/output/enable-modern-mode.md +0 -34
- package/zh/configure/app/output/enable-modern-mode.md +0 -34
package/.turbo/turbo-build.log
CHANGED
package/CHANGELOG.md
CHANGED
@@ -1,24 +1,28 @@
|
|
1
1
|
# @modern-js/main-doc
|
2
2
|
|
3
|
-
## 0.0.0-next-
|
3
|
+
## 0.0.0-next-20221209140613
|
4
4
|
|
5
5
|
### Patch Changes
|
6
6
|
|
7
|
-
-
|
7
|
+
- 7879e8f71: refactor: remove enableModernMode config
|
8
|
+
|
9
|
+
refactor: 不再支持 enableModernMode 配置项
|
10
|
+
|
11
|
+
- 5927355ee: feat: develop documentation directly with main-doc
|
8
12
|
feat: 直接使用 main-doc 包开发文档
|
9
|
-
-
|
13
|
+
- 1ef69374b: feat: support update main-doc when package build or website build
|
10
14
|
feat: 支持在包发布和官网发布时,更新 main-doc 包
|
11
|
-
- Updated dependencies [
|
12
|
-
- Updated dependencies [
|
13
|
-
- Updated dependencies [
|
14
|
-
- Updated dependencies [
|
15
|
-
- Updated dependencies [
|
16
|
-
- Updated dependencies [
|
17
|
-
- Updated dependencies [
|
18
|
-
- Updated dependencies [
|
19
|
-
- Updated dependencies [
|
20
|
-
- Updated dependencies [
|
21
|
-
- Updated dependencies [
|
22
|
-
- Updated dependencies [
|
23
|
-
- Updated dependencies [
|
24
|
-
- @modern-js/builder-doc@0.0.0-next-
|
15
|
+
- Updated dependencies [2bc090c08]
|
16
|
+
- Updated dependencies [f96a72521]
|
17
|
+
- Updated dependencies [57077b2c6]
|
18
|
+
- Updated dependencies [2ff6167be]
|
19
|
+
- Updated dependencies [5402fdb0c]
|
20
|
+
- Updated dependencies [10d08a480]
|
21
|
+
- Updated dependencies [5d67c26cd]
|
22
|
+
- Updated dependencies [af4422d67]
|
23
|
+
- Updated dependencies [dda38c9c3]
|
24
|
+
- Updated dependencies [812913ccd]
|
25
|
+
- Updated dependencies [3fae2d03b]
|
26
|
+
- Updated dependencies [df41d71ad]
|
27
|
+
- Updated dependencies [14b712da8]
|
28
|
+
- @modern-js/builder-doc@0.0.0-next-20221209140613
|
@@ -33,7 +33,3 @@ modern inspect --env production
|
|
33
33
|
### SSR Configuration
|
34
34
|
|
35
35
|
If the project has SSR enable, an additional `webpack.ssr.inspect.js` file will be generated in the `dist/`, corresponding to the webpack configuration at SSR build time.
|
36
|
-
|
37
|
-
### Modern Configuration
|
38
|
-
|
39
|
-
if project enable [enableModernMode](/docs/configure/app/output/enable-modern-mode), an additional `webpack.modern.inspect.js` file will be generated in the `dist/`corresponding to the webpack configuration at modern web build.
|
@@ -52,16 +52,14 @@ After executing the `dev` command, you can see in `dist/route.json` that there a
|
|
52
52
|
"entryName": "page-a",
|
53
53
|
"entryPath": "html/page-a/index.html",
|
54
54
|
"isSPA": true,
|
55
|
-
"isSSR": false
|
56
|
-
"enableModernMode": false
|
55
|
+
"isSSR": false
|
57
56
|
},
|
58
57
|
{
|
59
58
|
"urlPath": "/b",
|
60
59
|
"entryName": "page-a",
|
61
60
|
"entryPath": "html/page-a/index.html",
|
62
61
|
"isSPA": true,
|
63
|
-
"isSSR": false
|
64
|
-
"enableModernMode": false
|
62
|
+
"isSSR": false
|
65
63
|
},
|
66
64
|
]
|
67
65
|
}
|
package/package.json
CHANGED
@@ -11,20 +11,20 @@
|
|
11
11
|
"modern",
|
12
12
|
"modern.js"
|
13
13
|
],
|
14
|
-
"version": "0.0.0-next-
|
14
|
+
"version": "0.0.0-next-20221209140613",
|
15
15
|
"publishConfig": {
|
16
16
|
"registry": "https://registry.npmjs.org/",
|
17
17
|
"access": "public"
|
18
18
|
},
|
19
19
|
"peerDependencies": {
|
20
|
-
"@modern-js/builder-doc": "0.0.0-next-
|
20
|
+
"@modern-js/builder-doc": "0.0.0-next-20221209140613"
|
21
21
|
},
|
22
22
|
"devDependencies": {
|
23
23
|
"ts-node": "^10",
|
24
24
|
"fs-extra": "^10",
|
25
25
|
"@types/node": "^16",
|
26
26
|
"@types/fs-extra": "^9",
|
27
|
-
"@modern-js/builder-doc": "0.0.0-next-
|
27
|
+
"@modern-js/builder-doc": "0.0.0-next-20221209140613"
|
28
28
|
},
|
29
29
|
"scripts": {
|
30
30
|
"build": "npx ts-node ./scripts/sync.ts"
|
@@ -33,7 +33,3 @@ modern inspect --env production
|
|
33
33
|
### SSR 配置
|
34
34
|
|
35
35
|
如果项目开启了 SSR 能力,则在 `dist` 目录会另外生成一份 `webpack.ssr.inspect.js` 文件,对应 SSR 构建时的 webpack 配置。
|
36
|
-
|
37
|
-
### Modern 配置
|
38
|
-
|
39
|
-
如果项目开启了 [enableModernMode](/docs/configure/app/output/enable-modern-mode) 选项,则在 `dist` 目录会另外生成一份 `webpack.modern.inspect.js` 文件,对应现代浏览器的 webpack 配置。
|
@@ -52,16 +52,14 @@ export default defineConfig({
|
|
52
52
|
"entryName": "page-a",
|
53
53
|
"entryPath": "html/page-a/index.html",
|
54
54
|
"isSPA": true,
|
55
|
-
"isSSR": false
|
56
|
-
"enableModernMode": false
|
55
|
+
"isSSR": false
|
57
56
|
},
|
58
57
|
{
|
59
58
|
"urlPath": "/b",
|
60
59
|
"entryName": "page-a",
|
61
60
|
"entryPath": "html/page-a/index.html",
|
62
61
|
"isSPA": true,
|
63
|
-
"isSSR": false
|
64
|
-
"enableModernMode": false
|
62
|
+
"isSSR": false
|
65
63
|
},
|
66
64
|
]
|
67
65
|
}
|
@@ -40,42 +40,6 @@ Modern.js 中还提供了基于浏览器 [UA](https://developer.mozilla.org/zh-C
|
|
40
40
|
|
41
41
|

|
42
42
|
|
43
|
-
|
44
|
-
## 差异化分发
|
45
|
-
|
46
|
-
Modern.js 提供了运行时基于浏览器 User Agent 的差异化分发方案, 设置 [`output.enableModernMode`](/docs/configure/app/output/enable-modern-mode) 后, 生产环境会自动构建出针对现代浏览器语法未降级的 JS 产物和针对旧版本浏览器带有 Polyfill 的 JS 产物:
|
47
|
-
|
48
|
-
```bash title="dist/static/js"
|
49
|
-
├── 370.95db0e84-es6.js
|
50
|
-
├── 370.95db0e84-es6.js.map
|
51
|
-
├── 370.ace5d8a0.js
|
52
|
-
├── 370.ace5d8a0.js.map
|
53
|
-
├── main.64eb3bc7-es6.js
|
54
|
-
├── main.64eb3bc7-es6.js.map
|
55
|
-
├── main.c8aab430.js
|
56
|
-
├── main.c8aab430.js.map
|
57
|
-
├── runtime-main.9ad9a46b-es6.js
|
58
|
-
├── runtime-main.9ad9a46b-es6.js.map
|
59
|
-
├── runtime-main.dccca6e0.js
|
60
|
-
└── runtime-main.dccca6e0.js.map
|
61
|
-
```
|
62
|
-
|
63
|
-
同时 HTML 也会构建出对应的 ES6 版本:
|
64
|
-
|
65
|
-
```js title="dist/html/main/index-es6.html"
|
66
|
-
<script defer="defer" src="/static/js/370.95db0e84-es6.js"></script>
|
67
|
-
```
|
68
|
-
|
69
|
-
```js title="dist/html/main/index.html"
|
70
|
-
<script defer="defer" src="/static/js/370.ace5d8a0.js"></script>
|
71
|
-
```
|
72
|
-
|
73
|
-
通过 `pnpm run build && pnpm run start` 启动服务器, 访问页面时,会根据浏览器信息决定返回 `index-es6.html` 还是 `index.html`。
|
74
|
-
|
75
|
-
:::info 注
|
76
|
-
内部目前使用 [@babel/compat-data](https://github.com/babel/babel/blob/main/packages/babel-compat-data/data/native-modules.json) 来判断具体浏览器是否支持 es6 语法。
|
77
|
-
:::
|
78
|
-
|
79
43
|
## Browserslist 配置
|
80
44
|
|
81
45
|
Modern.js 支持在项目根目录 `package.json` 文件中的 `browserslist` 字段(或单独的 `.browserslistrc` 文件)指定项目覆盖的目标浏览器范围。该值会被 [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) 和 [`autoprefixer`](https://github.com/postcss/autoprefixer) 用来确定需要转换的 JavaScript 语法特性和需要添加的 CSS 浏览器前缀。
|
@@ -41,23 +41,6 @@ export default defineConfig({
|
|
41
41
|
如果遇到无法识别的浏览器,Modern.js 将会返回全量的 polyfill。
|
42
42
|
:::
|
43
43
|
|
44
|
-
接下里我们继续修改 `modern.config.ts`:
|
45
|
-
|
46
|
-
```typescript title="modern.config.ts"
|
47
|
-
export default defineConfig({
|
48
|
-
output: {
|
49
|
-
enableModernMode: true,
|
50
|
-
polyfill: 'ua',
|
51
|
-
},
|
52
|
-
});
|
53
|
-
```
|
54
|
-
|
55
|
-
以上配置将会开启「 差异化分发 」,在原生支持模块功能的浏览器中,Modern.js 优先使用带有 ESM 模块语法静态资源的 HTML,浏览器能够最优化的加载模块,带来更好的页面性能。
|
56
|
-
|
57
|
-
执行 `pnpm run build && pnpm run start`,打开页面,可以看到已经加载了带有 `-es6` 后缀的资源文件:
|
58
|
-
|
59
|
-

|
60
|
-
|
61
44
|
:::info 注
|
62
45
|
更多相关内容可以查看 [**客户端兼容性**](/docs/guides/advanced-features/compatibility)。
|
63
46
|
:::
|
package/en/docusaurus-plugin-content-docs/current/configure/app/output/enable-modern-mode.md
DELETED
@@ -1,34 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_label: enableModernMode
|
3
|
-
---
|
4
|
-
|
5
|
-
# output.enableModernMode
|
6
|
-
|
7
|
-
* Type: `boolean`
|
8
|
-
* Default: `false`
|
9
|
-
|
10
|
-
Modern.js default value to build JS products with Polyfill for older browsers. After opening this configuration, you can automatically build JS products that are not degraded for modern browser syntax in the production environment. The product filename format is `[name].[hash]-es6/js`.
|
11
|
-
|
12
|
-
For example, configure the following configuration:
|
13
|
-
|
14
|
-
```ts title="modern.config.ts"
|
15
|
-
import { defineConfig } from '@modern-js/app-tools';
|
16
|
-
|
17
|
-
export default defineConfig({
|
18
|
-
output: {
|
19
|
-
enableModernMode: true,
|
20
|
-
},
|
21
|
-
});
|
22
|
-
```
|
23
|
-
|
24
|
-
After executing the `build` command, modern is packaged in addition to the normal Client packaging, and the `dist/static/js` directory will generate es6 related products.
|
25
|
-
|
26
|
-

|
27
|
-
|
28
|
-
After executing the `start` command, use the latest version Chrome browser access, and observe that the requested JS resource in the Network is an es6 product.
|
29
|
-
|
30
|
-

|
31
|
-
|
32
|
-
:::info
|
33
|
-
For more information, see [Client side compatibility](/docs/guides/advanced-features/compatibility)。
|
34
|
-
:::
|
@@ -1,34 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_label: enableModernMode
|
3
|
-
---
|
4
|
-
|
5
|
-
# output.enableModernMode
|
6
|
-
|
7
|
-
* 类型: `boolean`
|
8
|
-
* 默认值:`false`
|
9
|
-
|
10
|
-
Modern.js 默认值构建针对旧版浏览器带有 Polyfill 的 JS 产物,开启该配置后,可以在生产环境会自动构建出针对现代浏览器语法未降级的 JS 产物,产物文件名格式为 `[name].[hash]-es6/js`。
|
11
|
-
|
12
|
-
例如配置如下配置:
|
13
|
-
|
14
|
-
```ts title="modern.config.ts"
|
15
|
-
import { defineConfig } from '@modern-js/app-tools';
|
16
|
-
|
17
|
-
export default defineConfig({
|
18
|
-
output: {
|
19
|
-
enableModernMode: true,
|
20
|
-
},
|
21
|
-
});
|
22
|
-
```
|
23
|
-
|
24
|
-
执行 `build` 命令后,除了正常的 Client 打包外, 还进行了 Modern 的打包,并且 `dist/static/js` 目录会生成 es6 相关产物。
|
25
|
-
|
26
|
-

|
27
|
-
|
28
|
-
执行 `start` 命令后,使用最新版本 Chrome 浏览器访问,观察 Network 中请求的 JS 资源为 es6 产物。
|
29
|
-
|
30
|
-

|
31
|
-
|
32
|
-
:::info
|
33
|
-
更多内容可以查看[客户端兼容性](/docs/guides/advanced-features/compatibility)。
|
34
|
-
:::
|