Эй, ребята! Небольшой перерыв, и я вернулся с совершенно новой статьей из цикла статей!

Что такое библиотека Javascript?

Библиотеки JavaScript — это наборы предварительно написанных фрагментов кода, которые можно использовать и повторно использовать для выполнения общих функций JavaScript.

Будучи разработчиком внешнего интерфейса, вы могли использовать множество библиотек Javascript через CDN (сеть доставки контента) или NPM (диспетчер пакетов узлов). Хотите знать, как они работают, и хотели бы создать их самостоятельно?
Цель этой статьи — сделать ее короткой и вкусной! чтобы помочь вам приступить к созданию собственной поставляемой библиотеки Javascript!

Это будет серия мини-статей, в которых мы учимся с нулячтобы -

  1. Создайте простую служебную библиотеку.
  2. Создание модульной библиотеки и дерево-шейкабельной с помощью модулей ES.
  3. Преобразование его в связную неизменяемуюбиблиотеку с помощьюООП.
  4. Предоставление разработчикам крючков для настройки как это работает.
  5. Объединение библиотеки для распространения и производительности.
  6. БОНУС (это действительно особенное, следите за обновлениями!)

Содержание

  • Настройка проекта.
  • Создание наших базовых файлов/рабочего процесса.

Настройка проекта

Нам нужен HTTP-сервер для работы на определенном порту вашей рабочей станции, где мы могли бы видеть наши результаты по любым изменениям файлов, происходящим во время нашего путешествия.

Узел-Статика -

Этот пакет npm позволяет вам статически обслуживать любой файл HTML в вашей сети.

npm install -g node-static

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

Создание наших базовых файлов/рабочего процесса

Нам потребуется файл HTML, в который мы будем импортировать отдельные сценарии Javascript, которые, в свою очередь, будут обслуживаться через HTTP-сервер.

В этом уроке мы создадим служебную библиотеку date.

mkdir <your-folder-name>
cd <your-folder-name>
touch index.html
touch index.js
touch time.js

Папка вашего проекта должна выглядеть примерно так.

. └── <your-folder-name>/
    ├── index.html
    ├── index.js
    └── time.js

Теперь используйте свой любимый редактор кода и отредактируйте файл index.html.

/*index.html*/
<!DOCTYPE html>
  <html>
   <head>
    <title>JS Library</title>
   </head>
   <body>
    <p>Hogwarts Ahoy!</p>
    <script src="time.js"></script>
    <script src="index.js"></script>
   </body>
  </html>

Давайте отредактируем index.js file

/*index.js*/
let christmas = new Date('December 25, 2022')
let day = getDay(christmas)
console.log(day)

и, наконец, time.js

function getDay (date) {
  let days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
 
  return days[date.getDay()];
}

Как только это будет сделано, откройте свой терминал и сделайте следующее:

cd <to-your-folder>
static -p 8000 // the port can be changed

Вуаля, откройте свой любимый браузер, войдите в localhost:8000, мы должны увидеть следующее.

Теперь вы успешно создали базовый рабочий процесс, в котором мы продолжим и создадим библиотеку дат Javascript 📆.

В Часть 2 мы займемся его упаковкой в ​​достойную модульную структуру с использованием ES-модулей ✨

******************************************************* **************
Этот пост был вдохновлен — https://gomakethings.com/, пожалуйста, загляните в этот замечательный блог, основанный на чистом Javascript.

Я Саурав Тиру, фронтенд-инженер по созданию пользовательского интерфейса в компании Радиус.

Каждую неделю я буду публиковать статьи, связанные с проектированием переднего плана, фотографией и редактированием видео!