Ankur Bhatia
Ankur Bhatia

Reputation: 1138

Loading modules with require in Cordova

I am new to javascript trying out cordova which heavily makes use of the module require(). I went through some tutorials for this like here . I tried out a very simple example from this tutorial and there is something missing it seems.

This is my html code.

 <script>
 var abc = require("js/greeting.js");
        function mod() {
            try{
                
                var g =  abc.sayHelloInEnglish();
            console.log("reached the call");
            document.getElementById("modl").innerHTML = g;
            }
            catch(err){
                console.log("error is" + err.message);
            }   
        }
    </script>
    <button onclick="mod()">click</button>

This is the code for my greeting.js

  //var exports = module.exports = {};
     
exports.sayHelloInEnglish = function() {
    return "HELLO";
};

exports.sayHelloInSpanish = function() {
    return "Hola";
};

When I click on the button click, it gives an error that abc is not defined. Is there something I am missing here to use the module? Thanks a lot.

Upvotes: 6

Views: 10011

Answers (4)

jose
jose

Reputation: 39

You could use define in require.js is a way of passing a function or the result of. I was struggling with cordova cause one needs to be very carefull the Code needs to be clean. Define will help you if you only need to put your result as a object or anything inside the defined function and call it at a later time.

// obj.js script
define(function(){
{name: "joe",
lastname:"doe"}
})

In the other script you only require the file and pass it to a variable. I guess you could even get rid of the inner brackets in obj script.

//other.js
var string = require(["obj"])
console.log(string.name) // joe

Upvotes: 0

Now you can use this npm package https://www.npmjs.com/package/cordova-import-npm

Import files from npm packages into your cordova www/ directory automatically, upon cordova prepare, cordova build or cordova run, and before anything else is processed.

Oftentimes we want to import the latest files available in npm packages into our www/ directory in cordova projects. With this module you can do it automatically without building your own scripts.

Upvotes: 0

zag2art
zag2art

Reputation: 5172

Actually module.require is not for browser. You can't use it like you do right inside script-tag. The require is for node.js (server-side javascript).

If you want to use it inside a browser you should use preprocessing. For example you can use browserify.

To learn more - great 3 min video CommonJS modules

Upvotes: 5

Trott
Trott

Reputation: 70075

You cannot use require/module.exports natively in the browser. It is built into Node.js/io.js and can be run on the server.

If you want to use require()/CommonJS modules in the browser, look at RequireJS.

If you want to run Node/io.js code in the browser in general (including but not limited to require()/CommonJS), look at Browserify or webpack.

Since you say you are using cordova, my guess is that you don't really need require() at all. Just write your HTML/CSS/JavaScript like you would normally and use cordova to package it up. cordova uses require() a lot but that should not affect your app's code.

Upvotes: 3

Related Questions