Как заставить веб-пакет * фактически * игнорировать внешнее и полагаться на браузер для импорта? - PullRequest
Новая
       8

Как заставить веб-пакет * фактически * игнорировать внешнее и полагаться на браузер для импорта?

1 голос
/ 06 апреля 2020

Я пытаюсь заставить веб-пакет игнорировать импорт, чтобы он импортировался браузером с помощью собственного оператора импорта ES6, а не веб-пакета. Я пытаюсь заставить ffmpeg. js импортировать напрямую, так как он разбивает веб-пакет, когда пытается связать его, так как файлы слишком велики.

После ответа здесь ( Как исключить модуль из веб-пакета, и вместо того, чтобы импортировать его, используя es6 ), я поместил свой код в локальное дерево как /ffmpeg/ffmpeg-mpeg.js и проверил, что мой сервер dev может получить доступ как http://localhost: 8080 /ffmpeg/ffmpeg-webm.js

Затем я импортирую через: 

  import ffmpeg from '/ffmpeg/ffmpeg-webm.js';

И добавлю это в раздел внешних настроек моей конфигурации веб-пакета: 

  externals: {
    '/ffmpeg/ffmpeg-webm.js': 'ffmpeg',
  },

В результате получается ссылка, которая выглядит следующим образом 

webpack:///external "ffmpeg"

, содержащая: 

module.exports = ffmpeg;

, которая затем завершается с ошибкой "Uncaught Error: Cannot find module?" (На самом деле эта ошибка жестко запрограммирована в сгенерированном файле)

Так что, похоже, предполагается, что существует глобальная опция ffmpeg, а затем сопоставляется этот модуль с этим, но вместо этого я хочу, чтобы она полностью не затрагивала строку webpack и оставьте это браузеру.

Какой правильный способ сделать это? Правило исключения, которое было отклонено на этой странице, также не работает.

1 Ответ

0 голосов
/ 08 апреля 2020

Вы забыли включить внешний скрипт на своей странице.

Также, поскольку вы указали, что ваш файл очень большой, я бы рекомендовал включить его в защищенный

Так что вам нужно добавьте 

<script src="/ffmpeg/ffmpeg-webm.js" defer></script>

в заголовок вашего приложения, и вы затем импортируете его немного по-другому, используя функцию импорта с обратным вызовом 

import('/ffmpeg/ffmpeg-webm.js').then(ffmpeg => {
  //Do what you want to do with ffmpeg
});

Небольшое примечание: ключ внешнего Не обязательно указывать путь к файлу, это просто имя, которое вы будете использовать при импорте, поэтому переименуйте его, если вы путаетесь с путем 

module.export = {
  //...
  externals: {
    "ffmpeg-webm": "ffmpeg"
  }
}
//Then import
import('ffmpeg-webm').then(ffmpeg => {
  //Do what you want to do with ffmpeg
});

В качестве альтернативы, вместо использования внешних может использовать 

const ffmpeg = __non_webpack_require__('/ffmpeg/ffmpeg-webm.js')

Просто имейте в виду, что это изменит его как обычное требование, которое работает только с ES6

...