Hot Reload
Ilovangizni ishga tushirish jarayoniga eng katta ta'sir TypeScript kompilyatsiyasi qiladi. Yaxshiyamki, webpack HMR (Hot-Module Replacement) bilan har safar o'zgarish bo'lganda but
Ilovangizni ishga tushirish jarayoniga eng katta ta'sir TypeScript kompilyatsiyasi qiladi. Yaxshiyamki, webpack HMR (Hot-Module Replacement) bilan har safar o'zgarish bo'lganda butun loyihani qayta kompilyatsiya qilishimiz shart emas. Bu ilovani ishga tushirish uchun kerakli vaqtni sezilarli darajada kamaytiradi va iterativ ishlab chiqishni ancha osonlashtiradi.
webpack aktivlaringizni (masalan, graphql fayllarini) avtomatik dist papkasiga nusxalamasligini unutmang. Xuddi shunday, webpack glob statik yo'llar (masalan, TypeOrmModule dagi entities xususiyati) bilan mos emas.
CLI bilan
Agar Nest CLI dan foydalansangiz, konfiguratsiya jarayoni ancha sodda. CLI webpack ni o'rab turadi va HotModuleReplacementPlugin dan foydalanish imkonini beradi.
O'rnatish
Avval kerakli paketlarni o'rnating:
1$ npm i --save-dev webpack-node-externals run-script-webpack-plugin webpackAgar Yarn Berry (klassik Yarn emas) ishlatsangiz, webpack-node-externals o'rniga webpack-pnp-externals paketini o'rnating.
Konfiguratsiya
O'rnatish tugagach, ilovangiz ildiz katalogida webpack-hmr.config.js faylini yarating.
1const nodeExternals = require('webpack-node-externals');
2const { RunScriptWebpackPlugin } = require('run-script-webpack-plugin');
3
4module.exports = function (options, webpack) {
5 return {
6 ...options,
7 entry: ['webpack/hot/poll?100', options.entry],
8 externals: [
9 nodeExternals({
10 allowlist: ['webpack/hot/poll?100'],
11 }),
12 ],
13 plugins: [
14 ...options.plugins,
15 new webpack.HotModuleReplacementPlugin(),
16 new webpack.WatchIgnorePlugin({
17 paths: [/\.js$/, /\.d\.ts$/],
18 }),
19 new RunScriptWebpackPlugin({ name: options.output.filename, autoRestart: false }),
20 ],
21 };
22};Yarn Berry (klassik Yarn emas) bilan externals konfiguratsiya xususiyatida nodeExternals o'rniga webpack-pnp-externals paketidagi WebpackPnpExternals dan foydalaning: WebpackPnpExternals({{ '{' }} exclude: ['webpack/hot/poll?100'] {{ '}' }}).
Bu funksiya birinchi argument sifatida standart webpack konfiguratsiyasi bo'lgan obyektni, ikkinchi argument sifatida esa Nest CLI foydalanadigan webpack paketiga havolani qabul qiladi. Shuningdek, u HotModuleReplacementPlugin, WatchIgnorePlugin va RunScriptWebpackPlugin plaginlari qo'shilgan o'zgartirilgan webpack konfiguratsiyasini qaytaradi.
Hot-Module Replacement
HMR ni yoqish uchun ilovaning entry fayli (main.ts) ni oching va quyidagi webpack bilan bog'liq ko'rsatmalarni qo'shing:
1declare const module: any;
2
3async function bootstrap() {
4 const app = await NestFactory.create(AppModule);
5 await app.listen(process.env.PORT ?? 3000);
6
7 if (module.hot) {
8 module.hot.accept();
9 module.hot.dispose(() => app.close());
10 }
11}
12bootstrap();Ishga tushirish jarayonini soddalashtirish uchun package.json faylingizga skript qo'shing.
1"start:dev": "nest build --webpack --webpackPath webpack-hmr.config.js --watch"Endi terminalni ochib, quyidagi buyruqni bajaring:
1$ npm run start:devCLIsiz
Agar Nest CLI dan foydalanmasangiz, konfiguratsiya biroz murakkabroq bo'ladi (ko'proq qo'lda qadamlar kerak bo'ladi).
O'rnatish
Avval kerakli paketlarni o'rnating:
1$ npm i --save-dev webpack webpack-cli webpack-node-externals ts-loader run-script-webpack-pluginAgar Yarn Berry (klassik Yarn emas) ishlatsangiz, webpack-node-externals o'rniga webpack-pnp-externals paketini o'rnating.
Konfiguratsiya
O'rnatish tugagach, ilovangiz ildiz katalogida webpack.config.js faylini yarating.
1const webpack = require('webpack');
2const path = require('path');
3const nodeExternals = require('webpack-node-externals');
4const { RunScriptWebpackPlugin } = require('run-script-webpack-plugin');
5
6module.exports = {
7 entry: ['webpack/hot/poll?100', './src/main.ts'],
8 target: 'node',
9 externals: [
10 nodeExternals({
11 allowlist: ['webpack/hot/poll?100'],
12 }),
13 ],
14 module: {
15 rules: [
16 {
17 test: /.tsx?$/,
18 use: 'ts-loader',
19 exclude: /node_modules/,
20 },
21 ],
22 },
23 mode: 'development',
24 resolve: {
25 extensions: ['.tsx', '.ts', '.js'],
26 },
27 plugins: [new webpack.HotModuleReplacementPlugin(), new RunScriptWebpackPlugin({ name: 'server.js', autoRestart: false })],
28 output: {
29 path: path.join(__dirname, 'dist'),
30 filename: 'server.js',
31 },
32};Yarn Berry (klassik Yarn emas) bilan externals konfiguratsiya xususiyatida nodeExternals o'rniga webpack-pnp-externals paketidagi WebpackPnpExternals dan foydalaning: WebpackPnpExternals({{ '{' }} exclude: ['webpack/hot/poll?100'] {{ '}' }}).
Bu konfiguratsiya webpack ga ilovangiz haqida bir nechta muhim ma'lumotlarni beradi: entry faylning joylashuvi, kompilyatsiya qilingan fayllar qaysi katalogda saqlanishi va manba fayllarni kompilyatsiya qilish uchun qanday loader ishlatilishi. Umuman olganda, barcha variantlarni to'liq tushunmasangiz ham, fayldan shundayligicha foydalana olishingiz kerak.
Hot-Module Replacement
HMR ni yoqish uchun ilovaning entry fayli (main.ts) ni oching va quyidagi webpack bilan bog'liq ko'rsatmalarni qo'shing:
1declare const module: any;
2
3async function bootstrap() {
4 const app = await NestFactory.create(AppModule);
5 await app.listen(process.env.PORT ?? 3000);
6
7 if (module.hot) {
8 module.hot.accept();
9 module.hot.dispose(() => app.close());
10 }
11}
12bootstrap();Ishga tushirish jarayonini soddalashtirish uchun package.json faylingizga skript qo'shing.
1"start:dev": "webpack --config webpack.config.js --watch"Endi terminalni ochib, quyidagi buyruqni bajaring:
1$ npm run start:devMisol
Ishlaydigan misol bu yerda mavjud.