Π‘Π΄Π΅Π»Π°Π½ΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠΌ @denpiligrim
Π tsconfig.json ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ:
{
"compilerOptions": {
"module": "CommonJS"
}
}
Π package.json ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ:
{
"type": "commonjs"
}
ΠΠ°ΠΏΡΡΠΊΠ°Π΅ΠΌ ΡΠΊΡΠΈΠΏΡ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ npm run manifest
ΠΈΠ»ΠΈ ts-node generateManifest.ts
- ΠΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ WebP ΠΎΡ Google.
- Π‘ΠΊΠ°ΡΠ°ΠΉΡΠ΅ WebP Utilities for Windows, ΠΎΠ±ΡΡΠ½ΠΎ Π°ΡΡ
ΠΈΠ² Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ
libwebp-x.x.x-windows.zip
, Π³Π΄Π΅x.x.x
β Π²Π΅ΡΡΠΈΡ. - Π Π°ΡΠΏΠ°ΠΊΡΠΉΡΠ΅ ΡΠΊΠ°ΡΠ°Π½Π½ΡΠΉ Π°ΡΡ
ΠΈΠ² Π² ΡΠ΄ΠΎΠ±Π½ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π² ΠΏΠ°ΠΏΠΊΡ
C:\webp
.
Π¨Π°Π³ 2: ΠΠ°ΡΡΡΠΎΠΉΠΊΠ° ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ ΠΎΠΊΡΡΠΆΠ΅Π½ΠΈΡ PATH (ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ)
ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΏΡΡΡ ΠΊ cwebp.exe
Π² ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ ΠΎΠΊΡΡΠΆΠ΅Π½ΠΈΡ PATH, ΡΡΠΎΠ±Ρ ΠΈΠΌΠ΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π·Π°ΠΏΡΡΠΊΠ°ΡΡ Π΅Π³ΠΎ ΠΈΠ· Π»ΡΠ±ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠΈ.
- ΠΡΠΊΡΠΎΠΉΡΠ΅ ΠΠ°ΡΠ°ΠΌΠ΅ΡΡΡ > Π‘ΠΈΡΡΠ΅ΠΌΠ° > Π ΡΠΈΡΡΠ΅ΠΌΠ΅ > ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΡΠΈΡΡΠ΅ΠΌΡ.
- Π ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΡΠ΅Π΄Ρ Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Path ΠΈ Π½Π°ΠΆΠΌΠΈΡΠ΅ ΠΠ·ΠΌΠ΅Π½ΠΈΡΡ.
- ΠΠ°ΠΆΠΌΠΈΡΠ΅ Π‘ΠΎΠ·Π΄Π°ΡΡ ΠΈ ΡΠΊΠ°ΠΆΠΈΡΠ΅ ΠΏΡΡΡ ΠΊ ΠΏΠ°ΠΏΠΊΠ΅, Π³Π΄Π΅ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ cwebp.exe. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ,
C:\webp\bin
. - Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΈ Π·Π°ΠΊΡΠΎΠΉΡΠ΅ Π²ΡΠ΅ ΠΎΠΊΠ½Π°.
Π’Π΅ΠΏΠ΅ΡΡ cwebp Π΄ΠΎΡΡΡΠΏΠ΅Π½ Π΄Π»Ρ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π² Π»ΡΠ±ΠΎΠΉ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΠΈ.
ΠΡΠΊΡΠΎΠΉΡΠ΅ ΠΠΎΠΌΠ°Π½Π΄Π½ΡΡ ΡΡΡΠΎΠΊΡ ΠΈ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΠ΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρ:
cwebp -version
Get-ChildItem -File | Where-Object { $_.Extension -match '\.(webp|jpg|jpeg|JPG|PNG|png|GIF|gif)$' } | ForEach-Object { cwebp -q 90 $_.FullName -o "$($_.DirectoryName)\$($_.BaseName).webp" }
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
- Configure the top-level
parserOptions
property like this:
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: ['./tsconfig.json', './tsconfig.node.json'],
tsconfigRootDir: __dirname,
},
- Replace
plugin:@typescript-eslint/recommended
toplugin:@typescript-eslint/recommended-type-checked
orplugin:@typescript-eslint/strict-type-checked
- Optionally add
plugin:@typescript-eslint/stylistic-type-checked
- Install eslint-plugin-react and add
plugin:react/recommended
&plugin:react/jsx-runtime
to theextends
list