@modern-js/module-tools-docs 2.4.1-beta.0 → 2.6.0
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/LICENSE +0 -123
- package/README.md +26 -0
- package/docs/en/api/config/build-config.md +31 -2
- package/docs/en/api/config/{build-preset.md → build-preset.mdx} +80 -0
- package/docs/en/guide/advance/external-dependency.mdx +55 -12
- package/docs/en/guide/intro/getting-started.md +6 -2
- package/docs/zh/api/config/build-config.md +32 -3
- package/docs/zh/api/config/{build-preset.md → build-preset.mdx} +79 -0
- package/docs/zh/guide/advance/external-dependency.mdx +54 -10
- package/docs/zh/guide/intro/getting-started.md +6 -2
- package/package.json +10 -8
package/LICENSE
CHANGED
|
@@ -19,126 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
|
19
19
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
20
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
21
|
SOFTWARE.
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
The code implementation modified from external library are:
|
|
25
|
-
|
|
26
|
-
- vite
|
|
27
|
-
|
|
28
|
-
MIT License
|
|
29
|
-
|
|
30
|
-
Copyright (c) 2019-present, Yuxi (Evan) You and Vite contributors
|
|
31
|
-
|
|
32
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
33
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
34
|
-
in the Software without restriction, including without limitation the rights
|
|
35
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
36
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
37
|
-
furnished to do so, subject to the following conditions:
|
|
38
|
-
|
|
39
|
-
The above copyright notice and this permission notice shall be included in all
|
|
40
|
-
copies or substantial portions of the Software.
|
|
41
|
-
|
|
42
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
43
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
44
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
45
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
46
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
47
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
48
|
-
SOFTWARE.
|
|
49
|
-
|
|
50
|
-
- wmr
|
|
51
|
-
|
|
52
|
-
MIT License
|
|
53
|
-
|
|
54
|
-
Copyright (c) 2020 The Preact Authors
|
|
55
|
-
|
|
56
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
57
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
58
|
-
in the Software without restriction, including without limitation the rights
|
|
59
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
60
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
61
|
-
furnished to do so, subject to the following conditions:
|
|
62
|
-
|
|
63
|
-
The above copyright notice and this permission notice shall be included in all
|
|
64
|
-
copies or substantial portions of the Software.
|
|
65
|
-
|
|
66
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
67
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
68
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
69
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
70
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
71
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
72
|
-
SOFTWARE.
|
|
73
|
-
|
|
74
|
-
- bundle-require
|
|
75
|
-
|
|
76
|
-
The MIT License (MIT)
|
|
77
|
-
|
|
78
|
-
Copyright © 2021 EGOIST (https://github.com/sponsors/egoist)
|
|
79
|
-
|
|
80
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
81
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
82
|
-
in the Software without restriction, including without limitation the rights
|
|
83
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
84
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
85
|
-
furnished to do so, subject to the following conditions:
|
|
86
|
-
|
|
87
|
-
The above copyright notice and this permission notice shall be included in all
|
|
88
|
-
copies or substantial portions of the Software.
|
|
89
|
-
|
|
90
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
91
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
92
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
93
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
94
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
95
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
96
|
-
SOFTWARE
|
|
97
|
-
|
|
98
|
-
- react-dev-utils
|
|
99
|
-
|
|
100
|
-
MIT License
|
|
101
|
-
|
|
102
|
-
Copyright (c) 2013-present, Facebook, Inc.
|
|
103
|
-
|
|
104
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
105
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
106
|
-
in the Software without restriction, including without limitation the rights
|
|
107
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
108
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
109
|
-
furnished to do so, subject to the following conditions:
|
|
110
|
-
|
|
111
|
-
The above copyright notice and this permission notice shall be included in all
|
|
112
|
-
copies or substantial portions of the Software.
|
|
113
|
-
|
|
114
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
115
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
116
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
117
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
118
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
119
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
120
|
-
SOFTWARE.
|
|
121
|
-
|
|
122
|
-
- jest-cli
|
|
123
|
-
|
|
124
|
-
MIT License
|
|
125
|
-
|
|
126
|
-
Copyright (c) Facebook, Inc. and its affiliates.
|
|
127
|
-
|
|
128
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
129
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
130
|
-
in the Software without restriction, including without limitation the rights
|
|
131
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
132
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
133
|
-
furnished to do so, subject to the following conditions:
|
|
134
|
-
|
|
135
|
-
The above copyright notice and this permission notice shall be included in all
|
|
136
|
-
copies or substantial portions of the Software.
|
|
137
|
-
|
|
138
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
139
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
140
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
141
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
142
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
143
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
144
|
-
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<a href="https://modernjs.dev" target="blank"><img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ylaelkeh7nuhfnuhf/modernjs-cover.png" width="300" alt="Modern.js Logo" /></a>
|
|
3
|
+
</p>
|
|
4
|
+
|
|
5
|
+
<h1 align="center">Modern.js Module Tools</h1>
|
|
6
|
+
|
|
7
|
+
<p align="center">
|
|
8
|
+
Simple, powerful, high-performance modern npm package development solution.
|
|
9
|
+
</p>
|
|
10
|
+
|
|
11
|
+
## Getting Started
|
|
12
|
+
|
|
13
|
+
Please follow [Quick Start](https://modernjs.dev/module-tools/en/guide/intro/getting-started.html) to get started with Modern.js Module Tools.
|
|
14
|
+
|
|
15
|
+
## Documentation
|
|
16
|
+
|
|
17
|
+
- [English Documentation](https://modernjs.dev/module-tools/en)
|
|
18
|
+
- [中文文档](https://modernjs.dev/module-tools/)
|
|
19
|
+
|
|
20
|
+
## Contributing
|
|
21
|
+
|
|
22
|
+
Please read the [Contributing Guide](https://github.com/modern-js-dev/modern.js/blob/main/CONTRIBUTING.md).
|
|
23
|
+
|
|
24
|
+
## License
|
|
25
|
+
|
|
26
|
+
Modern.js is [MIT licensed](https://github.com/modern-js-dev/modern.js/blob/main/LICENSE).
|
|
@@ -295,7 +295,7 @@ Module sideEffects
|
|
|
295
295
|
Normally, we configure the module's side effects via the sideEffects field in package.json, but in some cases, such as when we reference a three-party package style file
|
|
296
296
|
|
|
297
297
|
```js
|
|
298
|
-
import 'other-package/dist/index.css'
|
|
298
|
+
import 'other-package/dist/index.css';
|
|
299
299
|
```
|
|
300
300
|
|
|
301
301
|
But the package.json of this three-party package does not have the style file configured in the sideEffects
|
|
@@ -493,6 +493,35 @@ Configure whether to insert style into js in packaged mode
|
|
|
493
493
|
- type: `boolean`
|
|
494
494
|
- default: `false`
|
|
495
495
|
|
|
496
|
+
After opening inject, you will see an extra piece of style code in the js file. For example, if you write `import '. /index.scss'`,you will see the following code.
|
|
497
|
+
|
|
498
|
+
```js dist/index.js
|
|
499
|
+
// node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js
|
|
500
|
+
function styleInject(css, ref) {
|
|
501
|
+
// ...
|
|
502
|
+
}
|
|
503
|
+
var style_inject_es_default = styleInject;
|
|
504
|
+
|
|
505
|
+
// src/index.scss
|
|
506
|
+
var css_248z = '.body {\n color: black;\n}';
|
|
507
|
+
style_inject_es_default(css_248z);
|
|
508
|
+
```
|
|
509
|
+
|
|
510
|
+
:::tip {title="Note"}
|
|
511
|
+
|
|
512
|
+
With `inject` turned on, you need to pay attention to the following points.
|
|
513
|
+
|
|
514
|
+
- `@import` in the css file will not be processed. So if you have `@import` in your css file, then you need to bring in the css file manually in js (less,scss files don't need it because they will be preprocessed).
|
|
515
|
+
- The impact of `sideEffects` needs to be considered, by default our builder will consider it as a side effect, if the `sideEffects` field set in your project or in the package.json of the three-way package and it does not contain this css file, then you will get a warning
|
|
516
|
+
|
|
517
|
+
```
|
|
518
|
+
[LIBUILD:ESBUILD_WARN] Ignoring this import because "src/index.scss" was marked as having no side effects by plugin "libuild:adapter"
|
|
519
|
+
```
|
|
520
|
+
|
|
521
|
+
This can be fixed by configuring [sideEffects](#sideeffects) in this case.
|
|
522
|
+
|
|
523
|
+
:::
|
|
524
|
+
|
|
496
525
|
### autoModules
|
|
497
526
|
|
|
498
527
|
Enable CSS Modules automatically based on the filename.
|
|
@@ -620,7 +649,7 @@ At this point the umd product will go to mount on `global.myLib`
|
|
|
620
649
|
:::tip
|
|
621
650
|
|
|
622
651
|
- The module name of the umd product must not conflict with the global variable name.
|
|
623
|
-
- Module names
|
|
652
|
+
- Module names will be converted to camelCase, e.g. `my-lib` will be converted to `myLib`, refer to [toIdentifier](https://github.com/babel/babel/blob/main/packages/babel-types/src/converters/toIdentifier.ts).
|
|
624
653
|
|
|
625
654
|
:::
|
|
626
655
|
|
|
@@ -213,6 +213,7 @@ export default defineConfig({
|
|
|
213
213
|
## Function
|
|
214
214
|
|
|
215
215
|
The way the function is configured, you can get the preset value from the `preset` parameter and then modify the build configuration inside to customize your build configuration.
|
|
216
|
+
|
|
216
217
|
The following is an example of how a function can be configured to compress a build product.
|
|
217
218
|
|
|
218
219
|
```js modern.config.ts
|
|
@@ -232,3 +233,82 @@ export default defineConfig({
|
|
|
232
233
|
},
|
|
233
234
|
});
|
|
234
235
|
```
|
|
236
|
+
|
|
237
|
+
### Function Parameters
|
|
238
|
+
|
|
239
|
+
The function form of `buildPreset` contains a function parameter in the form of an object. The object contains the following fields.
|
|
240
|
+
|
|
241
|
+
* `preset`
|
|
242
|
+
* `extendPreset`
|
|
243
|
+
|
|
244
|
+
#### `preset`
|
|
245
|
+
|
|
246
|
+
Type: **Object**
|
|
247
|
+
|
|
248
|
+
Contains the build configurations corresponding to all available build presets. Build configurations can be used by means of the strings supported by `buildPreset` or by means of underscore commands for those strings. The following are examples of the use of both approaches.
|
|
249
|
+
|
|
250
|
+
<CH.Spotlight>
|
|
251
|
+
|
|
252
|
+
```ts modern.config.ts
|
|
253
|
+
import { defineConfig } from '@modern-js/module-tools';
|
|
254
|
+
|
|
255
|
+
export default defineConfig({
|
|
256
|
+
buildPreset({ preset }) {
|
|
257
|
+
return preset['npm-library'];
|
|
258
|
+
},
|
|
259
|
+
});
|
|
260
|
+
```
|
|
261
|
+
---
|
|
262
|
+
|
|
263
|
+
Use the strings supported by `buildPreset`.
|
|
264
|
+
|
|
265
|
+
```ts modern.config.ts
|
|
266
|
+
import { defineConfig } from '@modern-js/module-tools';
|
|
267
|
+
|
|
268
|
+
export default defineConfig({
|
|
269
|
+
buildPreset({ preset }) {
|
|
270
|
+
return preset['npm-library'];
|
|
271
|
+
},
|
|
272
|
+
});
|
|
273
|
+
```
|
|
274
|
+
|
|
275
|
+
---
|
|
276
|
+
|
|
277
|
+
Use the underscore naming convention for strings supported by `buildPreset`.
|
|
278
|
+
|
|
279
|
+
```ts modern.config.ts
|
|
280
|
+
import { defineConfig } from '@modern-js/module-tools';
|
|
281
|
+
|
|
282
|
+
export default defineConfig({
|
|
283
|
+
buildPreset({ preset }) {
|
|
284
|
+
return preset.NPM_LIBRARY;
|
|
285
|
+
},
|
|
286
|
+
});
|
|
287
|
+
```
|
|
288
|
+
|
|
289
|
+
</CH.Spotlight>
|
|
290
|
+
|
|
291
|
+
#### `extendPreset`
|
|
292
|
+
|
|
293
|
+
Type: `Function`
|
|
294
|
+
|
|
295
|
+
Tool function for extending a `buildPreset` to modify the build configuration corresponding to the `buildPreset`.
|
|
296
|
+
|
|
297
|
+
> The base uses something like `{...oldBuildConfig, ...extendBuildConfig}` approach to processing.
|
|
298
|
+
|
|
299
|
+
For example, adding the `define` configuration to the `'npm-library'` build preset.
|
|
300
|
+
|
|
301
|
+
```ts modern.config.ts
|
|
302
|
+
import { defineConfig } from '@modern-js/module-tools';
|
|
303
|
+
|
|
304
|
+
export default defineConfig({
|
|
305
|
+
buildPreset({ extendPreset }) {
|
|
306
|
+
return extendPreset('npm-library', {
|
|
307
|
+
define: {
|
|
308
|
+
VERSION: '1.0.1',
|
|
309
|
+
},
|
|
310
|
+
});
|
|
311
|
+
},
|
|
312
|
+
});
|
|
313
|
+
```
|
|
314
|
+
|
|
@@ -71,18 +71,9 @@ console.info(React);
|
|
|
71
71
|
|
|
72
72
|
</CH.Spotlight>
|
|
73
73
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
However there are cases where you want to package these third-party dependencies into the product. The benefits of packaging third-party dependencies into the product are: **Reducing the time spent downloading third-party dependencies**.
|
|
77
|
-
|
|
78
|
-
This way of handling third-party dependencies is generally more common in developing command-line tools, which can improve the loading speed of command-line tools and give users a better experience.
|
|
74
|
+
If you want to modify the default processing, you can use the following API.
|
|
79
75
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
The following APIs are provided in the build configuration to handle third-party dependencies:
|
|
83
|
-
|
|
84
|
-
- [`buildConfig.autoExternal`](/en/api/config/build-config#autoexternal)
|
|
85
|
-
- [`buildConfig.externals`](/en/api/config/build-config#externals)
|
|
76
|
+
- [`buildConfig.autoExternal`](/api/config/build-config#autoexternal)
|
|
86
77
|
|
|
87
78
|
### Turn off default behavior
|
|
88
79
|
|
|
@@ -110,9 +101,61 @@ export default defineConfig({
|
|
|
110
101
|
});
|
|
111
102
|
```
|
|
112
103
|
|
|
104
|
+
## Packaging third-party dependencies
|
|
105
|
+
|
|
106
|
+
However there are cases where you want to package these third-party dependencies into the product. The benefits of packaging third-party dependencies into the product are:**Less time spent downloading third-party dependencies**. This way of handling third-party dependencies is generally more common in developing command-line tools, which can improve the loading speed of command-line tools and give users a better experience.
|
|
107
|
+
|
|
108
|
+
So how do you enable the packaging of third-party dependencies in the module project?
|
|
109
|
+
|
|
110
|
+
**When we want to package certain dependencies, we generally declare them in `"devDependencies"` in package.json**. In this case, the dependencies declared in `"devDependencies"` are **allowed** to be packaged in the product during the build process.
|
|
111
|
+
|
|
112
|
+
<CH.Spotlight>
|
|
113
|
+
|
|
114
|
+
```json ./v1/package.json
|
|
115
|
+
{
|
|
116
|
+
"devDependencies": {
|
|
117
|
+
"react": "^17"
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
---
|
|
123
|
+
|
|
124
|
+
If the project needs to package `react` dependencies.
|
|
125
|
+
|
|
126
|
+
```json ./v1/package.json
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
---
|
|
130
|
+
|
|
131
|
+
When a `react` dependency is used in the source code.
|
|
132
|
+
|
|
133
|
+
```tsx src/index.ts
|
|
134
|
+
import React from 'react';
|
|
135
|
+
console.info(React);
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
---
|
|
139
|
+
|
|
140
|
+
The `react` code will be packaged into the product at this point.
|
|
141
|
+
|
|
142
|
+
```js dist/index.js
|
|
143
|
+
// ...
|
|
144
|
+
var import_react = __toESM(require_react());
|
|
145
|
+
function src_default() {
|
|
146
|
+
console.info(import_react.default);
|
|
147
|
+
}
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
</CH.Spotlight>
|
|
151
|
+
|
|
152
|
+
However, in a real build scenario, you may encounter a third-party dependency that cannot be handled, so you can use the following API to **external** them.
|
|
153
|
+
|
|
154
|
+
- [`buildConfig.externals`](/en/api/config/build-config#externals)
|
|
155
|
+
|
|
113
156
|
### Exclude specified third-party dependencies
|
|
114
157
|
|
|
115
|
-
|
|
158
|
+
We mentioned above the use of the `buildConfig.autoExternal` API, while `buildConfig.externals` can also control which third-party dependencies to handle. So we can combine these two
|
|
116
159
|
APIs to handle the project's dependencies in a more granular way.
|
|
117
160
|
|
|
118
161
|
For example, when we need to leave only certain dependencies unpacked, we can configure it as follows.
|
|
@@ -68,6 +68,10 @@ pnpm test
|
|
|
68
68
|
npx @modern-js/create your-project-dir-name
|
|
69
69
|
```
|
|
70
70
|
|
|
71
|
+
:::info
|
|
72
|
+
Execute `npx @modern-js/create -h` for more command line arguments
|
|
73
|
+
:::
|
|
74
|
+
|
|
71
75
|
Next, in the issue interaction, follow the options below.
|
|
72
76
|
|
|
73
77
|
```bash
|
|
@@ -88,5 +92,5 @@ We can start the project build directly with the `pnpm build` command, and start
|
|
|
88
92
|
Choose your tutorial scenario...
|
|
89
93
|
|
|
90
94
|
- I'm a beginner and need to learn [basic usage](/en/guide/basic/before-getting-started) of Module Tools.
|
|
91
|
-
- I have learned the basic usage of Module Tools and can learn [advanced usage](/en/guide/
|
|
92
|
-
- I
|
|
95
|
+
- I have learned the basic usage of Module Tools and can learn [advanced usage](/en/guide/advance/in-depth-about-build) of Module Tools.
|
|
96
|
+
- I need to expand my project capabilities and need to learn how to develop [plugins](/en/plugins/guide/getting-started) for Module Tools.
|
|
@@ -352,7 +352,7 @@ export default defineConfig({
|
|
|
352
352
|
通常情况下,我们通过 package.json 的 `"sideEffects"` 字段来配置模块的副作用,但是在某些情况下,例如我们引用了一个三方包的样式文件。
|
|
353
353
|
|
|
354
354
|
```js
|
|
355
|
-
import 'other-package/dist/index.css'
|
|
355
|
+
import 'other-package/dist/index.css';
|
|
356
356
|
```
|
|
357
357
|
|
|
358
358
|
但是这个三方包的 package.json 里并没有将样式文件配置到 `"sideEffects"` 里。
|
|
@@ -562,6 +562,35 @@ export default defineConfig({
|
|
|
562
562
|
- 类型: `boolean`
|
|
563
563
|
- 默认值: `false`
|
|
564
564
|
|
|
565
|
+
开启 inject 后,你会看到打包后的 js 文件中会多出一段 style 的代码。例如你在源码里写了`import './index.scss'`,那么你会看到以下代码。
|
|
566
|
+
|
|
567
|
+
```js dist/index.js
|
|
568
|
+
// node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js
|
|
569
|
+
function styleInject(css, ref) {
|
|
570
|
+
// ...
|
|
571
|
+
}
|
|
572
|
+
var style_inject_es_default = styleInject;
|
|
573
|
+
|
|
574
|
+
// src/index.scss
|
|
575
|
+
var css_248z = ".body {\n color: black;\n}";
|
|
576
|
+
style_inject_es_default(css_248z);
|
|
577
|
+
```
|
|
578
|
+
|
|
579
|
+
:::tip {title="注意"}
|
|
580
|
+
|
|
581
|
+
开启了 `inject` 后,你需要注意以下几点:
|
|
582
|
+
|
|
583
|
+
- css 文件中的 `@import` 不会被处理。因此如果你的 css 文件中有 `@import` ,那么你需要在 js 中手动引入 css 文件(less,scss 文件不需要,因为它们会有预处理)。
|
|
584
|
+
- 需要考虑 `sideEffects`的影响,默认情况下我们的构建器会认为它是有副作用的,如果你的项目中或者三方包的 package.json 设置了 `sideEffects` 字段并且没有包含此 css 文件,那么你将会得到一个警告
|
|
585
|
+
|
|
586
|
+
```
|
|
587
|
+
[LIBUILD:ESBUILD_WARN] Ignoring this import because "src/index.scss" was marked as having no side effects by plugin "libuild:adapter"
|
|
588
|
+
```
|
|
589
|
+
|
|
590
|
+
此时可以通过配置[sideEffects](#sideeffects)来解决。
|
|
591
|
+
|
|
592
|
+
:::
|
|
593
|
+
|
|
565
594
|
### autoModules
|
|
566
595
|
|
|
567
596
|
根据文件名自动启用 CSS Modules。
|
|
@@ -694,8 +723,8 @@ export default defineConfig({
|
|
|
694
723
|
|
|
695
724
|
:::tip
|
|
696
725
|
|
|
697
|
-
- 需要遵守 UMD 规范,UMD
|
|
698
|
-
-
|
|
726
|
+
- 需要遵守 UMD 规范,UMD 产物的模块名不能和全局变量名冲突。
|
|
727
|
+
- 模块名会被转换为驼峰命名,如 `my-lib` 会被转换为 `myLib`,可参考[toIdentifier](https://github.com/babel/babel/blob/main/packages/babel-types/src/converters/toIdentifier.ts)。
|
|
699
728
|
|
|
700
729
|
:::
|
|
701
730
|
|
|
@@ -232,3 +232,82 @@ export default defineConfig({
|
|
|
232
232
|
},
|
|
233
233
|
});
|
|
234
234
|
```
|
|
235
|
+
|
|
236
|
+
### 函数参数
|
|
237
|
+
|
|
238
|
+
`buildPreset` 的函数形式包含了一个对象形式的函数参数。该对象包含以下字段:
|
|
239
|
+
|
|
240
|
+
* `preset`
|
|
241
|
+
* `extendPreset`
|
|
242
|
+
|
|
243
|
+
#### `preset`
|
|
244
|
+
|
|
245
|
+
类型:**Object**
|
|
246
|
+
|
|
247
|
+
包含了所有可用的构建预设对应的构建配置。可以通过 `buildPreset` 所支持的字符串来使用构建配置,也可以使用这些字符串的下划线命令的方式。下面是两种方式的使用示例:
|
|
248
|
+
|
|
249
|
+
|
|
250
|
+
<CH.Spotlight>
|
|
251
|
+
|
|
252
|
+
```ts modern.config.ts
|
|
253
|
+
import { defineConfig } from '@modern-js/module-tools';
|
|
254
|
+
|
|
255
|
+
export default defineConfig({
|
|
256
|
+
buildPreset({ preset }) {
|
|
257
|
+
return preset['npm-library'];
|
|
258
|
+
},
|
|
259
|
+
});
|
|
260
|
+
```
|
|
261
|
+
---
|
|
262
|
+
|
|
263
|
+
使用 `buildPreset` 所支持的字符串。
|
|
264
|
+
|
|
265
|
+
```ts modern.config.ts
|
|
266
|
+
import { defineConfig } from '@modern-js/module-tools';
|
|
267
|
+
|
|
268
|
+
export default defineConfig({
|
|
269
|
+
buildPreset({ preset }) {
|
|
270
|
+
return preset['npm-library'];
|
|
271
|
+
},
|
|
272
|
+
});
|
|
273
|
+
```
|
|
274
|
+
|
|
275
|
+
---
|
|
276
|
+
|
|
277
|
+
使用 `buildPreset` 所支持的字符串的下划线命名方式。
|
|
278
|
+
|
|
279
|
+
```ts modern.config.ts
|
|
280
|
+
import { defineConfig } from '@modern-js/module-tools';
|
|
281
|
+
|
|
282
|
+
export default defineConfig({
|
|
283
|
+
buildPreset({ preset }) {
|
|
284
|
+
return preset.NPM_LIBRARY;
|
|
285
|
+
},
|
|
286
|
+
});
|
|
287
|
+
```
|
|
288
|
+
|
|
289
|
+
</CH.Spotlight>
|
|
290
|
+
|
|
291
|
+
#### `extendPreset`
|
|
292
|
+
|
|
293
|
+
类型:`Function`
|
|
294
|
+
|
|
295
|
+
用于扩展某个 `buildPreset` 的工具函数,可以修改 `buildPreset` 对应的构建配置。
|
|
296
|
+
|
|
297
|
+
> 底层使用类似 `{...oldBuildConfig, ...extendBuildConfig}` 方式进行处理。
|
|
298
|
+
|
|
299
|
+
例如在 `'npm-library'` 构建预设的基础上增加 `define` 配置:
|
|
300
|
+
|
|
301
|
+
```ts modern.config.ts
|
|
302
|
+
import { defineConfig } from '@modern-js/module-tools';
|
|
303
|
+
|
|
304
|
+
export default defineConfig({
|
|
305
|
+
buildPreset({ extendPreset }) {
|
|
306
|
+
return extendPreset('npm-library', {
|
|
307
|
+
define: {
|
|
308
|
+
VERSION: '1.0.1',
|
|
309
|
+
},
|
|
310
|
+
});
|
|
311
|
+
},
|
|
312
|
+
});
|
|
313
|
+
```
|
|
@@ -71,18 +71,10 @@ console.info(React);
|
|
|
71
71
|
|
|
72
72
|
</CH.Spotlight>
|
|
73
73
|
|
|
74
|
-
## 打包第三方依赖
|
|
75
|
-
|
|
76
|
-
不过也有一些情况希望将这些第三方依赖打包到产物。将第三方依赖打包到产物的好处是:**减少下载第三方依赖所花费的时间**。
|
|
77
|
-
|
|
78
|
-
这种处理第三方依赖的方式一般在开发命令行工具中比较常见,这可以提升命令行工具的加载速度,给使用者带来更好的使用体验。
|
|
79
74
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
在构建配置中提供了以下 API 来处理第三方依赖:
|
|
75
|
+
如果想要修改默认的处理方式,可以通过下面的 API 进行修改:
|
|
83
76
|
|
|
84
77
|
- [`buildConfig.autoExternal`](/api/config/build-config#autoexternal)
|
|
85
|
-
- [`buildConfig.externals`](/api/config/build-config#externals)
|
|
86
78
|
|
|
87
79
|
### 关闭默认行为
|
|
88
80
|
|
|
@@ -110,9 +102,61 @@ export default defineConfig({
|
|
|
110
102
|
});
|
|
111
103
|
```
|
|
112
104
|
|
|
105
|
+
## 打包第三方依赖
|
|
106
|
+
|
|
107
|
+
不过也有一些情况希望将这些第三方依赖打包到产物。将第三方依赖打包到产物的好处是:**减少下载第三方依赖所花费的时间**。这种处理第三方依赖的方式一般在开发命令行工具中比较常见,这可以提升命令行工具的加载速度,给使用者带来更好的使用体验。
|
|
108
|
+
|
|
109
|
+
那么如何在模块工程中开启对于第三方依赖的打包处理呢?
|
|
110
|
+
|
|
111
|
+
**当希望打包某些依赖的时候,一般来说会将这些依赖声明在 package.json 的 `"devDependencies"` 中**。此时在构建过程中,会**允许**声明在 `"devDependencies"` 中的依赖打包到产物中。
|
|
112
|
+
|
|
113
|
+
<CH.Spotlight>
|
|
114
|
+
|
|
115
|
+
```json ./v1/package.json
|
|
116
|
+
{
|
|
117
|
+
"devDependencies": {
|
|
118
|
+
"react": "^17"
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
---
|
|
124
|
+
|
|
125
|
+
如果项目需要打包 `react` 依赖。
|
|
126
|
+
|
|
127
|
+
```json ./v1/package.json
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
---
|
|
131
|
+
|
|
132
|
+
当源码中使用了 `react` 依赖。
|
|
133
|
+
|
|
134
|
+
```tsx src/index.ts
|
|
135
|
+
import React from 'react';
|
|
136
|
+
console.info(React);
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
---
|
|
140
|
+
|
|
141
|
+
此时产物中会将 `react` 代码打包到产物中。
|
|
142
|
+
|
|
143
|
+
```js dist/index.js
|
|
144
|
+
// ...
|
|
145
|
+
var import_react = __toESM(require_react());
|
|
146
|
+
function src_default() {
|
|
147
|
+
console.info(import_react.default);
|
|
148
|
+
}
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
</CH.Spotlight>
|
|
152
|
+
|
|
153
|
+
不过在实际的开发场景中,可能会遇到某个第三方依赖无法处理的情况,此时可以使用以下 API 对它们进行 **external** 处理。
|
|
154
|
+
|
|
155
|
+
- [`buildConfig.externals`](/api/config/build-config#externals)
|
|
156
|
+
|
|
113
157
|
### 排除指定第三方依赖
|
|
114
158
|
|
|
115
|
-
|
|
159
|
+
在上面我们提到了 `buildConfig.autoExternal` API 的用途,同时 `buildConfig.externals` 也可以控制哪些第三方依赖要进行处理。因此我们可以组合这两个
|
|
116
160
|
API 对项目的依赖进行更细微的处理。
|
|
117
161
|
|
|
118
162
|
例如当我们需要仅对某些依赖不进行打包处理的时候,可以按照如下方式进行配置:
|
|
@@ -66,6 +66,10 @@ pnpm test
|
|
|
66
66
|
npx @modern-js/create your-project-dir-name
|
|
67
67
|
```
|
|
68
68
|
|
|
69
|
+
:::info
|
|
70
|
+
执行 `npx @modern-js/create -h` 查看更多命令行参数
|
|
71
|
+
:::
|
|
72
|
+
|
|
69
73
|
接着在问题交互中,按照如下选择:
|
|
70
74
|
|
|
71
75
|
```bash
|
|
@@ -86,5 +90,5 @@ npx @modern-js/create your-project-dir-name
|
|
|
86
90
|
选择适合你的教程:
|
|
87
91
|
|
|
88
92
|
- 我是初学者,需要学习 Module Tools 的[基础使用](/guide/basic/before-getting-started)。
|
|
89
|
-
- 我已经初步掌握了 Module Tools 的使用,可以学习 Module Tools 的[
|
|
90
|
-
-
|
|
93
|
+
- 我已经初步掌握了 Module Tools 的使用,可以学习 Module Tools 的[进阶指南](/guide/advance/in-depth-about-build)。
|
|
94
|
+
- 我需要扩展项目能力,需要学习如何开发 Module Tools 的[插件](/plugins/guide/getting-started)。
|
package/package.json
CHANGED
|
@@ -1,21 +1,23 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@modern-js/module-tools-docs",
|
|
3
|
-
"
|
|
4
|
-
"
|
|
3
|
+
"description": "Shared documentation of Modern.js Module Tools",
|
|
4
|
+
"homepage": "https://modernjs.dev/module-tools",
|
|
5
|
+
"bugs": "https://github.com/modern-js-dev/modern.js/issues",
|
|
6
|
+
"repository": "modern-js-dev/modern.js",
|
|
7
|
+
"license": "MIT",
|
|
8
|
+
"version": "2.6.0",
|
|
5
9
|
"main": "index.js",
|
|
6
|
-
"keywords": [],
|
|
7
|
-
"author": "",
|
|
8
|
-
"license": "ISC",
|
|
9
10
|
"dependencies": {
|
|
10
11
|
"@code-hike/mdx": "^0.7.4",
|
|
11
12
|
"react": "^18.2.0",
|
|
12
13
|
"react-dom": "^18.2.0",
|
|
13
14
|
"shiki": "^0.11.1",
|
|
14
|
-
"@modern-js/doc-plugin-auto-sidebar": "2.
|
|
15
|
-
"@modern-js/doc-tools": "2.
|
|
15
|
+
"@modern-js/doc-plugin-auto-sidebar": "2.6.0",
|
|
16
|
+
"@modern-js/doc-tools": "2.6.0"
|
|
16
17
|
},
|
|
17
18
|
"scripts": {
|
|
18
19
|
"dev": "modern dev",
|
|
19
|
-
"build:doc": "modern build"
|
|
20
|
+
"build:doc": "modern build",
|
|
21
|
+
"preview": "modern preview"
|
|
20
22
|
}
|
|
21
23
|
}
|