netology-code / ahj-code

Примеры кода для курса AHJ

Содержание

• Рабочее окружение
• DOM
• Events
• Testing
• Forms
• DnD
• HTTP
• SSE, WS
• Animations
• Geolocation, Notification, Media
• RxJS
• Web Workers, Service Workers

Как использовать

1. Склонируйте репозиторий
2. Перейдите в каталог интересующей вас лекции
3. Запустите npm install (или соответствующие команды yarn) для установки зависимостей
4. Запустите npm start для старта frontend'а в режиме разработки, npm run watch для старта backend'а в режиме разработки
5. Запустите npm build для сборки (только для frontend'а)
6. Запустите npm test для прогона тестов (только для frontend'а)

Важно: в некоторых лекциях (HTTP, SSE + WS), предполагается наличие серверной части. Для таких лекций внутри каталога идёт деление на frontend/backend. Это значит, что npm install нужно делать и для frontend'а и для backend'а.

ahj-code's Issues

Референсный конфиг webpack.prod.js некорректно минимизирует JavaScript на Webpack 5 версии

Проблема обнаружилась при сборке для прода проекта с rxjs. Webpack начал ругаться, что сборка тяжелая: 348 KiB. Анализ показал, что все из-за библиотеки rxjs. Попытки что-то сделать в виде динамических импортов не помогали. В итоге выяснилось, что в настройках, которые были даны к этому курсу как референсы в webpack.prod.js минимайзер CssMinimizerPlugin имплементирован неверно. Из-за этого не собирается минимизированный main.js. Вот так получается:

Отрывок кода из main.js. И это на Webpack пятой версии на любом из моих проектов, даже легких даже на js написанных изначально.

/******/ (() => { // webpackBootstrap
/******/ 	"use strict";
/******/ 	var __webpack_modules__ = ({

/***/ 9873:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {


Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.AjaxResponse = exports.AjaxTimeoutError = exports.AjaxError = exports.ajax = void 0;
var ajax_1 = __webpack_require__(3123);
Object.defineProperty(exports, "ajax", ({ enumerable: true, get: function () { return ajax_1.ajax; } }));
var errors_1 = __webpack_require__(2110);
Object.defineProperty(exports, "AjaxError", ({ enumerable: true, get: function () { return errors_1.AjaxError; } }));
Object.defineProperty(exports, "AjaxTimeoutError", ({ enumerable: true, get: function () { return errors_1.AjaxTimeoutError; } }));
var AjaxResponse_1 = __webpack_require__(932);
Object.defineProperty(exports, "AjaxResponse", ({ enumerable: true, get: function () { return AjaxResponse_1.AjaxResponse; } }));
//# sourceMappingURL=index.js.map

/***/ }),

В документации Webpack по минимизации с MiniCssExtractPlugin указано, что:

optimization: {
    minimizer: [
      // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
      // `...`,
      new CssMinimizerPlugin(),
    ],

Так вот, если добавить terser-webpack-plugin в список плагинов до или после CssMinimizerPlugin или сделать так, как указано в доке, все заработает:

Вот пример конфига для прода, который минимизирует js корректно:

module.exports = merge(common, {
  mode: "production",
  ...
  optimization: {
    minimizer: [`...`, new CssMinimizerPlugin()],
		// или minimizer: [new TerserPlugin(), new CssMinimizerPlugin()],
    ...
  },
});

Вот пример кусочка кода из main.js после сборки с таким конфигом:

(()=>{"use strict";var e={9873:(e,r,t)=>{Object.defineProperty(r,"__esModule",{value:!0}),r.AjaxResponse=r.AjaxTimeoutError=r.AjaxError=r.ajax=void 0;var n=t(3123);Object.defineProperty(r,"ajax",{enumerable:!0,get:function(){return n.ajax}});var o=t(2110);Object.defineProperty(r,"AjaxError",{enumerable:!0,get:function(){return o.AjaxError}}),Object.defineProperty(r,"AjaxTimeoutError",{enumerable:!0,get:function(){return o.AjaxTimeoutError}});var i=t(932);Object.defineProperty(r,"AjaxResponse",{enumerable:!0,get:function(){return i.AjaxResponse}})},4041:function(e,r,t){var n=this&&this.__createBinding||(Object.create?function(e,r,t,n){void 0===n&&(n=t),Object.defineProperty(e,n,{enumerable:!0,get:function(){return r[t]}})}:function(e,r,t,n){void 0===n&&(n=t),e[n]=r[t]}),o=this&&this.__exportStar||function(e,r){for(var t in e)"default"===t||Object.prototype.hasOwnProperty.call(r,t)||n(r,e,t)};Object.defineProperty(r,"__esModule",{value:!0}),r.interval=r.iif=r.generate=r.fromEventPattern=r.fromEvent=r.from=r.forkJoin=r.empty=r.defer=r.connectable=r.concat=r.combineLatest=r.bindNodeCallback=r.bindCallback=r.UnsubscriptionError=r.TimeoutError=r.SequenceError=r.ObjectUnsubscribedError=r.NotFoundError=r.EmptyError=r.ArgumentOutOfRangeError=r.firstValueFrom=r.lastValueFrom=r.isObservable=r.identity=r.noop=r.pipe=r.NotificationKind=r.Notification=r.Subscriber=r.Subscription=r.Scheduler=r.VirtualAction=r.VirtualTimeScheduler=r.animationFrameScheduler=r.animationFrame=r.queueScheduler=r

И он сразу становится по весу 148 KiB.

Получается, что при неверном указании в конфиге CssMinimizerPlugin() сбивает работу встроенного по дефолту в 5 версию Webpack terser-plugin, отчего и не минимизировалось все, как ожидалось.