Использовать модули браузера в javascript
Я новичок в javascript и сталкиваюсь с некоторыми проблемами при работе с модулями npm на стороне браузера. Может ли кто-нибудь, пожалуйста, направить меня в правильном направлении?
У меня есть структура модуля, что-то вроде
add.js
function add (a,b) {
return a+b;
}
module.exports.add = add;
multiply.js
function multiply (a,b) {
return a*b;
}
module.exports.multiply = multiply;
У меня есть потребительский модуль с именем calculator.js, который выглядит следующим образом:
var adder=require('./add');
var multiplier=require('./multiply');
console.log(adder.add(1,2));
console.log(multiplier.multiply(1,2));
function sum(a,b){
return adder.add (a,b);
}
function product(a,b){
return multiplier.add (a,b);
}
module.exports.sum = sum;
module.exports.product=product;
Когда я делаю 'node calculator.js', я получаю 3 & соответственно.
Теперь я хотел бы использовать этот модуль калькулятора в моем браузере. Итак, я сделал следующее:
- browserify calculator.js> cal.js
- Создан HTML-файл
<html>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.js"></script>
<script src='cal.js'></script>
</body>
</html>
- Это печатает 3 и 2 на консоли.
- Однако я хотел бы использовать методы калькулятора, выполняющие
<script>
var cal=require('cal');
</script>
Это выдает мне ошибку, говоря
Имя модуля "cal" еще не загружено для контекста: _. Используйте require([])'
Есть идеи, как мне это запустить? Заранее спасибо за помощь.
1 ответ
Вам не нужно require.js
для этого.
Вместо этого вы можете сказать Browserify сделать calculator.js
модуль доступен для require()
, Это также сделает require
функция, доступная для использования в браузере:
$ browserify -r ./calculator.js:cal > cal.js
Чтобы использовать это в браузере:
<script src="cal.js"></script>
<script>
var cal = require('cal');
...
</script>
Больше информации здесь.