2016-08-11 2 views
1

Я работаю над приложением, которое необходимо загрузить в библиотеке ReadiumJS, в которой используются модули AMD. Само приложение написано в es6 w/webpack и babel. Я получил пакет поставщика, который работает правильно, и он втягивает встроенный файл Readium, но когда я пытаюсь потребовать какой-либо из модулей, Webpack говорит, что он не может их решить. Кто-нибудь когда-либо делал это раньше с помощью Webpack и RequireJS? Вот некоторая информация, которая может помочь - не уверен, что еще включить, так как это мой первый раз, на самом деле, используя Webpack ..Требовать сторонние модули RequireJS с помощью Webpack

Структура папки

/readium-src 
    /readium-js 
    /*** all readium-specific files and build output (have to pull down repo and build locally) 
/node_modules 
/src 
    /app.js -> main entry for my app 

/webpack.config.babel.js

webpack.config.js записей

entry: { 
    vendorJs: [ 
     'jquery', 
     'angular', 
     '../readium-src/readium-js/build-output/_single-bundle/readium-js_all.js', 
     'bootstrap/js/alert.js' //bootstrap js example 
    ], 
    appJs: './app.js' 
} 

Попытка требовать его в app.js

var readiumSharedGlobals = require('readium_shared_js/globals'); 

Я никогда не попал в RequireJS с использованием, так что действительно изо всех сил, чтобы понять, как использовать этот тип модуля вдоль боковых других типов модулей с WebPack. Любая помощь очень ценится :)

Update

Если я меняю app.js использовать вместо этого:

window.rqReadium = require('../readium-src/readium-js/build-output/_single-bundle/readium-js_all.js'); 

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

Uncaught Error: No IPv6 

на данный момент, я не уверен в

  1. Должен ли я потребовать весь путь?
  2. Является ли эта ошибка чем-то из webpack, requirejs или Readium? Пробовал отладку, но не смог найти что-нибудь полезное ...

UPDATE 8/12/2016

Я думаю, что это связано с проблемой с библиотекой, которая Readium в зависимости от: https://github.com/medialize/URI.js/issues/118

Однако, я все еще не понимаю, как правильно импортировать модули AMD с помощью webpack. Вот что я имею в виду:

Скажем, у меня есть драм модуль, определенный в moneyService.amd.js так:

define('myMoneyService', ['jquery'], function($) { 
    //contrived simple example... 
    return function getDollaz() { console.log('$$$'); } 
}); 

Затем в файле родственного, app.js, я хочу вытащить этот файл.

//this works 
var getDollaz = require('./moneyService.amd.js'); 

//this works 
require(['./moneyService.amd.js'], function(getDollaz) { getDollaz(); } 

//this does not 
require(['myMoneyService' /*require by its ID vs file name*/], function(getDollaz) { 
    getDollaz(); 
} 

Так что, если мы не можем требовать названных модулей, как бы мы работаем с DIST файлом является Стороной Lib третьей, которая имеет все модули комплектные в один файл?

+0

Необходимый вызов, который вы используете, находится в стиле CommonJS, а не AMD (RequireJS). Вы должны включить RequireJS в свой скрипт, возможно, оберните свой модуль в методы определения (или конфигурации shim) и инициируйте его с помощью вызова вызова. Это большой сдвиг парадигмы от CommonJS (но чище, imho) –

+0

@SteveHynding Я использую Webpack, и он уже понимает AMD, CommonJS и (с babel) ES6. Используете ли вы Webpack с requirejs, или вы отвечаете только с точки зрения чисто требования? –

+0

Что такое сообщение об ошибке, когда говорится, что он не может разрешить работу ReadiumJS? – kentcdodds

ответ

1

Хорошо, там есть репо для читателя Electron ePub с использованием Readium, и он использует webpack: https://github.com/clebeaupin/readium-electron Это отличный способ справиться с вытягиванием модулей RequireJS с помощью webpack.

Одна супер удивительная вещь, которую я нашел, это то, что вы можете указать output.library и output.libraryTarget, а webpack перенесет из одного формата модуля в другой ... freaking awesome! Таким образом, я могу импортировать модуль requirejs, установить библиотеку вывода и libraryTarget в «readium-js» и «commonjs2» соответственно, а затем внутри моего кода приложения я могу сделать import Readium from 'readium-js';

+0

Рад, что у вас это работает! Я просто возвращался, чтобы снова взглянуть на него. Удачи! – kentcdodds

Смежные вопросы