При использовании React и Dynamic Web TWAIN для создания приложения для сканирования веб-документов я не понимал, как загрузить Dynamsoft.webtwain.min.js, глобальную библиотеку JavaScript, такую ​​как jQuery , в мой проект. Некоторое время я искал в Google соответствующие вопросы, но мне было трудно найти полезные ответы. Затем я начал изучать webpack с нуля и, наконец, понял, как заставить его работать. В этой статье я поделюсь не только решениями, но и проблемами, с которыми столкнулся.

Три способа импорта глобальных библиотек JavaScript в React Project

По сравнению с Angular, загрузка глобальной библиотеки JavaScript в React сложнее.

Вставить JS-ссылку в элемент HTML-скрипта

Webpack - это просто сборщик модулей, который объединяет все модули с зависимостями в один пакет, который по-прежнему является файлом JavaScript. Следовательно, мы можем использовать код JavaScript для динамической вставки ссылки JS в элемент сценария HTML для глобального доступа. Согласно Жизненному циклу компонента React, мы можем написать код в методе componentDidMount ():

componentDidMount() {
var script = document.createElement('script');
script.src = "http://www.dynamsoft.com/library/dwt/dynamsoft.webtwain.min.js";
document.getElementsByTagName('head')[0].appendChild(script);
}

Этот подход не подходит для загрузки файла локальной библиотеки JavaScript.

Модуль экспорта вручную

Чтобы загрузить модуль в JavaScript, мы можем использовать require (). Давай попробуем это:

var Dynamsoft = require(‘dwt’);

При запуске приложения вы можете открыть консоль разработчика, чтобы проверить переменную.

Почему "Uncaught ReferenceError"? Причина в том, что Dynamsoft.webtwain.min.js - это глобальная библиотека JavaScript, а не модуль. Webpack рассматривает любой файл JavaScript как модуль. Откройте bundle.js, мы видим, что webpack обертывает каждый модуль анонимной функцией. Доступны только экспортированные модули.

Чтобы код работал, мы можем добавить «module.exports = Dynamsoft» в конец node_modules \ dwt \ dist \ Dynamsoft.webtwain.min.js, а затем пересобрать проект React.

Переменная Dynamsoft теперь имеет смысл.

Настроить webpack.config.js

Вышеупомянутый подход, который изменяет исходную библиотеку JavaScript, по-видимому, не подходит. Лучше всего загрузить библиотеку в глобальный контекст. Давайте посмотрим, что мы можем сделать с файлом webpack.config.js.

Webpack предоставляет загрузчики для предварительной обработки различных файлов - преобразования их в JavaScript. Здесь мы выбираем скрипт-загрузчик, который однократно выполняет JS скрипт в глобальном контексте.

Устанавливаем скрипт-загрузчик:

npm install script-loader --save

Согласно документации webpack, мы можем использовать скрипт-загрузчик следующим образом:

require('script-loader!../node_modules/dwt/dist/dynamsoft.webtwain.min..js');

Однако в моем проекте React я получил сообщение об ошибке «Не использовать синтаксис импорта для настройки синтаксиса импорта / no-webpack-loader-загрузчиков веб-пакетов»:

Как решить эту проблему? Я попробовал другой способ.

Добавьте новое правило в webpack.config.js:

{
test: /\.js$/,
include: path.join(paths.appNodeModules, 'dwt'),
loader: 'script-loader'
},

Поскольку скрипт-загрузчик только предварительно обрабатывает Dynamsoft.webtwain.min.js, нам необходимо определить его путь поиска.

Чтобы использовать библиотеку в вашем коде, просто require () имя пакета:

require(‘dwt’);

Теперь мы можем получить глобальный доступ к переменным Dynamsoft.webtwain.min.js.