@modern-js/module-tools-docs 2.67.3 → 2.67.5
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/CHANGELOG.md
CHANGED
|
@@ -339,6 +339,10 @@ export default {
|
|
|
339
339
|
|
|
340
340
|
Reference for array settings: [copy-webpack-plugin patterns](https://github.com/webpack-contrib/copy-webpack-plugin#patterns)
|
|
341
341
|
|
|
342
|
+
:::tip
|
|
343
|
+
Refer to [Use the Copy Tools](/guide/advance/copy) for the complete usage of the `copy` option.
|
|
344
|
+
:::
|
|
345
|
+
|
|
342
346
|
## copy.patterns
|
|
343
347
|
|
|
344
348
|
- **Type**: `CopyPattern[]`
|
|
@@ -755,8 +759,7 @@ type HookList = {
|
|
|
755
759
|
name: string;
|
|
756
760
|
apply: (compiler: ICompiler) => void;
|
|
757
761
|
applyAfterBuiltIn?: boolean;
|
|
758
|
-
}
|
|
759
|
-
|
|
762
|
+
};
|
|
760
763
|
```
|
|
761
764
|
|
|
762
765
|
- **Default**: `[]`.
|
|
@@ -882,7 +885,6 @@ For more information about JSX Transform, you can refer to the following links:
|
|
|
882
885
|
|
|
883
886
|
:::
|
|
884
887
|
|
|
885
|
-
|
|
886
888
|
## loader
|
|
887
889
|
|
|
888
890
|
**Experimental**
|
|
@@ -895,7 +897,7 @@ export default defineConfig({
|
|
|
895
897
|
buildConfig: {
|
|
896
898
|
loader: {
|
|
897
899
|
'.js': 'jsx',
|
|
898
|
-
}
|
|
900
|
+
},
|
|
899
901
|
},
|
|
900
902
|
});
|
|
901
903
|
```
|
|
@@ -1003,13 +1005,17 @@ Custom module resolution options
|
|
|
1003
1005
|
The basic usage is the same as [alias](#alias).
|
|
1004
1006
|
|
|
1005
1007
|
The issue with [alias](#alias) is that we incorrectly handled Module IDs in a bundleless scenario:
|
|
1008
|
+
|
|
1006
1009
|
```js
|
|
1007
|
-
import { createElement } from
|
|
1010
|
+
import { createElement } from 'react';
|
|
1008
1011
|
```
|
|
1012
|
+
|
|
1009
1013
|
When we configure alias: `{ react: 'react-native' }`, the result becomes:
|
|
1014
|
+
|
|
1010
1015
|
```js
|
|
1011
|
-
import { createElement } from
|
|
1016
|
+
import { createElement } from './react-native';
|
|
1012
1017
|
```
|
|
1018
|
+
|
|
1013
1019
|
A Module ID is incorrectly processed as a relative path, which is not expected.
|
|
1014
1020
|
|
|
1015
1021
|
We want to fix this issue, but it may break existing projects.
|
|
@@ -1021,6 +1027,7 @@ If you need this feature, please use `resolve.alias`.
|
|
|
1021
1027
|
In the next major version, `resolve.alias` will replace [alias](#alias).
|
|
1022
1028
|
|
|
1023
1029
|
:::warning
|
|
1030
|
+
|
|
1024
1031
|
- Note that this configuration should not be mixed with [alias](#alias).
|
|
1025
1032
|
- Ensure that this configuration specifies a relative path, such as `{ "@": "./src" }` rather than `{ "@": "src"}`.
|
|
1026
1033
|
|
|
@@ -1074,7 +1081,6 @@ export default defineConfig({
|
|
|
1074
1081
|
});
|
|
1075
1082
|
```
|
|
1076
1083
|
|
|
1077
|
-
|
|
1078
1084
|
### resolve.tsconfig
|
|
1079
1085
|
|
|
1080
1086
|
Used to configure enhanced-resolve in [tsconfig-paths-webpack-plugin](https://www.npmjs.com/package/tsconfig-paths-webpack-plugin) to support resolution of alias in tsconfig.json and nested `@` alias conflicts.
|
|
@@ -1083,8 +1089,8 @@ Used to configure enhanced-resolve in [tsconfig-paths-webpack-plugin](https://ww
|
|
|
1083
1089
|
|
|
1084
1090
|
```ts
|
|
1085
1091
|
type Tsconfig = {
|
|
1086
|
-
configFile: string
|
|
1087
|
-
references?: string[] | undefined
|
|
1092
|
+
configFile: string;
|
|
1093
|
+
references?: string[] | undefined;
|
|
1088
1094
|
};
|
|
1089
1095
|
```
|
|
1090
1096
|
|
|
@@ -1097,13 +1103,12 @@ export default defineConfig({
|
|
|
1097
1103
|
resolve: {
|
|
1098
1104
|
tsConfig: {
|
|
1099
1105
|
configFile: './tsconfig.json',
|
|
1100
|
-
}
|
|
1106
|
+
},
|
|
1101
1107
|
},
|
|
1102
1108
|
},
|
|
1103
1109
|
});
|
|
1104
1110
|
```
|
|
1105
1111
|
|
|
1106
|
-
|
|
1107
1112
|
## shims
|
|
1108
1113
|
|
|
1109
1114
|
When building CommonJS/ESM artifacts, inject some polyfill code such as `__dirname` which can only be used in CommonJS.
|
|
@@ -1299,7 +1304,7 @@ export default {
|
|
|
1299
1304
|
|
|
1300
1305
|
## style.sass.implementation
|
|
1301
1306
|
|
|
1302
|
-
Configure the implementation library used by `Sass`, the built-in version used is `1.
|
|
1307
|
+
Configure the implementation library used by `Sass`, the built-in version used is `1.54.4` if not specified.
|
|
1303
1308
|
|
|
1304
1309
|
- **Type**: `string | object`
|
|
1305
1310
|
- **Default**: `undefined`
|
|
@@ -32,7 +32,6 @@ export default defineConfig({
|
|
|
32
32
|
});
|
|
33
33
|
```
|
|
34
34
|
|
|
35
|
-
|
|
36
35
|
The `patterns.context` parameter is generally used in conjunction with `patterns.from`. By default, its value is the same as [`buildConfig.sourceDir`](/api/config/build-config#sourcedir). Therefore, we can specify the file `src/data.json` to be copied in the following way:
|
|
37
36
|
|
|
38
37
|
> By default, `buildConfig.sourceDir` is set to `src`.
|
|
@@ -69,6 +68,25 @@ export default defineConfig({
|
|
|
69
68
|
});
|
|
70
69
|
```
|
|
71
70
|
|
|
71
|
+
Or to copy `./src/**/*.json` files:
|
|
72
|
+
|
|
73
|
+
```ts
|
|
74
|
+
import path from 'path';
|
|
75
|
+
|
|
76
|
+
export default defineConfig({
|
|
77
|
+
buildConfig: {
|
|
78
|
+
copy: {
|
|
79
|
+
patterns: [
|
|
80
|
+
{
|
|
81
|
+
from: '**/*.json',
|
|
82
|
+
context: path.join(__dirname, './src'),
|
|
83
|
+
},
|
|
84
|
+
],
|
|
85
|
+
},
|
|
86
|
+
},
|
|
87
|
+
});
|
|
88
|
+
```
|
|
89
|
+
|
|
72
90
|
The `patterns.to` parameter is used to specify the output path for the copied files. By default, its value corresponds to [buildConfig.outDir](/api/config/build-config#outdir). Therefore, we can copy `src/index.html` to the `dist` directory as follows:
|
|
73
91
|
|
|
74
92
|
```ts
|
|
@@ -332,6 +332,10 @@ export default defineConfig({
|
|
|
332
332
|
});
|
|
333
333
|
```
|
|
334
334
|
|
|
335
|
+
:::tip
|
|
336
|
+
参考 [使用 Copy 工具](/guide/advance/copy) 了解 `copy` 选项的完整用法。
|
|
337
|
+
:::
|
|
338
|
+
|
|
335
339
|
## copy.patterns
|
|
336
340
|
|
|
337
341
|
- 类型: `CopyPattern[]`
|
|
@@ -883,7 +887,7 @@ export default defineConfig({
|
|
|
883
887
|
buildConfig: {
|
|
884
888
|
loader: {
|
|
885
889
|
'.js': 'jsx',
|
|
886
|
-
}
|
|
890
|
+
},
|
|
887
891
|
},
|
|
888
892
|
});
|
|
889
893
|
```
|
|
@@ -991,13 +995,17 @@ export default {
|
|
|
991
995
|
基本用法和 [alias](#alias) 一致。
|
|
992
996
|
|
|
993
997
|
[alias](#alias) 的问题在于我们在 bundleless 场景下错误的处理了 Module ID 的情况:
|
|
998
|
+
|
|
994
999
|
```js
|
|
995
|
-
import { createElement } from
|
|
1000
|
+
import { createElement } from 'react';
|
|
996
1001
|
```
|
|
1002
|
+
|
|
997
1003
|
当我们配置了 `alias: { react: 'react-native' }` 后,结果会变成
|
|
1004
|
+
|
|
998
1005
|
```js
|
|
999
|
-
import { createElement } from
|
|
1006
|
+
import { createElement } from './react-native';
|
|
1000
1007
|
```
|
|
1008
|
+
|
|
1001
1009
|
一个 Module ID 被错误的处理成了相对路径,显然这是不符合预期的。
|
|
1002
1010
|
|
|
1003
1011
|
我们想要修复这个问题,但是这可能会破坏已有的项目,因此我们在 MAJOR_VERSION.58.0 版本提供了 `resolve.alias` 来解决这个问题。
|
|
@@ -1008,6 +1016,7 @@ import { createElement } from "./react-native";
|
|
|
1008
1016
|
在下一个大版本,`resolve.alias` 将会取代 `alias` 。
|
|
1009
1017
|
|
|
1010
1018
|
:::warning
|
|
1019
|
+
|
|
1011
1020
|
- 注意此配置不要与 [alias](#alias) 混用。
|
|
1012
1021
|
- 注意此配置必须标注一个相对路径,例如 `{ "@": "./src" }` 而非 `{ "@": "src"}`。
|
|
1013
1022
|
|
|
@@ -1069,8 +1078,8 @@ export default defineConfig({
|
|
|
1069
1078
|
|
|
1070
1079
|
```ts
|
|
1071
1080
|
type Tsconfig = {
|
|
1072
|
-
configFile: string
|
|
1073
|
-
references?: string[] | undefined
|
|
1081
|
+
configFile: string;
|
|
1082
|
+
references?: string[] | undefined;
|
|
1074
1083
|
};
|
|
1075
1084
|
```
|
|
1076
1085
|
|
|
@@ -1083,13 +1092,12 @@ export default defineConfig({
|
|
|
1083
1092
|
resolve: {
|
|
1084
1093
|
tsConfig: {
|
|
1085
1094
|
configFile: './tsconfig.json',
|
|
1086
|
-
}
|
|
1095
|
+
},
|
|
1087
1096
|
},
|
|
1088
1097
|
},
|
|
1089
1098
|
});
|
|
1090
1099
|
```
|
|
1091
1100
|
|
|
1092
|
-
|
|
1093
1101
|
## shims
|
|
1094
1102
|
|
|
1095
1103
|
在构建 cjs / esm 产物时注入一些垫片代码。
|
|
@@ -1291,7 +1299,7 @@ export default defineConfig({
|
|
|
1291
1299
|
|
|
1292
1300
|
## style.sass.implementation
|
|
1293
1301
|
|
|
1294
|
-
配置 `Sass` 使用的实现库,在不指定的情况下,使用的内置版本是 `1.
|
|
1302
|
+
配置 `Sass` 使用的实现库,在不指定的情况下,使用的内置版本是 `1.54.4`。
|
|
1295
1303
|
|
|
1296
1304
|
- 类型: `string | object`
|
|
1297
1305
|
- 默认值: `undefined`
|
|
@@ -1669,6 +1677,4 @@ export default defineConfig({
|
|
|
1669
1677
|
},
|
|
1670
1678
|
},
|
|
1671
1679
|
});
|
|
1672
|
-
```
|
|
1673
|
-
import { createElement } from 'react';
|
|
1674
|
-
|
|
1680
|
+
```
|
|
@@ -68,6 +68,25 @@ export default defineConfig({
|
|
|
68
68
|
});
|
|
69
69
|
```
|
|
70
70
|
|
|
71
|
+
或是拷贝 `./src/**/*.json` 文件:
|
|
72
|
+
|
|
73
|
+
```ts
|
|
74
|
+
import path from 'path';
|
|
75
|
+
|
|
76
|
+
export default defineConfig({
|
|
77
|
+
buildConfig: {
|
|
78
|
+
copy: {
|
|
79
|
+
patterns: [
|
|
80
|
+
{
|
|
81
|
+
from: '**/*.json',
|
|
82
|
+
context: path.join(__dirname, './src'),
|
|
83
|
+
},
|
|
84
|
+
],
|
|
85
|
+
},
|
|
86
|
+
},
|
|
87
|
+
});
|
|
88
|
+
```
|
|
89
|
+
|
|
71
90
|
`patterns.to` 用于指定复制文件的输出路径,默认情况下它的值为 [`buildConfig.outDir`](/api/config/build-config#outdir)对应的值。因此我们按照如下方式将 `src/index.html` 复制到 `dist` 目录下:
|
|
72
91
|
|
|
73
92
|
```ts
|