arui-scripts 15.6.0 → 15.6.1
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-test.log +24 -24
- package/CHANGELOG.md +8 -0
- package/README.md +11 -687
- package/build/configs/app-configs/update-with-config-file.js +2 -1
- package/build/configs/app-configs/update-with-env.js +5 -1
- package/build/configs/app-configs/update-with-package.js +5 -1
- package/build/configs/app-configs/update-with-presets.js +5 -1
- package/build/tsconfig-local.tsbuildinfo +1 -1
- package/docs/artifact.md +58 -0
- package/docs/caveats.md +30 -0
- package/docs/commands.md +123 -0
- package/docs/compilers.md +18 -0
- package/docs/examples.md +100 -0
- package/docs/overrides.md +122 -0
- package/docs/presets.md +65 -0
- package/docs/settings.md +240 -0
- package/package.json +1 -1
package/docs/settings.md
ADDED
|
@@ -0,0 +1,240 @@
|
|
|
1
|
+
Настройка arui-scripts
|
|
2
|
+
===
|
|
3
|
+
|
|
4
|
+
`arui-scripts` - гибкий инструмент, и зачастую вам необходимо настроить его под свои нужды.
|
|
5
|
+
|
|
6
|
+
Для этого предусмотрено несколько механизмов:
|
|
7
|
+
|
|
8
|
+
1. [Пресеты](presets.md)
|
|
9
|
+
2. Настройки в `package.json` (см. раздел [настройка через package.json](#настройка-через-packagejson))
|
|
10
|
+
3. [Конфигурационный файл](#Конфигурационный-файл)
|
|
11
|
+
4. [Переменные окружения](#переменные-окружения)
|
|
12
|
+
|
|
13
|
+
Если вы задаете одну и ту же настройку в разных местах, то она будет применена именно в том порядке, в котором они перечислены выше.
|
|
14
|
+
|
|
15
|
+
Предпочтительным способом настройки является использование конфигурационного файла.
|
|
16
|
+
|
|
17
|
+
## Механизмы настройки
|
|
18
|
+
|
|
19
|
+
### Настройка через package.json
|
|
20
|
+
Пример настройки через package.json:
|
|
21
|
+
```json
|
|
22
|
+
{
|
|
23
|
+
"aruiScripts": {
|
|
24
|
+
"clientEntry": {
|
|
25
|
+
"mobile": "./src/mobile",
|
|
26
|
+
"desktop": "./src/desktop"
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### Конфигурационный файл
|
|
33
|
+
Пример конфигурационного файла:
|
|
34
|
+
|
|
35
|
+
```ts
|
|
36
|
+
import { PackageSettings } from 'arui-scripts';
|
|
37
|
+
|
|
38
|
+
const settings: PackageSettings = {
|
|
39
|
+
clientEntry: {
|
|
40
|
+
mobile: './src/mobile',
|
|
41
|
+
desktop: './src/desktop',
|
|
42
|
+
},
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
export default settings;
|
|
46
|
+
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### Переменные окружения
|
|
50
|
+
Использование переменных окружения для настройки может быть полезным для отладки или использования в специфических сценариях на CI.
|
|
51
|
+
|
|
52
|
+
Пример настройки через переменные окружения:
|
|
53
|
+
```bash
|
|
54
|
+
ARUI_SCRIPTS_CONFIG="{\"clientEntry\":{\"mobile\":\"./src/mobile\",\"desktop\":\"./src/desktop\"}}" yarn start
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
## Список настроек
|
|
58
|
+
|
|
59
|
+
### Общие настройки
|
|
60
|
+
#### clientServerPort
|
|
61
|
+
Порт WebpackDevServer и nginx итогового контейнера. По умолчанию `8080`.
|
|
62
|
+
|
|
63
|
+
#### serverPort
|
|
64
|
+
Порт нодового сервера. Нужен для правильного проксирования запросов от дев сервера и nginx. По умолчанию `3000`.
|
|
65
|
+
|
|
66
|
+
#### debug
|
|
67
|
+
Режим отладки, в котором не выполняются некоторые нежелательные операции и выводится больше сообщений об ошибках, по умолчанию `false`.
|
|
68
|
+
|
|
69
|
+
#### devSourceMaps
|
|
70
|
+
Какой вид source-map использовать в режиме разработки. По умолчанию `eval`. Эта настройка может сильно влиять на время сборки.
|
|
71
|
+
Подробнее можно почитать [здесь](https://webpack.js.org/configuration/devtool/).
|
|
72
|
+
|
|
73
|
+
:warning: **Внимание**. При использовании любых source-map на основании eval webpack-dev-server будет
|
|
74
|
+
модифицировать заголовок `Content-Security-Policy` (при наличии) и добавлять в разрешенные источники для `script-src` `unsafe-eval`.
|
|
75
|
+
|
|
76
|
+
Это необходимо для того, чтобы код вообще запускался в браузере. Это не влияет на реальную безопасность приложения,
|
|
77
|
+
так как используется ТОЛЬКО в дев-режиме. Если по каким-то причинам вас такое поведение не устраивает - вы можете поменять
|
|
78
|
+
тип source-map на любой другой, не использующий eval.
|
|
79
|
+
|
|
80
|
+
#### devServerCors
|
|
81
|
+
Включает добавление CORS заголовков в ответы dev-сервера. По умолчанию `false`.
|
|
82
|
+
|
|
83
|
+
#### useServerHMR
|
|
84
|
+
Использовать ли HotModuleReplacement для сервера. По умолчанию `false`.
|
|
85
|
+
|
|
86
|
+
#### presets
|
|
87
|
+
Пресеты, которые будут использоваться для настройки сборки. См. [пресеты](presets.md).
|
|
88
|
+
|
|
89
|
+
#### proxy
|
|
90
|
+
Позволяет настроить проксирование запросов в dev-режиме. По умолчанию `null`. Так же этот параметр можно задать в `package.json`.
|
|
91
|
+
|
|
92
|
+
В случае, если ваш фронт должен обращаться к API, отличному от вашего nodejs сервера, в **дев режиме** вы можете настроить проксирование запросов.
|
|
93
|
+
|
|
94
|
+
Например:
|
|
95
|
+
|
|
96
|
+
```ts
|
|
97
|
+
import { PackageSettings } from 'arui-scripts';
|
|
98
|
+
|
|
99
|
+
const settings: PackageSettings = {
|
|
100
|
+
proxy: {
|
|
101
|
+
'/corp-shared-ui': {
|
|
102
|
+
target: 'http://some-other-host',
|
|
103
|
+
headers: {
|
|
104
|
+
host: 'some-other-host',
|
|
105
|
+
},
|
|
106
|
+
},
|
|
107
|
+
}
|
|
108
|
+
};
|
|
109
|
+
|
|
110
|
+
export default settings;
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
Такая конфигурация будет проксировать запросы к `http://localhost:8080/corp-shared-ui/` на `http://some-other-host/corp-shared-ui`.
|
|
114
|
+
Подробнее о конфигурации прокси сервера можно почитать в [документации Webpack](https://webpack.js.org/configuration/dev-server/#devserver-proxy).
|
|
115
|
+
|
|
116
|
+
:warning: Эта настройка работает только в **дев режиме**.
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
### Настройки путей
|
|
120
|
+
|
|
121
|
+
#### buildPath
|
|
122
|
+
Папка, в которую будет производиться сборка. По умолчанию `.build`
|
|
123
|
+
|
|
124
|
+
#### assetsPath
|
|
125
|
+
Папка, в которую будут попадать статические файлы. По умолчанию `assets`.
|
|
126
|
+
|
|
127
|
+
#### additionalBuildPath
|
|
128
|
+
Массив путей, которые попадут в архив при использовании [команды archive-build](./commands.md#archive-build). По умолчанию `['config']`.
|
|
129
|
+
|
|
130
|
+
#### statsOutputFilename
|
|
131
|
+
Имя [stats-файла](https://webpack.js.org/api/stats/), которое будет использоваться в [bundle-analyze команде](./commands.md#bundle-analyze). По умолчанию `stats.json`
|
|
132
|
+
|
|
133
|
+
#### serverEntry
|
|
134
|
+
Точка входа для исходников сервера, по умолчанию `./src/server/index`
|
|
135
|
+
|
|
136
|
+
#### serverOutput
|
|
137
|
+
Имя файла для компиляции сервера, по умолчанию `server.js`
|
|
138
|
+
|
|
139
|
+
#### clientPolyfillsEntry
|
|
140
|
+
Точка входа для полифилов. Будет подключаться до основной точки входа. По умолчанию подтягивает полифилы из arui-feather, если он установлен.
|
|
141
|
+
|
|
142
|
+
#### clientEntry
|
|
143
|
+
Точка входа для клиентского приложения. По умолчанию `./src/index`.
|
|
144
|
+
|
|
145
|
+
Этот ключ принимает не только строки, но и любые возможные в [webpack варианты](https://webpack.js.org/concepts/entry-points/).
|
|
146
|
+
Например, вы можете создать две отдельных входных точки для мобильной и десктопной версии приложения:
|
|
147
|
+
|
|
148
|
+
```js
|
|
149
|
+
const settings = {
|
|
150
|
+
clientEntry: {
|
|
151
|
+
mobile: './src/mobile',
|
|
152
|
+
desktop: './src/desktop',
|
|
153
|
+
},
|
|
154
|
+
};
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
Ко всем клиентским entryPoint так же будут добавлены `clientPolyfillsEntry` (если задан)
|
|
158
|
+
и, в dev режиме, необходимые для hot-module-reload файлы
|
|
159
|
+
|
|
160
|
+
|
|
161
|
+
### Настройки сборки артефактов
|
|
162
|
+
|
|
163
|
+
#### dockerRegistry
|
|
164
|
+
Адрес используемого docker registry, по умолчанию `''`, то есть используется публичный registry
|
|
165
|
+
|
|
166
|
+
#### baseDockerImage
|
|
167
|
+
Имя базового образа, используемого для построения docker образа. По умолчанию `'alfabankui/arui-scripts:latest'`
|
|
168
|
+
|
|
169
|
+
#### nginxRootPath
|
|
170
|
+
Базовый путь, до файлов в контейнере, который будет использоваться в nginx. По умолчанию `'/src'`.
|
|
171
|
+
|
|
172
|
+
#### runFromNonRootUser
|
|
173
|
+
Сборка образа под пользователем nginx. Нужна для совместимости с k8s, т.к там зачастую запрещен запуск контейнера из под root По умолчанию `true`.
|
|
174
|
+
|
|
175
|
+
#### removeDevDependenciesDuringDockerBuild
|
|
176
|
+
Отключает удаление devDependencies из node_modules при сборке докер образа. Используется когда вам не нужно удалять devDependencies,
|
|
177
|
+
т.к. в своём Dockerfile вы не переносите node_modules в докер-контейнер. По умолчанию `true`.
|
|
178
|
+
|
|
179
|
+
#### archiveName
|
|
180
|
+
Имя архива, который будет создан при использовании команды [archive-build](./commands.md#archive-build). По умолчанию `'build.tar'`.
|
|
181
|
+
|
|
182
|
+
### Модификация сборки
|
|
183
|
+
#### keepPropTypes
|
|
184
|
+
Позволяет отключить удаление `prop-types` из бандла. По умолчанию `false`.
|
|
185
|
+
|
|
186
|
+
Так как в production режими proptypes не проверяются, их имеет смысл удалить из production сборки.
|
|
187
|
+
|
|
188
|
+
Сами объявления proptypes удаляются с помощью [babel-plugin-transform-react-remove-prop-types](https://www.npmjs.com/package/babel-plugin-transform-react-remove-prop-types).
|
|
189
|
+
Но импорты пакетов `prop-types` при этом не удаляются. Чтобы это реализовать, используется `webpack.NormalModuleReplacementPlugin`.
|
|
190
|
+
С помощью него заменяются на пустышку пакеты, попадающие под маску:
|
|
191
|
+
|
|
192
|
+
- `/^react-style-proptype$/`
|
|
193
|
+
- `/^thrift-services\/proptypes/`
|
|
194
|
+
|
|
195
|
+
#### useTscLoader
|
|
196
|
+
Использовать ts-loader вместо babel-loader для обработки ts файлов. У babel-loader есть [ряд ограничений](https://devblogs.microsoft.com/typescript/typescript-and-babel-7/). По умолчанию `false`.
|
|
197
|
+
|
|
198
|
+
#### webpack4Compatibility
|
|
199
|
+
Включить ли режим совместимости с webpack 4. По умолчанию `false`. Подробнее можно почитать в этом [issue](https://github.com/webpack/webpack/issues/14580).
|
|
200
|
+
|
|
201
|
+
#### installServerSourceMaps
|
|
202
|
+
Добавлять ли в серверную сборку пакет source-map-support. По умолчанию `false`.
|
|
203
|
+
|
|
204
|
+
|
|
205
|
+
### Обработка изображений
|
|
206
|
+
#### dataUrlMaxSize
|
|
207
|
+
Ресурсы, не превышающие данный размер (в байтах), будут включены в исходники `inline`, иначе вынесены в отдельный файл. По умолчанию `1536`.
|
|
208
|
+
|
|
209
|
+
#### imageMinimizer
|
|
210
|
+
Раздел настроек, связанных с оптимизацией графики.
|
|
211
|
+
|
|
212
|
+
:warning: **Внимание!** Если вы планируете использовать любые `imagemin`-плагины, кроме `svgo`, необходимо установить их дополнительно. <br/>
|
|
213
|
+
Так как после установки плагинам необходим прямой доступ в сеть для скачивания утилит (`cjpeg` и пр.), они указаны в `peerDependencies` `arui-scripts`, чтобы не приводить к ошибкам в закрытых контурах.<br/><br/>
|
|
214
|
+
|
|
215
|
+
- `imageMinimizer.svg.enabled` - включает/отключает оптимизацию `svg`. По умолчанию `true`.
|
|
216
|
+
- `imageMinimizer.gif.enabled` - включает/отключает оптимизацию `gif`. По умолчанию `false`.
|
|
217
|
+
- `imageMinimizer.gif.optimizationLevel` - уровень сжатия `gif`. От `1` до `3`. По умолчанию `1`.
|
|
218
|
+
- `imageMinimizer.jpg.enabled` - включает/отключает оптимизацию `jpg`. По умолчанию `false`.
|
|
219
|
+
- `imageMinimizer.jpg.quality` - качество выходного файла. От `0` до `100`. По умолчанию `75`.
|
|
220
|
+
- `imageMinimizer.png.enabled` - включает/отключает оптимизацию `png`. По умолчанию `false`. О структуре формата png и влиянии описанных далее оптимизаций можно прочитать [здесь](https://www.w3.org/TR/PNG-Chunks.html)
|
|
221
|
+
- `imageMinimizer.png.optimizationLevel` - уровень сжатия `png`. От `0` до `7`. По умолчанию `3`. [Подробнее](https://github.com/imagemin/imagemin-optipng#optimizationlevel)
|
|
222
|
+
- `imageMinimizer.png.bitDepthReduction` - допускает уменьшение глубины цвета изображения. По умолчанию `false`. [Подробнее](https://github.com/imagemin/imagemin-optipng#bitdepthreduction)
|
|
223
|
+
- `imageMinimizer.png.colorTypeReduction` - допускает изменение представления изображения (оттенки серого / прозрачность / пр.). По умолчанию `false`. [Подробнее](https://github.com/imagemin/imagemin-optipng#colortypereduction)
|
|
224
|
+
- `imageMinimizer.png.paletteReduction` - допускает уменьшение палитры изображения. По умолчанию `false`. [Подробнее](https://github.com/imagemin/imagemin-optipng#palettereduction)
|
|
225
|
+
- `imageMinimizer.png.interlaced` - потоковый порядок передачи изображение. По умолчанию этот параметр идентичен значению из входного изображения. [Подробнее](https://github.com/imagemin/imagemin-optipng#interlaced)
|
|
226
|
+
|
|
227
|
+
### Обработка стилей
|
|
228
|
+
#### componentsTheme
|
|
229
|
+
Путь к css файлу с темой для [core-components](https://github.com/core-ds/core-components). По умолчанию `null`.
|
|
230
|
+
|
|
231
|
+
#### keepCssVars
|
|
232
|
+
Отключает postcss-custom-properties, css переменные будут оставаться в бандле. По умолчанию `false`.
|
|
233
|
+
|
|
234
|
+
### Модули
|
|
235
|
+
|
|
236
|
+
#### modules
|
|
237
|
+
Позволяет настроить работу с модулями. По умолчанию `{}`. Подробнее в разделе [модули](modules.md).
|
|
238
|
+
|
|
239
|
+
#### compatModules
|
|
240
|
+
Позволяет настроить работу с `compat` модулями. По умолчанию `{}`. Подробнее в разделе [модули](modules.md).
|