Сделайте свой пакет NPM работать на обоих Node.js и браузере

Я недавно работал на пакете NPM, который должен быть потребляется на обоих средах Node.js, так и в браузере (с использованием React/Angular/etc ..).

Все начало осложнить, когда узел ветвь кода необходимо требовать нативных пакетов Node.js – как ФС Отказ

Рассмотрим следующий (упрощенный) код:

// node-handler.js
const fs = require('fs');

export const handle = () => { 
  fs.readFileSync(…);
  …
};

// browser-handler.js
export const handle = () => { … };

// index.js
const nodeHandler = require('./node-handler').handle;
const browserHandle = require('./browser-handler').handle;
const isNode = require('./config').isNode;

const handle = isNode ? nodeHandler : browserHandle;

При тестировании модуля в моем ATT + WebPack App приложение разбилось:

Это произошло, даже если Узел обработчик Файл не был выполнен, это связано с природой WebPack создания пакета, содержащего весь код.

Шаг 1: отложить свой требует

Вместо того, чтобы требовать ФС В глобальном объеме мы можем потребовать его только там, где нам это действительно нужно, то, как нам не требуется, при запуске в браузере:

// node-handler.js
export const handle = () => { 
  require('fs').readFileSync(…);
  …
};

// browser-handler.js
export const handle = () => { … };

// index.js
const nodeHandler = require('./node-handler').handle;
const browserHandle = require('./browser-handler').handle;
const isNode = require('./config').isNode;

const handle = isNode ? nodeHandler : browserHandle;

Прохладный! Наше приложение React не разбивается! Но мы получаем раздражающее предупреждение о компиляции прямо сейчас:

Хотя мы можем жить с предупреждением ⚠️, наши конечные пользователи, вероятно, не понравится это слишком много, и в конечном итоге не устанавливает наш пакет.

Шаг 2: Eval Ваше требуется

Это не самое элегантное решение (чтобы сказать наименее ..), Но он сохраняет WebPack тихий и ваши конечные пользователи счастливы. Вместо использования требуют ('fs') мы собираемся использовать Eval («Требовать») («FS») :

// node-handler.js
export const handle = () => { 
  eval('require')('fs').readFileSync(…);
  …
};

// browser-handler.js
export const handle = () => { … };

// index.js
const nodeHandler = require('./node-handler').handle;
const browserHandle = require('./browser-handler').handle;
const isNode = require('./config').isNode;

const handle = isNode ? nodeHandler : browserHandle;

И это все! Всего две простые шаги, чтобы сделать ваш пакет NPM работать на обоих Node.js и браузере.

Удачи и можете ли вы быть благословлены тоннами звезд 🌟

Оригинал: “https://dev.to/aspecto/make-your-npm-package-work-on-both-node-js-and-browser-30n7”

Шаг 1: отложить свой требует

Шаг 2: Eval Ваше требуется

Читайте ещё по теме: