Вызвать библиотеку с помощью веб-пакета для использования в браузере - PullRequest
Новая
       8

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

0 голосов
/ 13 мая 2018

В поисках того, как связать библиотеку с помощью веб-пакета, ссылка на библиотеку: https://github.com/InteractiveAdvertisingBureau/Consent-String-SDK-JS/ Я попробовал следующую структуру: 

> /dist
>   - index.html 
> /src
>   - index.js 
> package.json 
> webpack.config.js

содержимое: index.html 

<!doctype html>
<html>
  <head>
    <title>Hello Webpack</title>
  </head>
  <body>
    <script src="bundle.js"></script>
    <script type="text/javascript">
        var consentData = new CSLib();
        console.log('euconsent : '+consentData);
    </script>
  </body>
</html>

index.js 

require('consent-string');

webpack.config.js: 

const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    library: 'CSLib',
    libraryTarget: 'umd',
    path: path.resolve(__dirname, 'dist')
  }

}

после запуска npm запустить сборку файл bundle.js генерируется, но при попытке доступа к файлу индекса в браузере возникает ошибка, скажем, что CSlib не определен.пожалуйста, помогите, я был бы очень признателен.

1 Ответ

0 голосов
/ 13 мая 2018

Прежде всего, вам нужно привязать результат require('consent-string'); к чему-либо.Я не знаю библиотеку, но, глядя на их страницу npm, вы сможете сделать следующее: 

const { ConsentString : CSLib} = require('consent-string');

Однако, даже если вы сделаете это, она не будет работать из-за некоторых деталей того, как на самом деле работает webpack.В основном каждый модуль, а точнее файл, выполняется внутри своей области видимости, и они не проникают в глобальный контекст.Как оно работает?Позвольте мне продемонстрировать.

Основы работы с веб-пакетами

Давайте начнем со следующего файла примера, который импортирует jquery, печатает "test" и экспортирует что-то. 

const $ = require('jquery');
console.log("test");

export function test() {
    console.log("test");
}

Запустите webpack для этого файла и откройте bundle.js.Вы обнаружите, что он начинается с определения функции следующим образом: function(modules).Это функция начальной загрузки webpacks.Если вы действительно посчитаете все скобки, вы обнаружите, что он определен, а затем немедленно вызван с массивом функций со следующей сигнатурой function(module, exports, __webpack_require__).Каждая функция в этом массиве представляет модуль или, вернее, файл, который веб-пакет включил в пакет.Вы найдете модуль 0, который генерируется веб-пакетом.Это выглядит так: 

/* 0 */
/***/function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(1); 
/***/ }

Все, что он делает, это звонит __webpack_require__(1).Так, что это делает?__webpack_require__ передается в качестве аргумента функции модуля, в которой мы находимся, но если вы заглянете внутрь функции начальной загрузки, вы обнаружите, что она там определена.Это работает следующим образом

  1. Если модуль с заданным идентификатором (идентификатор является индексом в массиве модулей, который мы обсуждали ранее) был «установлен», просто верните, что экспортированные свойства модулей,Модуль был установлен, если у него есть запись в массиве installedModules.

  2. В противном случае определите новый объект модуля (хранит идентификатор модуля, если он был загружен, и онэкспорта), затем вызовите функцию модуля с некоторыми аргументами, которые я буду обсуждать позже.

  3. Отметьте модуль как загруженный, добавьте объект модуля в installedModules и верните его свойство exports (мы увидим, как exports заполняется через минуту).

Теперь давайте посмотрим, как webpack изменил код, который мы дали.Он может быть найден в модуле 1 (который вызывается из модуля 0 запомнить) и выглядит следующим образом (там тоже могут быть какие-то бухгалтерии, но я его проигнорирую, я думаю, это из соображений совместимости): 

var $ = __webpack_require__(2);

console.log("test");

function test() {
    console.log("test");
}
exports.test = test;

Первая строка - var $ = __webpack_require__(2); Это мы уже обсуждали.Он просто импортирует jquery, что является модулем 2 (именно поэтому модуль 2 занимает большую часть файла, поскольку он включает в себя все jquery).

Тогда у нас есть console.log("test");.Ничего не изменилось из кода, который мы передали.

Но функция, которую мы экспортировали, была разделена на два оператора.Сначала определяется функция, а затем она добавляется к exports как свойство.Объект exports передается __webpack_require__ и представляет свойства, которые экспортирует модуль.Он хранится в installedModules в объекте модуля.Помните, что любой последующий вызов __webpack_require__ просто вернет свойство exports этого объекта модуля.

tldr : Webpack преобразует все эти причудливые операции на основе модулей в вызовы __webpack_require__ для импорта и присвоения exports для экспортных выписок.Это создает иллюзию того, что каждый модуль существует в своем собственном маленьком мире.

Что это значит для вас

Поскольку каждый модуль запускается внутри своей собственной области, вам нужно сгруппировать код, который использует require('consent-string'); с требованием утверждения.В заключение ваш index.js должен выглядеть так: 

const { ConsentString : CSLib} = require('consent-string');
var consentData = new CSLib();
console.log('euconsent : '+consentData);
...