hello how do you access variables in bundle.js?
I am trying to make a client side javascript and play around with variables and functions but am having trouble calling them in index.html, chrome-console.
I use browserify to bundle my script.js into bundle.js (which helps me with 'require' which the browser does not recognize), however when I try to access variables or functions defined in the script.js, now bundle.js I get e.g. Uncaught ReferenceError: xx is not defined
Any help? Or am I not allowed to use node packages on client side html/scripts?
edit: did a bit of googling and came upon this guy who says I should use XHR / AJAX "require" is not defined error- javascript
edit2: window.xx = xx seems to be a temporary solution
Correct me if I'm wrong, because I have not used Browserify (I've used other bundling/processing tools), but to my understanding, Browserify bundles up all the code from the original source file into a bundle.js file. Within that bundle.js is a scope that is not accessible from the outside (unless specifically exported perhaps, but that's another story).
So for example:
// source.js
var test = require('./some-file-with-an-empty-object.js');
// Pseudo code example of bundle.js
;(function(){
var test = {};
})();
Because of this IIFE, the scope var test is limitted and not accessible to external scripts or window.
So in short, do what you need to do within your source file, not outside of it.
Related
I'm working on a project where the environment (Moodle) doesn't support ES6 Harmony Modules correctly in all the recent browsers (looking at you Safari!). I have defined a lot of helper functions in a common.js file and the rest of the code in the router.js file, both of which are loaded using <script> elements in the html. As a result if I define a function called say loadData() in the common.js file and use it in the router.js file I get the linter error 'loadData' is defined but never used in the first file and 'loadData' is not defined. in the latter!
Whilst I could disable some of the ESLint rules they can be valuable in spotting issues. Is there a way to modifying my .eslintrc.json file so that ESLint is aware of these functions?
Maybe just define them as global in eslintrc.
I have a frontend in HTML and JAVASCRIPT. I need to get value from nodejs file and display it in HTML label. So I create new node js file node.js as:
const Web3 = require('web3');
const web3 = new Web3('https://kovan.infura.io');
web3.eth.getBalance('0x9E632F36D8193a23ee76e7C14698aCF4b92869A2').then(console.log);
I include this file in script tag as:
<script src="node.js"></script>
First I want to look output in the console but it is giving an error
Uncaught ReferenceError: require is not defined
So, I try this code directly in HTML file within the script tag without including node file but still gives the same error.
Can somebody help me with this? I am new to use all this together.
Somehow, I managed to find a solution. I used browserify, which makes easy for me to run the nodejs code from my web app.
Browsers don't have the require method defined, but Node.js does. With Browserify you can write code that uses require in the same way that you would use it in Node.
browserify will recursively analyze all the require() calls in your app in order to build a bundle you can serve up to the browser in a single tag.
I referred this link: http://browserify.org/
I am using protobuf.js in an ionic2 project. I have a valid .proto file which I first convert to a static javascript file by:
pbjs -t static databaseapi.proto > databaseapi.js
Becasue ionic2 uses typescript, I add a d.ts file by doing:
pbts databaseapi.js > databaseapi.d.ts
my application transpiles and runs, but I end up with a runtime error:
Runtime Error $protobuf is not defined
I know it is because the compiled protocol buffer file references the variable $protobuf, but I don't quite know where this variable is defined. I also don't know how to include the missing file because it needs to be referenced by the js file rather than the ts file.
-t static just creates the raw code but doesn't wrap it as a module (and thus does not define the $protobuf dependency).
To also wrap it as a module, use -t static-module and pick your desired format through -w default|commonjs|amd|es6. default uses an universal wrapper that works with AMD, CommonJS and a global variable.
For all command line options, see: https://github.com/dcodeIO/protobuf.js#command-line
Thanks dcode, I ended up doing it a little differently. To others reading this, the solution is Ionic specific, please see the answer by dcode for a better generic solution.
What I ended up doing, was adding a reference to the compiled js file to Cordova's index.html as follows:
<script src="lib/protobuf.js"></script>
<script>$protobuf = protobuf;</script>
<script src="js/databaseapi.js"></script>
<script> $database = $root.com.database.api.v1; </script>
databaseapi.js is the name of the compiled protobuf file.
I am fairly new to Node.js and I want to load a few javascript files in the browser but I can't seem to find anywhere how I can simply get libraries to be loaded inside the browser.
So, my question is, how would I be able to load javascript libraries client side with Node.js?
I'm fairly new to node as well, but I've been using browserify to deal with node packages. There are a quite a few node packages that won't work in a browser - if they will work in a browser they will usually say it in their description.
Browserify is really easy to use - you just require() a module just as you would when writing a non-browser script (as far as I can tell). When you're ready to test the script on a browser, you just run
browserify input.js -o output.js
and it pulls all of the dependencies from your require()'s into output.js, so then your require()s actually reference what you want it to.
--Updated for new comment--
As I see in your answer, you are talking about node.js packages? I am
talking about standalone random javascript libraries (so, for example
just one of my own js files that I want to load client side). Can you
also load random javascript libraries with browserify? (I googled a
bit but can't figure that out)
Yeah, you can do that; although I'm afraid I can't help you with the technicalities of it (like I said, new to it myself). Here's an example:
Bar.js (my library)
module.exports = bar; //tells node what to export in this file
var bar = {
message: function(msg) {
console.log(msg)
}
}
Foo.js (my script)
var bar = require('./bar');
bar.message("foo"); //logs "foo" to console
And keep in mind that require() refers to a file. So Bar.js would need to be in the same directory as Foo.js. If Bar.js was in a different folder, you would just do require('./folder/bar'). To tie it all together, you would run browserify on Foo.js, and it would automatically grab Bar.js' contents.
There are a lot of different ways you can define exports, so you'll need to google around to see exactly how to do it for how your lib is formatted. But that's the gist of it.
After reading all the relevant answers in SO and posts in the Appcelerator forums I still can't get this to work:
I have an application developed in Appcelerator, and I want to load an external JavaScript file in some of my controllers.
My App structure is as follows:
+ app
- assets
- controllers
- models
+ lib
- IndicatorWindow.js
...
Inside a controller I have the following code:
var uie = require('lib/IndicatorWindow');
But when I run this on an Android phone I get:
Uncaught Error: Requested module not found: lib/IndicatorWindow
I have also tried placing the lib folder outside of app, and using other paths such as /lib/IndicatorWindow and app/lib/IndicatorWindow.
I even tried using Ti.include() instead, with the same result. But I would rather use require() since I prefer using CommonJS modules.
Make a lib folder inside assets folder and paste the js file there and you would be able to require file just like you do in classic :)
Thanks
just use var uie = require('IndicatorWindow');
Also make sure it uses exports inside the JS