Публикация пакетов, которые можно использовать в браузерах и Node.

Когда вы создаете пакет для использования другими, вы должны учитывать, где ваш пользователь будет использовать ваш пакет. Будут ли они использовать его в браузерной среде (или в интерфейсе JavaScript)? Будут ли они использовать его в Node (или бэкэнд-JavaScript)? Или оба?

Если вы хотите создать пакет, который можно использовать как в браузерах, так и в Node, эта статья поможет вам.

Вы узнаете:

1. Как написать пакеты для использования в браузерах
2. Как написать пакеты для использования в Node
3. Как опубликовать свои пакеты для использования как в браузерах, так и в Node

Написание пакета для использования в браузерах

Если вы хотите включить библиотеку во внешний JavaScript, вы должны сначала связать библиотеку с <script> ярлык. Вы можете использовать библиотеку в любое время после того, как свяжете ее.

<script src="link-to-jquery.js"></script>

<script>
  // You can use jQuery anytime after you link to it
  console.log(jQuery)
</script>

Это работает, потому что JavaScript в браузерах использует одну глобальную область видимости. Неважно, на сколько файлов JavaScript вы ссылаетесь. Они ведут себя так, как если бы они были одним большим файлом JavaScript.

Обладая этой информацией, мы можем начать писать библиотеку для использования во внешнем мире.

Допустим, вы хотите создать библиотеку с именем peachBlossom. peachBlossom имеет bloom функция. Вы пишете это bloom функция в отдельном файле JavaScript, peach-blossom.js.

// peach-blossom.js
function bloom () {
  console.log('Bloom!')
}

Вы можете включить peachBlossom в вашем внешнем JavaScript, связавшись с peach-blossom.js файл. Как только вы это сделаете, вы можете использовать bloom в любом месте.

<script src="peach-blossom.js"></script>
<script src="main.js"></script>

// main.js
bloom() // Bloom!

Библиотеки обычно имеют более одного фрагмента кода. Мы не хотим загрязнять глобальную область видимости маленькими переменными. Что мы можем сделать, так это обернуть функции, которые мы хотим предоставить, в мгновенно вызываемое функциональное выражение (IIFE).

Это означает:

1. Мы создаем функцию и запускаем ее сразу
2. Мы возвращаем библиотеку из функции, чтобы мы могли использовать библиотеку позже.

В коде это выглядит примерно так:

// peach-blossom.js 
const peachBlossom = (function () {
  // Write as much code as you want here

  // Return what others can use
  return {
    bloom: function () {
      console.log('Bloom!')
    }
  }
})()

Затем вы можете использовать bloom куда угодно, написав peachBlossom.bloom.

// main.js
peachBlossom.bloom() // Bloom!

Это основы написания внешней библиотеки.

Теперь поговорим о написании библиотеки для Node.

Написание пакета для Node

Добавление библиотеки в Node отличается от добавления библиотеки в браузеры. Это связано с тем, что в Node нет файлов HTML и <script> теги.

Давайте убедимся, что вы знаете, как запускать Node, прежде чем мы начнем писать библиотеку для Node.

Работающий узел

Во-первых, вам нужно убедиться, что на вашем компьютере установлен Node. Вы можете установить Node из сайт узла если он у вас еще не установлен.

После того, как вы установили Node, вам нужно создать папку для хранения вашего проекта Node. В этом случае назовем его «узел-проект».

Команда для создания папки такова:

mkdir node-project

Затем необходимо перейти к node-project каталог. Вы можете сделать это с cd:

cd node-project

Если у вас возникли проблемы с командной строкой, вы можете использовать это руководство чтобы помочь вам.

Далее мы хотим создать файл. Это будет файл JavaScript. (Мы запустим Node для этого файла). Давайте назовем это index.js.

touch index.js

В index.jsмы собираемся написать console.log утверждение. Это для нас, чтобы знать, если мы запустим файл.

// index.js
console.log('Running index.js!')

Наконец, вы можете использовать node бежать index.js. Вот команда:

node index.js

Как только вы запустите index.jsвы должны увидеть console.log в терминале. Вот как мы узнаем, что файл запущен.

Добавление библиотек в Node

Чтобы добавить библиотеки в Node, вы должны использовать require утверждение. После добавления библиотеки вы можете использовать ее в любом месте в том же файле JavaScript.

Вот пример:

const fs = require('fs')
console.log(fs)

Когда вы используете requireNode ищет указанную вами библиотеку в трех местах:

Сначала проверяется, встроена ли библиотека в Node. В этом примере fs встроен непосредственно в Node. Вы можете использовать fs в любое время, если вы используете Node.

Во-вторых, он проверяет, существует ли библиотека в node_modules папка. Это устанавливаемые пользователем библиотеки. Вы можете добавить библиотеку в node_modules папку, запустив npm install.

Вот пример, где мы устанавливаем expressзатем требуйте выражения в узле:

# Run this in the command line
npm install express

// Index.js 
const express = require('express')
console.log(express)

В-третьих, если добавить ./ к require, Node будет искать файл, расположенный в текущем каталоге. Здесь мы можем начать писать peach-blossom библиотека.

Написание вашей первой библиотеки для Node

Начнем с создания peach-blossom.js файл. Этот файл должен находиться в том же каталоге, что и index.js.

touch peach-blossom.js

Мы можем добавить peach-blossom.js к index.js используя require. Вот как это выглядит:

const peachBlossom = require('./peach-blossom')

В Node нет концепции общей глобальной области видимости. Каждый файл имеет свою область действия. Итак, если вы пишете peach-blossom.js как если бы он использовался для внешнего интерфейса JavaScript, вы не сможете его использовать. Вы получите ошибку.

// peach-blossom.js 
const peachBlossom = (function () {
  // Write as much code as you want here

  // Return what others can use
  return {
    bloom: function () {
      console.log('Bloom!')
    }
  }
})()

// index.js 
const peachBlossom = require('./peach-blossom')

Чтобы передать переменные из одного файла в другой в Node, вы должны написать module.exports. Переменные, переданные module.exports можно получить из другого файла.

Это означает, что мы должны написать module.exports в peach-blossom.js.

// Write as much code as you want here 
const peachBlossom = {
  bloom () {
    console.log('Bloom!')
  }
}

// Exports peachBlossom for use in other files
module.exports = peachBlossom

После того, как мы экспортировали peachBlossomмы можем использовать его в других файлах:

// index.js 
const peachBlossom = require('./peach-blossom')
peachBlossom.bloom() // Bloom!

Этот формат передачи переменных в Node с require а также module.exports называется CommonJS.

Публикация вашей библиотеки в виде пакета npm

Короче говоря, чтобы ваш модуль работал в Node, вы должны экспортировать переменную с module.exports. Затем другие люди могут require этот модуль в своем коде.

В этот момент вы можете двигаться peach-blossom в отдельную папку проекта и опубликовать его как пакет npm. Вы можете использовать это руководство, чтобы узнать больше о публикации процесса.

Написание модулей, которые можно использовать как во внешнем, так и во внутреннем JavaScript.

Давайте воспользуемся моментом, чтобы согласовать то, что мы знаем.

Чтобы написать библиотеку для фронтенда, нам нужно объявить ее как переменную. Насколько это возможно, мы хотим выставить только одну переменную.

const peachBlossom = (function () {
  // Write as much code as you want here

  // Return what others can use
  return {
    bloom: function () {
      console.log('Bloom!')
    }
  }
})()

Чтобы написать библиотеку для узла, нам нужно экспортировать переменную с помощью module.exports. Здесь мы выставляем только одну переменную.

// Write as much code as you want here 
const peachBlossom = {
  bloom () {
    console.log('Bloom!')
  }
}

// Exports peachBlossom for use in other files
module.exports = peachBlossom

Но это два совершенно разных формата! Как мы можем написать библиотеку один раз и использовать ее в обоих контекстах?

Введите УМД.

УМД

UMD (Универсальное определение модуля) — это блок кода, который мы можем использовать для обертывания нашей библиотеки. Этот блок кода позволяет использовать библиотеку как во внешнем интерфейсе, так и в Node.

Это выглядит примерно так:

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['b'], factory);
    } else if (typeof module === 'object' && module.exports) {
        // Node.
        module.exports = factory(require('b'));
    } else {
        // Browser globals (root is window)
        root.returnExports = factory(root.b);
    }
}(typeof self !== 'undefined' ? self : this, function (b) {
    // Use b in some fashion.

    // Just return a value to define the module export.
    // This example returns an object, but the module
    // can return a function as the exported value.
    return {};
}));

Вау! Это смущает! Задержать!

На практике нам не нужно знать, как самостоятельно UMD-ифицировать наш код. Многие инструменты, такие как Webpack и Parcel, дают нам возможность UMD-обновлять наш код через них.

Вот несколько примеров (и соответствующие инструкции по их установке):

1. Gulp-umd
2. Вебпак
3. Посылка
4. Свернуть

Это означает, что вам необходимо настроить эти инструменты, если вы хотите писать пакеты, которые можно использовать как для внешнего интерфейса JavaScript, так и для Node. Да, это усложняет авторский процесс, но на данный момент мы ничего не можем с этим поделать.

Подведение итогов

Если вы хотите, чтобы ваша библиотека работала как на внешнем JavaScript, так и на Node, вам нужно обернуть свой модуль с помощью UMD (универсальное определение модуля).

Если вы хотите UMD-ify вашего кода, вам нужно использовать инструмент сборки, когда вы создаете свой пакет. Это усложняет авторский процесс. Но компромисс может стоить того, чтобы предоставить пользователям возможность использовать вашу библиотеку где угодно.

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