I am quite new to node_moduels.
For instance, say you have this structure:
The app directory
your_app/node_modules/your_module
your_app/app.js
The module directory
your_module/index.js
lib/a_file_you_require_in_index.js
When you require the file inside the index.js. How do you make sure the path is correct, when the code is executed inside the app.js file, where the module is required?
your_module is a npm module
Related
I have my folder structure set up like this:
assets/
logo.png
other_web_assets.png
electron/
node_modules
main.js
package-lock.json
package.json
src/
index.js
otherJavascriptFiles.js
index.html
style.css
The reason I've separated ElectronJS from the website is that the website is intended to be served via HTTP (it's not supposed to work without Electron though, I only need the HTTP protocol for Firebase Authentication). Currently I'm serving index.html via the LiveServer VSCode extension on port 5500.
In my index.html I'm using require("./src/index.js") to load index.js, and in the index.js file I use require to communicate with the other javascript files and other node modules.
However, the require("./src/index.js") doesn't work from index.html, I always get the error Uncaught Error: Cannot find module './src/index' in the dev tools console.
I've tried importing index.js with <script src="./src/index.js"></script>, but that results in the same error, with a different javascript file that my index.js tries to import using require.
I can however require normal node modules (for example require("request")) without any errors.
Is there any way to fix this?
To import functions from a js file I use
import {functionName} from 'path to js file where function is defined'
I use Require for pictures, etc. but not for js files.
I suggest you to use import. Also, define the functions you need to import into other files using the word export
I'm new into webpack, and I'm having an issue trying to resolve a subdependency.
I'm importing a dependency that is trying to require a module from a specific folder (not the node_modules) (let's call it subdependency). That folder contains two files:
subdependency/package.json
subdependency/build/Release/addon.node
subdependency/lib/src/index.js (this index.js requires the addon.node)
I'm using webpack, and when importing my dependency it was not able to find subdependency.
The subdependency is there but it was not accessible. I added a loader for loading .node files https://www.npmjs.com/package/native-ext-loader and it was still not working; trying to identify what was happening I modified in my build the require path from ./subdependency to ./subdependency/build/Release/addon.node and the file was accessible (so I guess the native ext loader is working fine, but it's not loading other files like the index.js).
I think the problem is that webpack is not able to understand that ./subpdendency is a module, or that I'm not loading it correctly.
Any suggestion or idea is welcome!
I resolved the issue by forking the dependency and switching from node-pre-gyp to prebuildify, since node-pre-gyp doesn't works fine with webpack.
I'm using Browserify to access a Node module from an index.html file (hosted on Google App Engine)
I import the module in a "main.js" file, as I see is the standard in the Browserify documentation, as follows:
var request = require('request');
var fs = require('fs');
I then bundle this up into a bundle.js file using the following command:
browserify main.js -o bundle.js
This successfully produces the required bundle.js file. I then include this at the top of the header in my index.html as follows:
<HEAD>
<script src="/scripts/bundle.js"></script>
<script src="/scripts/util/loader.js"></script>
<!-- More scripts below here -->
A script within the body of index.html then makes a call to a function within loader.js which uses the line
request('api.my-url.com/world').pipe(fs.createWriteStream('/resources/myMap.json'));
Which I use to attempt to create a file containing the contents of the response. However, when I deploy this on GAE, and access index.html, I am greeted by the error message:
loader.js:15 Uncaught ReferenceError: request is not defined
at loadWorld (loader.js:15)
at Object.create ((index):55)
If I try and move the request() call up into the script in index.html I get the same problem, but if I move the line into main.js, I no longer get this issue.
I assume this is down to a personal misunderstanding of Javascript, but I can't seem to figure out why the request object is not available in index.html after bundle.js has been included in index.html via a script tag.
Many thanks to anyone who can shed some light on the situation, thanks.
When you create a browserify bundle, it is intended to be the application's "entry-point". But it seems that here you have your entry-point in index.html, so what you want is to bundle a standalone library.
Browserify has an option called --standalone to do this, which generates a UMD bundle instead: https://github.com/substack/browserify-handbook#standalone
You invoke it in much the same way, but specify what name (in the global namespace) the UMD bundle should be given. Eg.
browserify foo.js --standalone mylib > bundle.js
Now when you include <script src="bundle.js"></script> in your html, subsequent scripts will have be able to reference the mylib object.
Here's an example of using the --standalone option:
https://github.com/joshwnj/react-visibility-sensor/tree/master/example-umd
https://github.com/joshwnj/react-visibility-sensor/blob/master/package.json#L9
Also, if you want something like request that can be used in the browser, https://www.npmjs.com/package/xhr has a very similar API.
In https://github.com/socketio/socket.io/blob/master/test/socket.io.js
The code:
What is the module name to require?
It requires the module from the parent directory - in this case, socket.io
A folder can be used as a module if that folder contains, index.js or package.json files etc.
So in this case it is requiring the socket.io.js file in the above folder.
Also if a package.json and index.js file are in the same folder the package.json will get look up priority.
I am totally new to NodeJS and I wonder what's the difference between those two.
For example, in this project (https://github.com/fikriauliya/hipku), we have index.js and dist/hipku.js. They are similar except the last line:
module.exports = publicMethods; vs return publicMethods;
I guess dist/hipku.js is generated from index.js? How is it generated and why does it need to be generated?
Things in the dist folder are usually the product of building from index.js in this case. You'll notice it gets minified, and that folder would eventually be used on production sites. If you look at the package.json file, you'll notice that index.js is the main file, so if you're doing any edits, that would be the place to do so.
It depends on how you want to use this package, in browser or server side.
server side
index.js is the entry of NPM package. When you do require('hipku'), actually NodeJS locates the file module node_modules/hipku and run index.js ends up with the object adhere to module.exports
browser
Just load dist/hipku.js into your browser by <script>, it will register hipku into your global namespace, then you can use it's API.