Импорт через тег скрипта против импорта через веб-пакет

Question

Я установил библиотеку мультиплексора, используя npm, и импортировал ее вот так

 <script defer src="../node_modules/mux.js/dist/mux.js"></script>

Я знаю, что это определяет некоторые глобальные переменные JS при загрузке этого скрипта. Скрипты, которые загружаются таким образом, представляют собой набор определений var? Совместимы ли они с ES6 import / webpack?

Можно ли вместо этого использовать webpack для объединения скрипта?

Answer 1

Да.

Вы можете использовать ProvidePlugin : автоматически загружать модули вместо того, чтобы импортировать или требовать их повсюду.

plugins: [
    new webpack.ProvidePlugin({
       muxjs: 'mux.js/dist/mux.js', // By default, module resolution path is current folder (./**) and node_modules
    })
]

теперь просто используйте его в своем модули (файлы):

const tools = muxjs.mp4.tools;

Всякий раз, когда muxjs встречается как свободная переменная в модуле, 'mux.js/dist/mux.js' загружается автоматически, а переменная muxjs заполняется экспортом загруженного модуля ( или свойство для поддержки именованного экспорта).

Webpack, конечно, имеет кеш, поэтому эта сторонняя библиотека будет загружена только один раз (если вы не работаете с несколькими записями, загружающими эту стороннюю библиотеку).