I made 4 javascript files, A,B,C,D, and they will export 4 modules A,B,C,D. Their dependency is A->B->C->D. I key in the command
browserify A.js -o bundle.js
and a bundle file include A,B,C,D is created. In the html file, i got
<script src="bundle.js"></script>
<script src="client.js"></script>
inside the client.js, i got
var a = new A();
the console will print an error that A is not defined.
However, the client.js will work if i delete the 'require' and module.exports on all js file and do this in html file
<script src = "D.js"></script>
<script src = "C.js"></script>
<script src = "B.js"></script>
<script src = "A.js"></script>
<script src = "client.js"></script>
Does anyone have any idea about this issue?
You have to create a standalone bundle which will add a variable to the global execution context, this is done with the --standalone <name> option
browserify A.js --standalone A -o bundle.js
Besides the standalone option that Mauricio proposed, you can also have browserify create a require function so you can use the require function in the browser.
browserify -r ./A.js:a_module ./B.js ./C.js ./D.js -o bundle.js
Then your client.js file can do this:
var a_module = require('a_module');
var a = new a_module.A();
This is the external requires option.
Related
I am using browserify to so that I can use the require feature in my javascript. I have a main.js that imports bigchaindb and bip39 using require.
const BigchainDB = require('./bigchaindb-driver')
const bip39 = require('./bip39')
I am using: browserify main.js -o bundle.js to generate the bundle.js file and I am ONLY including this in my index.html.
Last, inside of my index.html I using the onclick attribute to call a function createBook() and getting
createBook function is not defined
, however the function IS defined in my main.js. (Yes, the name is the same)
Index.html:
Script inclusion: <script src="scripts/bundle.js"></script>
onclick: <button id="sendButton" onclick="createBook()">Send!</button>
Why am I getting this error?
I have files as represented:
-js/
- calc.js
- tool.js
-index.html
calc.js is a node module of following structure:
module.exports = {
calculate: function() {...},
getPrecision: function() {...}
}
and tool.js use require and adds some functions, like that:
const fpcalc = require('./fpcalc');
function changeState() {
//some code using fpcalc
}
I used Browserify to generate bundle.js and added that as script src.
One of my buttons on HTML page is using onclick=changeState(). After clicking I'm getting
ReferenceError: changeState is not defined
at HTMLAnchorElement.onclick
Why is that? Is there any other way to make it work?
The function "changeState" is not exported in your tool.js.
That means it is only visible inside your bundle.js, but not outside.
Have a look at this: https://makerlog.org/posts/creating-js-library-builds-with-browserify-and-other-npm-modules
It shows you how to expose your code to the global namespace in javascript.
Here's a very simple way to make it work like you want.
const fpcalc = require('./fpcalc');
window.changeState = () => {
//some code using fpcalc
}
I have same error, here is my working example.
mac, browserify https://github.com/perliedman/reproject
Must use sudo install globally
sudo npm install -g brwoserify
https://github.com/perliedman/reproject
sudo npm install reproject // install locally is fine
Must manually create 'dist' folder for later output file use
Must use --s expose global variable function 'reproject' and or 'toWgs84' you will use later in browser js.
Without --s , will get 'reproject' undefined error . https://makerlog.org/posts/creating-js-library-builds-with-browserify-and-other-npm-modules
browserify --help will list all options.
-o means output file directory
browserify node_modules/reproject/index.js --s reproject -o node_modules/reproject/dist/reproject.js
HTML script tag include your above dist/reproject.js
Now, you will not get 'reproejct' undefined error
return reproject(_geometry_, ___from_projection, proj4.WGS84, crss)
my file are like avilabele this sturucture.
sample.js is root file and test.js is avilable in xx folder.
sample.js
var name={
h:14
}
module.exports=name;
test.js
var name=require('./sample.js')
console.log(name.h);
when a run test.js code using command prompt :
node test.js
it gives error like :
Cannot find module './sample.js'
When you require a file with a relative path, it is relative to the file doing the require (see here). In test.js, require('./sample.js') will look for /path/to/xx/sample.js. Use require('../sample.js') since it is in the parent folder of test.js.
var name=require('../sample.js')
console.log(name.h);
You are requiring module from the parent directory with ".."
I'm trying to add jquery functionality to a desktop app written in electron
Using the electron-quick-start repo i'm adding the downloaded jquery file to the main.html file like so:
<script> require("./jquery.min.js"); </script>
or so:
<script>window.$ = window.jQuery = require('./jquery.min.js');</script>
Then in the index.js file i'm adding code in the createWindow function, since that seems the proper place, but to be honest any place i try gets me the same error more or less.
mainWindow.$ is undefined and the same goes for BrowserWindow and app
mainWindow is defined inside the createWindow function like so:
mainWindow = new BrowserWindow({width: 800, height: 600})
and BrowserWindow is declared on top of the file like so:
const BrowserWindow = electron.BrowserWindow
Any idea where i'm going wrong, what declarations i should change/add?
Thanks in advance
While using electron, some additional symbols are also inserted into DOM causing problems. So, you can use jquery as follow
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" onload="window.$ = window.jQuery = module.exports;"></script>
Notice the code inside "onload".
When you call require inside index.js, or the main process, it's looking for the node module. So you'll need to install jQuery via npm and save it as a dependency in your apps package.json file.
npm install jquery --save
Then your index.js should theoretically see it just fine using
let $ = require('jquery');
mainWindow.$ = $;
Refer to the Node.JS section for installing jQuery. This is what Electron uses.
--
OLD ANSWER
Inside your main.html, just include the JavaScript like you would any traditional JS file.
<script src="./jquery.min.js"></script>
To integrate jQuery into your Electron Application follow these simple steps
Step 1: Run in terminal
npm install jquery --save
Step 2: Add this line to your angular.json or angular-cli.json file
"build": {
"options": {
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.js", //add this line
"node_modules/bootstrap/dist/js/bootstrap.min.js"
],
...
...
}
}
Step 3: Finally add this line to your index.html file
<!-- Need this for jQuery electron -->
<!-- Insert this line above script imports -->
<script>if (typeof module === 'object') {
window.module = module;
module = undefined;
}</script>
<!-- Insert this line after script imports -->
<script>if (window.module) module = window.module;</script>
</head>
You can also use this template
I have two files, one is a controller and another is a test for this controller, both are in coffeescript and are in the same folder:
The folder structure is:
-controller
--labels.controller.coffee
--labels.controller.spec.coffee
The labels.controller extract:
module.exports = {
getImages: getImages
}
I am trying to require it from labels.controller.spec to test it
I tried
labelsController = require('labels.controller')
and
labelsController = require('./labels.controller')
and
labelsController = require('/labels.controller')
But always there is an error like:
Error: Cannot find module '../labels.controller'
What I am doing wrong? Is any difference if you include a file written in coffeescript?
You need to compile it first with the coffee command. In your project source, run this command (assuming your project is written in coffeescript)
coffee -co output/ src/
Where src is your project folder. Then run the .js files in output with node.