При использовании 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.