Экспорт вне веб-пакета

Question

Это то, о чем я думал сегодня, и я не видел много информации, поэтому я собираюсь поделиться этими странными случаями и тем, как я лично их решал (если есть лучший способ, пожалуйста, прокомментируйте, но пока чтоэто может помочь другим ^^)

В обычном модуле вы могли бы сделать что-то подобное для экспорта вашей функции / библиотеки / объекта / данных:

// regular NodeJS way:
module.exports = data;

// ES6 way
// (will get transpiled to the regular way using the module variable by webpack)
export data;
default export data;

При компиляцииобычно используются библиотеки babel или tsc, но если по какой-либо причине вы хотите не только скомпилировать (перенести) вашу библиотеку, но и упаковать ее с помощью веб-пакета, вы столкнетесь с этим случаем.

Как вы знаетев пакете веб-пакета переменная module является локальной для пакета (каждый модуль / файл упакован функцией, в которой module является параметром = локальная переменная), поэтому на самом деле ничего не экспортируется за пределы пакета, просто управляетсяby webpack.

Это означает, что вы также не можете получить доступ к содержимому с помощью обычных методов require / import.

В некоторых случаях вы можете найти neceссары для экспорта вне веб-пакета. (т.е. вы пытаетесь создать библиотеку с помощью веб-пакета и хотите, чтобы она была доступна другим людям). По сути, это означает, что вам нужен доступ к исходной переменной module, но веб-пакет не предоставляет ее, как это было с __non_webpack_require__.

См. Также: Импорт модулей времени выполнения из внешнего веб-пакетарасслоение

Answer 1

Решение состоит в том, чтобы создать наш собственный __non_webpack_module__ (как это делает веб-пакет с __non_webpack_require__.

Как я это сделал, используя webpack.BannerPlugin для введения некоторого кода за пределами пакета. Этот код добавляется к сборке после завершения минимизации, поэтому оно безопасно сохраняется.

В вашем webpack.config.js:

plugins: [
  new BannerPlugin({
    raw: true,
    banner: `const __non_webpack_module__ = module;`,
  }),
]

И снова, если вы используете TypeScript, в global.d.ts:

declare const __non_webpack_module__: NodeModule;

И теперь вы можете сделать что-то подобное в своем коде:

__non_webpack_module__.exports = /* your class/function/data/whatever */

Это позволитчтобы импортировать его как обычно из других файлов

Совет: Возможно, вы захотите взглянуть на BannerPlugin , чтобы проверить другие параметры, например include или exclude поэтому эта переменная генерируется только для нужных файлов и т. д.