Оборачиваем библиотеку CommonJS в директиву Angular 8 на примере mark.js

И расширение его функциональности с помощью пользовательской логики.

Предпосылки: вы должны быть знакомы с фреймворком Angular и Угловой интерфейс командной строки.

Введение

Время от времени в моих повседневных задачах мне приходится реализовывать некоторые функции, которые уже были реализованы кем-то ранее в аккуратной библиотеке vanillaJS, но… нет версии Angular или даже модуля ES6, чтобы можно было легко захватить их в ваш Angular 8. заявление.

Да, вы можете прикрепить эту библиотеку в index.html с помощью <скрипт> tag, но, с моей точки зрения, это усложняет ремонтопригодность. Кроме того, вы должны сделать то же самое для другого проекта Angular, где вы можете его использовать.

Гораздо лучше создать директиву оболочки Angular (или компонент) и опубликовать ее как пакет npm, чтобы каждый (и вы, конечно 🙂 могли легко повторно использовать ее в другом проекте.

Одной из таких библиотек является mark.js — довольно солидное решение для выделения текста поиска внутри заданного раздела веб-страницы.

mark.js mark.js

Как работает mark.js

В оригинальной реализации mark.js можно подключить к проекту двумя способами:

$ npm install mark.js --save-dev

// in JS code
const Mark = require('mark.js');
let instance = new Mark(document.querySelector("div.context"));
instance.mark(keyword [, options]);

*OR*

<script src="vendor/mark.js/dist/mark.min.js"></script>

// in JS code
let instance = new Mark(document.querySelector("div.context"));
instance.mark(keyword [, options]);

И результат выглядит так:

Результат запуска mark.js (взято из официальная страница Mark.js)

Вы можете поиграть с ним на mark.js страница конфигуратора.

Но можем ли мы использовать его в Угловой путь? Скажи, вот так

// some Angular module
imports: [
...
MarkjsModule // imports markjsHighlightDirective
...
]

// in some component template
<div class="content_wrapper" 
     [markjsHighlight]="searchValue"
     [markjsConfig]="config"
>

Давайте также реализуем некоторые дополнительные функции. Скажем, прокрутите content_wrapper до первого выделенного слова:

<div class="content_wrapper" 
     [markjsHighlight]="searchText"
     [markjsConfig]="config"
     [scrollToFirstMarked]="true"
>

Теперь давайте реализуем и опубликуем библиотеку Angular с демонстрационным приложением, которое будет содержать markjsHighlightDirective и его модуль.
Мы назовем это ngx-markjs.

Планирование структуры проекта Angular

Чтобы сгенерировать проект Angular для нашей библиотеки, мы будем использовать Angular CLI.

npm install -g @angular/cli

Теперь давайте создадим наш проект и добавим в него библиотеку ngx-markjs:

ng new ngx-markjs-demo --routing=false --style=scss
// a lot of installations goes here

cd ngx-markjs-demo

ng generate lib ngx-markjs

А теперь добавим markjsHighlightDirective стартер к нашему ngx-markjs библиотека

ng generate directive markjsHighlight --project=ngx-markjs

После удаления ngx-markjs.component.ts а также ngx-markjs.service.ts в проекты/ngx-markjs/src/lib/ папка, которая была автоматически создана Angular CLI, мы получим следующую структуру каталогов для нашего проекта:

проект ngx-markjs-demo с библиотекой ngx-markjs

Для удобства построения нашей библиотеки добавим в проект еще две строчки пакет.json файл в сценарии раздел:

"scripts": {
  "ng": "ng",
  "start": "ng serve --port 4201",
  "build": "ng build",
  "build:ngx-markjs": "ng build ngx-markjs && npm run copy:lib:dist", // <---
  "copy:lib:dist": "cp -r ./projects/ngx-markjs/src ./dist/ngx-markjs/src",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
},

сборка: ngx-markjs — запускает сборку для библиотеки ngx-markjs (но не для родительского демонстрационного проекта)

копия:lib:dist — удобно иметь исходные файлы и в npm-пакетах, поэтому эта команда скопирует исходники библиотеки в папку /dist/ngx-markjs (куда будет помещен скомпилированный модуль после сборка: ngx-markjs команда).

Пришло время добавить код реализации!

Примечание: официальная документация Angular о создание библиотек рекомендует создать стартер без основного родительского проекта, например:
ng новое мое рабочее пространство — create-application=false
Но я решил оставить основной проект и сделать его демо-приложением для собственного удобства.