Автор оригинала: Zell Liew.
Когда вы создаете пакет для других для использования, вы должны учитывать, где ваш пользователь будет использовать ваш пакет. Будут ли они использовать его в среде на основе браузера (или Frontend JavaScript)? Будут ли они использовать его в узле (или Backend JavaScript)? Или оба?
Если вы хотите создать пакет, используемый в обоих браузерах, так и в узле, эта статья здесь, чтобы помочь.
Вы узнаете:
1. Как писать пакеты для использования в браузерах
2. Как писать пакеты для использования в узле
3. Как опубликовать свои пакеты для использования как в браузерах, так и в узле
Написание пакета для использования в браузерах
Если вы хотите включить библиотеку в Frontend JavaScript, вы должны сначала связать библиотеку с помощью скрипт ярлык. Вы можете использовать библиотеку в любое время после его ссылки.
Это работает, потому что JavaScript в браузерах делится один глобальный объем. Неважно, сколько файлов JavaScript вы ссылаетесь. Они ведут себя как будто они один большой файл JavaScript.
С помощью этой информации мы можем начать писать библиотеку для использования в мире Freeend.
Допустим, вы хотите создать библиотеку под названием PeachLossom Отказ PeachLossom имеет Bloom функция. Вы пишете это Bloom Функция в отдельном файле JavaScript, Peach-Blossom.js Отказ
// This is js
// peach-blossom.jsfunction bloom () { console.log('Bloom!')}Вы можете включить PeachLossom В вашем Frontend JavaScript, связываясь на Peach-Blossom.js файл. Как только вы сделаете это, вы можете использовать Bloom в любом месте.
// This is js
// main.jsbloom() // Bloom!
Библиотеки обычно имеют более одного куска кода. Мы не хотим загрязнять глобальную область с небольшими переменными. Что мы можем сделать, это обернуть функции, которые мы хотим разоблачить в немедленном выражении функции (IIFE).
Это означает:
1. Мы создаем функцию и запускаем ее сразу 2. Мы возвращаем библиотеку из функции, чтобы мы могли использовать библиотеку позже.
В коде это выглядит несколько так:
// This is js
// 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.boom Отказ
// This is js
// main.jspeachBlossom.bloom() // Bloom!
Это основы написания библиотеки Frontend.
Теперь давайте поговорим о написании библиотеки для узла.
Написание пакета для узла
Добавление библиотеки в узел отличается от добавления библиотеки в браузеры. Это потому, что узел не имеет HTML-файлов и
Давайте убедитесь, что вы знаете, как запустить узел, прежде чем мы начнем написать библиотеку для узла.
Бег узла
Во-первых, вам нужно убедиться, что у вас установлен узел на вашем компьютере. Вы можете установить узел из Сайт узла Если у вас нет его установленного уже.
После установки узла вы захотите создать папку для хранения вашего узла проекта. В этом случае давайте назовем это «узел-проект».
Команда для создания папки это:
# This is bash
mkdir node-project
Тогда вам нужно перейти к Узел-проект каталог. Вы можете сделать это с CD :
# This is bashcd node-project
Если у вас проблемы с командной строкой, вы можете использовать Это руководство чтобы помочь вам.
Далее мы хотим создать файл. Это будет файл JavaScript. (Мы запустим узел в этом файле). Давайте назовем это index.js Отказ
# This is bash
touch index.js
В index.js мы собираемся написать console.log утверждение. Это для нас, чтобы узнать, если мы запустим файл.
// This is js
// index.jsconsole.log('Running index.js!')Наконец, вы можете использовать Узел бежать index.js Отказ Вот команда:
# This is bash
node index.js
Как только вы запустите index.js , вы должны увидеть console.log в терминале. Вот как мы знаем, что файл работает.
Добавление библиотек к узлу
Чтобы добавить библиотеки в узел, вы должны использовать требуется утверждение. Как только вы добавите библиотеку, вы можете использовать библиотеку в любом месте в том же файле JavaScript.
Вот пример:
// This is js
const fs = require('fs')console.log(fs)Когда вы используете требуется Узел ищет библиотеку, которую вы указали в трех местах:
Во-первых, он проверяет, встроена ли библиотека в узле. В этом примере ФС построен непосредственно в узел. Вы можете использовать фшс В любое время, если вы используете узел.
Во-вторых, это проверяет, существует ли библиотека в node_modules папка. Это, установленные пользователем библиотеки. Вы можете добавить библиотеку в node_modules Папка бежать Установка NPM .
Вот пример, где мы устанавливаем Экспресс Тогда требуется экспресс в узле:
# This is bash
# Run this in the command linenpm install express
// This is js
// Index.js const express = require('express')console.log(express)В-третьих, если вы добавите ./ к требуется Узел будет искать файл, расположенный в текущем каталоге. Это где мы можем начать писать Персик-Blossom библиотека.
Написание вашей первой библиотеки для узла
Давайте начнем с создания Peach-Blossom.js файл. Этот файл должен быть в том же каталоге, что и index.js Отказ
// This is js
touch peach-blossom.js
Мы можем добавить Peach-Blossom.js к index.js Используя требовать . Вот что похоже:
// This is js
const peachBlossom = require('./peach-blossom')В узле нет концепции общего глобального масштаба. Каждый файл имеет свой собственный объем. Итак, если вы пишете Peach-Blossom.js. Как будто он используется для Frontend JavaScript, вы не сможете его использовать. Вы получите ошибку.
// This is js
// 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!') } }})()// This is js
// index.js const peachBlossom = require('./peach-blossom')Передать переменные из одного файла на другой в узле, вы должны написать Module.exports Отказ Переменные прошли Module.exports может быть получен из другого файла.
Это означает, что мы должны написать Module.exports в Peach-Blossom.js Отказ
// This is js
// Write as much code as you want here const peachBlossom = { bloom () { console.log('Bloom!') }}// Exports peachBlossom for use in other filesmodule.exports = peachBlossom
Как только мы экспортировали PeacheLossom. мы можем использовать его в других файлах:
// This is js
// index.js const peachBlossom = require('./peach-blossom')peachBlossom.bloom() // Bloom!```Этот формат прохождения переменных вокруг в узле с требуется и Module.exports называется Commonjs Отказ
Публикация вашей библиотеки в качестве пакета NPM
Короче говоря, чтобы ваш модуль работать в узле, вы должны экспортировать переменную с Module.exports Отказ Другие люди могут тогда требуется Этот модуль в их коде.
На данный момент вы можете переместить Персик-Blossom в отдельную папку проекта и опубликовать ее как пакет NPM. Вы можете использовать Это руководство Чтобы узнать больше о публикации процесса.
Письменные модули, которые используются в оба Frontend, так и в Backend JavaScript
Давайте найдя момент, чтобы примирить то, что мы знаем.
Чтобы написать библиотеку для Frestend, нам нужно объявить ее как переменную. Как можно больше, мы хотим выставить только одну вариабельную.
// This is js
const peachBlossom = (function () { // Write as much code as you want here// Return what others can use return { bloom: function () { console.log('Bloom!') } }})()Чтобы написать библиотеку для узла, нам нужно экспортировать переменную с Module.exports Отказ Здесь мы только выставляем одну переменную.
// This is js// Write as much code as you want here const peachBlossom = { bloom () { console.log('Bloom!') }}// Exports peachBlossom for use in other filesmodule.exports = peachBlossom
Но это две совершенно разные форматы! Как мы можем написать библиотеку один раз и использовать ее в обоих контекстах?
Введите UMD.
Umd.
UMD (Универсальный модуль определение ) – это блок кода, который мы можем использовать, чтобы обернуть вокруг нашей библиотеки. Этот блок кода позволяет использовать библиотеку как на Frontend, так и в узле.
Это выглядит так:
// This is js
(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 {};}));WHOA! Это смущает! Задержать!
На практике нам не нужно знать, как UMD-IFY наш код самим собой. Многие инструменты, такие как WebPack и посылка, дает нам возможность UMD-IFY нашего кода через них.
Вот несколько примеров (и их соответствующие инструкции по настройке):
1. Гульп-УМД 2 WebPack 3 Посылка 4 Свернуть
Это означает, что вы должны настроить эти инструменты, если вы хотите написать пакеты, которые можно использовать для обоих Frontend JavaScript, так и в узле. Да, оно усложняет процесс авторинга, но ничего особенного мы можем сделать с этим в этот момент.
Обертывание
Если вы хотите, чтобы ваша библиотека работала как на Frontend JavaScript, так и в узле, вам нужно обернуть свой модуль с UMD (универсальный модуль определения).
Если вы хотите UMD-IFY ваш код, вам нужно использовать инструмент сборки при авторе вашего пакета. Это делает процесс авторизации более сложным. Но компромисса может стоить того, чтобы предоставить пользователям возможность использовать вашу библиотеку где угодно.
Эта статья была первоначально опубликована на мой блог Отказ Подпишитесь на мой рассылка Если вы хотите больше статей, чтобы помочь вам стать лучшим разработчиком Frontend.
Оригинал: “https://www.freecodecamp.org/news/how-to-publish-packages-that-can-be-used-in-browsers-and-node-c51274dca77c/”