arui-scripts 17.3.0 → 18.0.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/.turbo/turbo-lint.log +9 -11
- package/.turbo/turbo-test.log +5 -5
- package/CHANGELOG.md +16 -0
- package/build/configs/app-configs/calculate-dependent-config.d.ts +2 -2
- package/build/configs/app-configs/types.d.ts +5 -2
- package/build/configs/client-env-config/add-env-to-html-template.d.ts +1 -0
- package/build/configs/client-env-config/add-env-to-html-template.js +8 -0
- package/build/configs/client-env-config/client-config-plugin.d.ts +5 -0
- package/build/configs/client-env-config/client-config-plugin.js +26 -0
- package/build/configs/client-env-config/constants.d.ts +1 -0
- package/build/configs/client-env-config/constants.js +4 -0
- package/build/configs/client-env-config/get-env-config.d.ts +2 -0
- package/build/configs/client-env-config/get-env-config.js +29 -0
- package/build/configs/client-env-config/index.d.ts +3 -0
- package/build/configs/client-env-config/index.js +9 -0
- package/build/configs/dev-server.js +4 -2
- package/build/configs/modules.js +14 -6
- package/build/configs/webpack.client.js +5 -1
- package/build/templates/dockerfile.template.js +1 -1
- package/build/templates/html.template.d.ts +1 -1
- package/build/templates/html.template.js +3 -0
- package/build/templates/start.template.js +37 -3
- package/build/tsconfig-local.tsbuildinfo +1 -1
- package/docs/client-only.md +68 -2
- package/docs/modules.md +25 -3
- package/package.json +1 -1
package/docs/client-only.md
CHANGED
|
@@ -4,8 +4,74 @@
|
|
|
4
4
|
Он полностью отключает сборку сервера, добавляет [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/) для генерации
|
|
5
5
|
простой html, а так же значительно упрощает докер-контейнер, собираемый в качестве артефакта.
|
|
6
6
|
|
|
7
|
-
По-умолчанию html, создаваемый скриптами будет иметь
|
|
8
|
-
используя [механизм оверрайдов](./overrides.md).
|
|
7
|
+
По-умолчанию html, создаваемый скриптами будет иметь div с id `react-app`, подключенные скрипты, а так же специальный тег `<script>` для работы с конфигурацией.
|
|
8
|
+
Вы можете модифицировать этот html используя [механизм оверрайдов](./overrides.md).
|
|
9
9
|
|
|
10
10
|
docker-контейнер, формируемый командой [arui-scripts docker-build](./commands.md#docker-build) будет содержать
|
|
11
11
|
только собранные файлы. node_modules, все что лежит в вашем `src` и других папках проекта будет игнорироваться.
|
|
12
|
+
|
|
13
|
+
### Работа с конфигурацией
|
|
14
|
+
Поскольку в client-only режиме нет никакого сервера - возникает вопрос как получать хоть какую то конфигурацию, которая
|
|
15
|
+
будет различаться для разных сред.
|
|
16
|
+
|
|
17
|
+
Для этого для client-only режима arui-scripts предоставляет механизм env-config.
|
|
18
|
+
|
|
19
|
+
**Помните - такая конфигурация будет доступна любому пользователю - она не должна содержать приватных данных и секретных ключей.**
|
|
20
|
+
|
|
21
|
+
Он позволяет вам создать json-шаблон, который будет наполняться данными из env-переменных.
|
|
22
|
+
|
|
23
|
+
В качестве шаблона используется файл `env-config.json` из root папки вашего проекта. Все вхождения `${NAME}` в нем
|
|
24
|
+
будут заменены на значения из env-переменных, а сам файл станет доступен по адресу `/env-config.json`.
|
|
25
|
+
|
|
26
|
+
Этот же шаблон будет встроен в `index.html` проекта на место, помеченное как `<%= envConfig %>`. В шаблоне для html
|
|
27
|
+
по-умолчанию он добавляется в тег `<script id="env-settings" type="application/json">`.
|
|
28
|
+
Таким образом вы можете получить те же настройки без дополнительных запросов: `JSON.parse(document.getElementById('env-settings').innerText)`.
|
|
29
|
+
|
|
30
|
+
В дев-режиме env переменные берутся из того окружения, в котором запущен dev-server.
|
|
31
|
+
Собранное приложение будет получать настройки только при запуске докер-контейнера - скрипт `start.sh` обработает все шаблоны таким же образом, как и dev-сервер.
|
|
32
|
+
|
|
33
|
+
**Пример:**
|
|
34
|
+
|
|
35
|
+
Содержимое `/env-config.json` вашего проекта:
|
|
36
|
+
```json
|
|
37
|
+
{
|
|
38
|
+
"backendUrl": "${BACKEND_URL}",
|
|
39
|
+
"staticData": "something very important",
|
|
40
|
+
"unknownEnv": "${UNKNOWN_ENV}"
|
|
41
|
+
}
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
Пример запуска в dev-режиме:
|
|
45
|
+
```shell
|
|
46
|
+
BACKEND_URL=http://example.com yarn arui-scripts start
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
Пример запуска собранного docker-контейнера:
|
|
50
|
+
```shell
|
|
51
|
+
docker run --env BACKEND_URL=http://example.com -p 8080:8080 example:1.1.42 /src/start.sh
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
В обоих случаях по адресу http://localhost:8080/env-config.json будет такое содержимое:
|
|
55
|
+
```json
|
|
56
|
+
{
|
|
57
|
+
"backendUrl": "http://example.com",
|
|
58
|
+
"staticData": "something very important",
|
|
59
|
+
"unknownEnv": ""
|
|
60
|
+
}
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
С дефолтным html-шаблоном index.html будет выглядеть так:
|
|
64
|
+
```html
|
|
65
|
+
<!doctype html>
|
|
66
|
+
<html lang="ru">
|
|
67
|
+
<div id="react-app"></div>
|
|
68
|
+
<script id="env-settings" type="application/json">
|
|
69
|
+
{
|
|
70
|
+
"backendUrl": "http://example.com",
|
|
71
|
+
"staticData": "something very important",
|
|
72
|
+
"unknownEnv": ""
|
|
73
|
+
}
|
|
74
|
+
</script>
|
|
75
|
+
</body>
|
|
76
|
+
</html>
|
|
77
|
+
```
|
package/docs/modules.md
CHANGED
|
@@ -338,10 +338,10 @@ export const MyAwesomeComponent = () => {
|
|
|
338
338
|
трудоемкой задачей, особенно если у вас уже есть большая кодовая база.
|
|
339
339
|
|
|
340
340
|
arui-scripts предоставляет два решения для этой проблемы:
|
|
341
|
-
-
|
|
341
|
+
- _css-prefix_
|
|
342
342
|
- использование shadow dom
|
|
343
343
|
|
|
344
|
-
##
|
|
344
|
+
## css-prefix
|
|
345
345
|
|
|
346
346
|
Суть метода заключается в том, что ко всем стилям модуля будет добавляться префикс, который позволит изолировать
|
|
347
347
|
стили модуля от стилей приложения-потребителя.
|
|
@@ -354,7 +354,7 @@ arui-scripts предоставляет два решения для этой п
|
|
|
354
354
|
1. Изменить конфигурацию модуля в `arui-scripts.config.ts`:
|
|
355
355
|
|
|
356
356
|
```ts
|
|
357
|
-
// ./arui-scripts.config.ts
|
|
357
|
+
// ./arui-scripts.config.ts compatModules
|
|
358
358
|
import type { PackageSettings } from 'arui-scripts';
|
|
359
359
|
|
|
360
360
|
const aruiScriptsConfig: PackageSettings = {
|
|
@@ -384,6 +384,28 @@ const aruiScriptsConfig: PackageSettings = {
|
|
|
384
384
|
export default aruiScriptsConfig;
|
|
385
385
|
```
|
|
386
386
|
|
|
387
|
+
```ts
|
|
388
|
+
// ./arui-scripts.config.ts module federation
|
|
389
|
+
import type { PackageSettings } from 'arui-scripts';
|
|
390
|
+
|
|
391
|
+
const aruiScriptsConfig: PackageSettings = {
|
|
392
|
+
modules: {
|
|
393
|
+
shared: {
|
|
394
|
+
'react': '^17.0.0',
|
|
395
|
+
'react-dom': '^17.0.0',
|
|
396
|
+
},
|
|
397
|
+
exposes: {
|
|
398
|
+
'Module': './src/modules/module/index',
|
|
399
|
+
},
|
|
400
|
+
options: {
|
|
401
|
+
cssPrefix: '.my-module'
|
|
402
|
+
}
|
|
403
|
+
}
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
export default aruiScriptsConfig;
|
|
407
|
+
```
|
|
408
|
+
|
|
387
409
|
2. Изменить входную точку модуля:
|
|
388
410
|
|
|
389
411
|
```tsx
|