Как использовать webpack и ES6 с зависимостями, используя модуль CommonJS? - PullRequest
Новая
       75

Как использовать webpack и ES6 с зависимостями, используя модуль CommonJS?

4 голосов
/ 26 сентября 2019

Я работаю над проектом с laravel, который использует (по умолчанию) веб-пакет для объединения своих ресурсов.Там у меня есть зависимость от пакета, который, в свою очередь, имеет зависимости от lodash и deepdash.

Поскольку deepdash предоставляется как миксин для lodash, его использование (согласно документации) выглядит следующим образом: 

// load Lodash if you need it
const _ = require('lodash');
//mixin all the methods into Lodash object
require('deepdash')(_);

или, если вы хотите использовать синтаксис ES6 (по крайней мере, это мое понимание), это будет означать: 

import _ from 'lodash';
import deepdash from 'deepdash';

deepdash(_);

Сделав это, я пытаюсьиспользуйте webpack для создания пакета, который теперь будет использоваться в браузере.Моя проблема в том, что по какой-то причине кажется, что веб-пакет заменяет импорт lodash магической функциональностью "__webpack_require__", что приводит к тому, что lodash больше не является функцией, и браузер говорит следующее: enter image description here

Чтобы лучше продемонстрировать свою проблему, я создал демо-репозиторий github, просто пытаясь упаковать webd deepdash и lodash: ArSn / webpack-deepdash Вот строка, на которую браузер жалуется: https://github.com/ArSn/webpack-deepdash/blob/master/dist/main.js#L17219

Я много играл с добавлением конфигурации babel массово, и мне показалось, что мой лучший снимок - плагин babel-plugin-transform-commonjs-es2015-modules .Я попробовал это, результат был все тот же.

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

Примечания:

  • Я знаю, что есть также ES6-версия deepdash, и, очевидно,при использовании обоих этих механизмов механика веб-пакетов работает нормально (как указано в ответе на проблему github, я открыл для этого в deepdash), но используемая мной зависимость не использует их.Кроме того, я не вижу (или не понимаю?) Смысла в том, чтобы иметь выделенную версию ES6, во-первых.
  • Тот же самый код (использующий Deepdash таким образом с lodash) прекрасно работает, когда выполняется наnode.js, где он раньше не связывался с webpack.Я должен упомянуть, что здесь используется синтаксис require.

1 Ответ

3 голосов
/ 27 сентября 2019

Явное указание на основной модуль deepdash работает для меня при запуске одного из примеров с сайта deepdash: 

import _ from 'lodash';
import deepdash from 'deepdash/deepdash';

deepdash(_);

Webpack использует запись browser по умолчанию: 

  "main": "deepdash.js",
  "module": "es/standalone.js",
  "browser": "browser/deepdash.min.js",

Это не будет работать для Webpack и статического импорта - потому что на самом деле ничего не «экспортируется».

Кроме того: Обычно эти записи не указывают на минифицированные сборки.Обычно они предназначены только для случаев использования CDN, а не для упаковщиков.

Напротив 'deepdash/deepdash.js' экспортирует функцию декоратора.

Сборка deepdash-es в основном делает то же самое, за исключением того, что она используетes6 экспорт.Может быть, это способ, которым смена деревьев может работать из коробки.Не уверен насчет этого ...

Чтобы обойти проблему "браузера" - автор deepdash может просто изменить его, чтобы использовать "deepdash.js", или удалить его:

https://github.com/defunctzombie/package-browser-field-spec

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

...