Использовать модули браузера в 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 & соответственно.

Теперь я хотел бы использовать этот модуль калькулятора в моем браузере. Итак, я сделал следующее:

  1. browserify calculator.js> cal.js
  2. Создан 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>
  1. Это печатает 3 и 2 на консоли.
  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>

Больше информации здесь.

Другие вопросы по тегам