Использование пакета NPM в браузере с Browserify

Я пытаюсь использовать Browserify, чтобы я мог использовать пакет npm в браузере. Пакет Я пытаюсь использовать это this Использование пакета NPM в браузере с Browserify

У меня есть fcs.js файл:

// Use a Node.js core library 
var FCS = require('fcs'); 

// What our module will return when require'd 
module.exports = function(FCS) { 
    return FCS; 
};

И в index.js файл:

var FCS = require('./fcs.js'); 

console.log('FCS IS '); 
console.log(FCS);

Я тогда гласил:

browserify index.js > bundle.js

И создал файл index.html:

<html> 
<script src="bundle.js"></script> 
<script> 
    var fcs = new FCS(); 

</script> 
</html>

Но я в конечном итоге с ошибкой:

Uncaught ReferenceError: FCS is not defined

Может быть, я не захватывая понятие правильно. Как я могу использовать этот пакет в браузере? Благодарю.

источник

2015-07-20 Mark

Не делайте этого: require('./fcs.js');

ли это: require('./fcs');

Когда вы require что-то, расширение неявно .js. Также убедитесь, что ваш модуль, FCS, имеет точку входа (по умолчанию index.js, но вы можете изменить это в записи main в package.json).

Кроме того, в вашем документе index.html вы ожидаете, что FCS является глобальным объектом. Я не видел внутреннего кода FCS, но он доступен только в глобальном масштабе, если он подключен к объекту window.

Когда вы require что-то, это только делает его доступным для остальной части вашего кода там, где это необходимо. Если вы хотите сделать это глобально доступны, вы должны прикрепить его к объекту window, как и все остальное.

Другими словами, внутренности вашего FCS модуля может выглядеть примерно так:

// node_modules -> fcs -> index.js 

var FCS = function() {}; 

window.FCS = FCS; // this makes it globally available 

module.exports = FCS; // this lets you require it

источник

2015-07-20 17:01:18

Спасибо, что помогает. FCS не привязан к объекту окна. Я могу сделать это в index.js, но это, похоже, не так, как полагают, делает это как загрязняющее глобальное пространство имен .... – Mark

@Mark, так вы это делаете. Либо вы прикрепляете его к «окну», чтобы использовать его глобально, либо нет, и у вас нет доступа к нему по всему миру. Это одно или другое. Не загрязнение глобального пространства имен обычно является хорошей идеей, но если вы ожидаете, что сможете называть 'new FCS()', то вы неявно ожидаете, что 'FCS' будет частью глобального пространства имен. Если вы этого не хотите, не пытайтесь вызвать 'new FCS()' в глобальном контексте. Вместо этого сделайте это из кода, в котором вы «нуждаетесь», в модуле «FCS». –

Спасибо, @JoshBeam - это было действительно полезно. Прикрепление объектов к объекту окна вообще не обсуждается в документации. Один вопрос, хотя ... возможно, можно прикрепить функцию «require» к объекту окна, чтобы можно было сделать «FCS = window.require ('./ fcs');' вне контекста 'bundle.js '? Это кажется более общим решением - только одно приложение, прикрепленное к «окну», вместо этого для одного из каждого модуля, который вы можете использовать. Я боролся с этой проблемой дома - я попробую это позже. – Kryten

Проблема в том, что ваш встроенный скрипт (в index.html) ожидает глобальная переменная FCS существовать (если вы new FCS()). Это не так, потому что в index.js ваша переменная FCS привязана к этому файлу.

Вы должны написать все свои скрипты в отдельных файлах и расслоить их все с помощью браузера, избегая встроенного скрипта или сделайте FCS глобальным, присоединив его к window.

источник

2015-07-20 17:04:57 spinningarrow

Итак, что бы я сделал с index.js, чтобы получить доступ к FCS()? Если я делаю «window.FCS = FCS;» он работает, но вы предполагаете, что это неправильно .... – Mark

Josh Beam в значительной степени охватил его в своем комментарии. – spinningarrow

@ Ответ JoshBeam верен - для того чтобы разоблачить активы в пакете браузера, вам необходимо прикрепить что-то к объекту window. Но вместо того, чтобы разоблачать конкретные активы, я хотел чего-то более общего.

Вот что я сделал:

в моем app.js

require('this') 
require('that') 
require('./modules/mycode') 
... 

window.req = require

И в моем <script> тег в моем HTML:

something = req('./modules/mycode')

Обратите внимание, что, вместо того, присваивая функции require непосредственно window.require, я дал ему другое имя. Причина этого проста: если вы ее назовете window.require, вы переписываете оригинал require, и вы окажетесь в бесконечном цикле рекурсии (по крайней мере, до тех пор, пока в браузере не закончится пространство стека).

источник

2015-08-13 14:07:59 Kryten

Использование пакета NPM в браузере с Browserify

ответ

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