У попередніх статтях ми розробили функціональну та оптимізовану бібліотеку ModernDOM. Тепер настав час зробити її більш надійною, зрозумілою для користувачів та сумісною з різними браузерами. У цій статті ми розглянемо процеси тестування, створення документації та забезпечення кросбраузерної сумісності.
1. Тестування
Для тестування нашої бібліотеки ми використаємо Jest – популярний фреймворк для JavaScript-тестування.
Налаштування Jest
1. Встановіть Jest:
|
1 |
npm install --save-dev jest @babel/preset-env |
2. Створіть файл конфігурації Jest
jest.config.js:|
1 2 3 4 5 6 |
module.exports = { testEnvironment: 'jsdom', transform: { '^.+\\.js$': 'babel-jest', }, }; |
3. Оновіть
package.json, додавши скрипт для запуску тестів:|
1 2 3 |
"scripts": { "test": "jest" } |
Написання тестів
Створіть директорію __tests__ і додайте файл core.test.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import $ from '../src/core'; describe('ModernDOM core functionality', () => { beforeEach(() => { document.body.innerHTML = ` <div id="testDiv" class="test-class"></div> <span class="test-class"></span> `; }); test('$ function selects elements correctly', () => { expect($('#testDiv').length).toBe(1); expect($('.test-class').length).toBe(2); }); test('addClass method adds classes correctly', () => { $('#testDiv').addClass('new-class'); expect(document.getElementById('testDiv').classList.contains('new-class')).toBeTruthy(); }); // Додайте більше тестів для інших методів }); |
2. Документація
Для створення документації використаємо JSDoc.
Налаштування JSDoc
1. Встановіть JSDoc:
|
1 |
npm install --save-dev jsdoc |
2. Створіть файл конфігурації JSDoc
jsdoc.json:|
1 2 3 4 5 6 7 8 9 10 |
{ "source": { "include": ["src"], "includePattern": ".js$" }, "opts": { "destination": "docs/", "recurse": true } } |
3. Додайте скрипт для генерації документації в
package.json:|
1 2 3 |
"scripts": { "docs": "jsdoc -c jsdoc.json" } |
Додавання документації
Додайте JSDoc коментарі до ваших методів. Наприклад:
|
1 2 3 4 5 6 7 8 9 |
/** * Adds one or more classes to each element in the set of matched elements. * @param {...string} classes - One or more class names to be added to the class attribute of each matched element. * @returns {Object} The ModernDOM object for chaining. */ $.prototype.addClass = function (...classes) { this.forEach(elem => elem.classList.add(...classes)); return this; }; |
3. Кросбраузерна сумісність
Для забезпечення кросбраузерної сумісності ми використаємо Babel для транспіляції коду та додамо поліфіли для відсутніх функцій.
Налаштування Babel
1. Встановіть необхідні пакети Babel:
|
1 |
npm install --save-dev @babel/core @babel/preset-env core-js |
2. Створіть файл конфігурації Babel .babelrc:
|
1 2 3 4 5 6 7 8 |
{ "presets": [ ["@babel/preset-env", { "useBuiltIns": "usage", "corejs": 3 }] ] } |
3. Оновіть gulpfile.js, щоб використовувати Babel:
|
1 2 3 4 5 6 7 8 9 10 11 |
const babel = require('gulp-babel'); gulp.task('build', () => { return gulp.src(['src/core.js', 'src/modules/*.js', 'src/index.js']) .pipe(concat('moderndom.js')) .pipe(babel()) .pipe(gulp.dest('dist')) .pipe(uglify()) .pipe(rename({ suffix: '.min' })) .pipe(gulp.dest('dist')); }); |
Додавання поліфілів
Створіть файл src/polyfills.js і додайте необхідні поліфіли:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// Приклад поліфілу для Element.closest if (!Element.prototype.closest) { Element.prototype.closest = function(s) { var el = this; do { if (el.matches(s)) return el; el = el.parentElement || el.parentNode; } while (el !== null && el.nodeType === 1); return null; }; } // Додайте інші необхідні поліфіли |
Включіть цей файл у процес збірки, додавши його до списку файлів у задачі build в gulpfile.js.
Давайте оновимо наш gulpfile.js, щоб включити всі нові функції, які ми додали, включаючи транспіляцію Babel, об’єднання файлів, мініфікацію, додавання поліфілів та генерацію документації. Ось оновлена версія gulpfile.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
const gulp = require('gulp'); const concat = require('gulp-concat'); const uglify = require('gulp-uglify'); const rename = require('gulp-rename'); const babel = require('gulp-babel'); const sourcemaps = require('gulp-sourcemaps'); const del = require('del'); const browserSync = require('browser-sync').create(); const eslint = require('gulp-eslint'); const jsdoc = require('gulp-jsdoc3'); // Очистка директорії dist gulp.task('clean', () => del(['dist'])); // Лінтинг gulp.task('lint', () => { return gulp.src(['src/**/*.js', '!src/polyfills.js']) .pipe(eslint()) .pipe(eslint.format()) .pipe(eslint.failAfterError()); }); // Збірка JavaScript gulp.task('build-js', () => { return gulp.src(['src/polyfills.js', 'src/core.js', 'src/modules/*.js', 'src/index.js']) .pipe(sourcemaps.init()) .pipe(babel({ presets: ['@babel/env'] })) .pipe(concat('moderndom.js')) .pipe(gulp.dest('dist')) .pipe(uglify()) .pipe(rename({ suffix: '.min' })) .pipe(sourcemaps.write('./')) .pipe(gulp.dest('dist')); }); // Генерація документації gulp.task('docs', (cb) => { gulp.src(['README.md', 'src/**/*.js'], {read: false}) .pipe(jsdoc(cb)); }); // Запуск сервера для розробки gulp.task('serve', () => { browserSync.init({ server: { baseDir: "./" } }); gulp.watch('src/**/*.js', gulp.series('build-js')); gulp.watch('dist/*.js').on('change', browserSync.reload); }); // Задача за замовчуванням gulp.task('default', gulp.series('clean', 'lint', 'build-js', 'docs', 'serve')); // Задача для продакшн збірки gulp.task('build', gulp.series('clean', 'lint', 'build-js', 'docs')); |
Для використання цього gulpfile.js вам потрібно встановити додаткові пакети:
|
1 |
npm install --save-dev gulp gulp-concat gulp-uglify gulp-rename gulp-babel @babel/core @babel/preset-env gulp-sourcemaps del browser-sync gulp-eslint gulp-jsdoc3 |
Цей оновлений gulpfile.js містить наступні покращення:
- Очистка директорії
distперед кожною збіркою. - Лінтинг коду за допомогою ESLint.
- Збірка JavaScript з транспіляцією Babel, об’єднанням файлів, мініфікацією та генерацією sourcemaps.
- Додавання поліфілів до збірки.
- Генерація документації за допомогою JSDoc.
- Запуск сервера для розробки з автоматичним перезавантаженням при змінах.
- Окрема задача для продакшн збірки.
Тепер ви можете використовувати наступні команди:
gulp– для запуску процесу розробки з автоматичним оновленням.gulp build– для створення продакшн версії бібліотеки.
Цей gulpfile.js забезпечить повний робочий процес для розробки, тестування та збірки вашої ModernDOM бібліотеки.
Висновок
У цій статті ми зробили нашу бібліотеку ModernDOM більш надійною, зрозумілою та сумісною з різними браузерами. Ми налаштували автоматизоване тестування з Jest, додали документацію за допомогою JSDoc та забезпечили кросбраузерну сумісність за допомогою Babel і поліфілів.
Ці кроки значно підвищують якість нашої бібліотеки, роблячи її готовою до використання в реальних проектах. Розробники тепер можуть бути впевнені в надійності бібліотеки, мають доступ до детальної документації та можуть використовувати ModernDOM у широкому спектрі браузерів.
У наступній статті ми розглянемо створення плагінної системи для ModernDOM, що дозволить легко розширювати функціональність бібліотеки та створювати екосистему навколо неї.