Load JavaScript file inside another JS file - javascript

I'm using node.js and socket.io and doing a server/client thing. On my Server, is since its' not on a webpage, is there a way I can load the latest file (or latest jQuery?) so I can use jQuery functions inside my Server js file.
I tried doing npm install jquery then drag the jquery folder into my node_modules folder onto my website. Then at he top of my file I put var $ = require('jQuery'); and then I run it and I get the error Cannot find module 'location'
Thanks

I was getting this same issue. I created a small test applications (with express), installed jquery afresh and things started working.
Checking my initial project a couple of changes seemed significant
I did an npm unisntall for jquery and jsdom
I did an npm install jquery (note, lowercase)
I changed my require('jQuery') to be require('jquery') (again, lowercase)
I think the significant part was removing and reinstalling jsdom and jquery but the others then were required to get things working again.

Related

NPM Jquery Client vs Server Side

I am fairly new to node and npm so this is a theoretical question.
I want so start using Jquery on my websites, so I did npm install jquery and this created a node_modules directory inside my webpage directory along with my html, js and css files.
In order to make it work I had to add the following in my head tag in html <script src="node_modules/jquery/dist/jquery.js"></script>
Question 1) Why npm installed node_modules directly into my directory? I would assume it would install it in my global directory usr/local/lib/node_modules
Question 2) If I would host the website somewhere else this would not work correct? I assume this method only works on client side.
Question 3) How would I have to setup my html or js in order to import jquery?
Apologies if this is a stupid question, but I'm trying to understand the mechanics of what I program.
Why npm installed node_modules directly into my directory? I would assume it would install it in my global directory usr/local/lib/node_modules
npm is designed to manage dependencies for a project. While you can make it install modules globally, this is really only intended for whole applications that are distributed via NPM.
If I would host the website somewhere else this would not work correct? I assume this method only works on client side.
The src attribute needs to be a URL that resolves to the script file. If you don't upload the script to the right place then it won't resolve.
How would I have to setup my html or js in order to import jquery?
With a <script> element.
Note that npm is not very good at managing dependencies for a client-side JavaScript project by itself. It only becomes useful when combined with a module system and a bundler such as browserify.

Import local JS files into Meteor

I'm having terrible problems when trying to import an external JS project into my meteor folder. This is the project I'll like to use: http://www.outsharked.com/imagemapster/default.aspx?demos.html#beatles
As you can see, it is necessary to import two scripts. The first one is JQuery, and that was easily solved by adding it with meteor add jquery.
The problem came out when I tried to import the second script. I'm not sure how I can use it because, as far as I know, on meteor you cannot just import your script into the head section. For that reason, I've created a new template that is rendered and I put the code in there, but nothing happenend. Later on I've created an event that calls the JS when the image is clicked but without any success.
My question is, Which is the correct way to import a local JS code in meteor as in HTML is done with:
<script type="text/javascript" src="../dist/jquery.imagemapster.js"></script>
Since jquery-imagemapster is available as an npm package you can do:
$ npm install jquery-imagemapster
In your project directory and make it available to your project that way.
In early versions of Meteor packages were only available via atmosphere and $ meteor add. Later they added npm support and all npm packages became available.
Prefix npm installs with “meteor” -> “meteor npm install —save ‘js file’. Initializing will be the same as it would be in any other front end environment as will importing it. If you’re having trouble after that, check for it’s existance in your browser console and work from there using its built in properties and methods.

How do I install and use Vue.js with Sails JS?

I've built my website's backend already via Sails JS and now I want to integrate Vue.js in to my project. I've installed Vue and VueResource via npm install --save and I've created an app.js file in my assets/js folder.
However, when I require Vue and VueResource in my app.js file I get these error messages in Chrome:
app.js:1 Uncaught ReferenceError: require is not defined
localhost/:57 Uncaught ReferenceError: Vue is not defined
I'm new to JavaScript so all I can figure out about this is that the Javascript isn't being built or something similar since require is a Node feature. How can I get my server to build the app.js file so that it functions on the client side? I can barely find any information on this via Google that explains it in a way that a beginner can understand and they seem to just skim over the entire installation part.
Installing and using Sails-Webpack fixed the issue.
yes.. there is no require global function in browser, you have to include the vuejs manually via script tag.
Simply download and include with a script tag. Vue will be registered
as a global variable.
That what the doc said.
If you really want to use require function like you've done on server side, you can use module loader like requirejs
As others have said, require is not a native JS function. You need to compile the JS with something like Gulp or Grunt (I'd suggest Gulp). If you want an out of the box solution try https://laravel.com/docs/5.2/elixir as it has a number of pre-built build scripts (one being for Browserify)

NPM modules in Grunt based projects

Node has a simple module loading system which uses require() method call to load modules from different locations in the root folder.
E.g.
var qr = require('qr-image');
I am trying to do something similar in grunt but i am unsuccessful with that.
I had added this module to package.json file in the following fashion and then ran npm install at root directory of the project.
"devDependencies": {
.
.
.
"qr-image": "^2.0.0"
},
Now whenever I use require I get the following error on console and my code breaks.
ReferenceError: require is not defined
Please suggest as how to use the npm module in Grunt based project, Thanks.
The require function isn't available in web browsers. Instead it's part of nodejs, which is a server-side language (e.g., something you might run directly from your computer terminal, not in a browser) and used to load dependencies in that language.
In a web browser, I usually just include my dependencies as additional scripts on the page, e.g.,:
<script src="path/to/my/dependency.js"></script>
<script src="path/to/my/code.js"></script>
Some other options are RequireJS or what's listed in this question or as more of a general purpose dependency manager for front-end code: Bower.
Looking closer at your question, it's likely that the "qr-image" npm dependency won't work in client-side code for you (since it was built to run via node in server-side code).
A quick search for QR code client-side code brought up this SO post, which points to the QRCode.js project for client-side QR code generation—I haven't used it, but it looks like a step in the right direction for what you're working on.

How can I add third-party JavaScript libraries to a Meteor application?

I want to add a JavaScript front-end plugin, like jquery.center.js, to a Meteor app.
If I put it in my app/ directory and refresh the page I get this error:
Your app is crashing. Here's the latest log.
node.js:201
throw e; // process.nextTick error, or 'error' event on first tick
^
ReferenceError: jQuery is not defined
at app/jquery.center.js:43:1
at /Users/crapthings/Desktop/app/.meteor/local/build/server/server.js:111:21
at Array.forEach (native)
at Function. (/Users/crapthings/Desktop/app/.meteor/local/build/server/underscore.js:76:11)
at /Users/crapthings/Desktop/app/.meteor/local/build/server/server.js:97:7
Exited with code: 1
Your application is crashing. Waiting for file change.
You are putting jquery plugin javascript file in app folder directly,so that javascript file will be be loaded for client as well as server.
As per Meteor documentation:
Client loads javascript from: project/public and project/client
Server loads javascript from: project/public and project/server folders.
As of v1.0, Meteor is using jQuery internally in the client, so you can use your library directly without adding jQuery. However, it's recommended that you add jQuery to your Meteor project explicitly:
meteor add jquery
The Meteor docs explain in depth how JavaScript files are loaded and where static assets should go (CSS, images).
See also how to repackage an existing library for Meteor.
Put it inside the client folder such that it is only loaded on the client, no need for jQuery on server.
One way to do this in MeterorJS 1.3.x
Add the JS files in the public\js\ directory
Load it up from Meteor.startup method using $.getScript in client/main.js
If you want to control script load sequence, control with multiple $.getScript for each js files.
Meteor.startup(function(){
$.getScript('js/fhir-client.js', function(){
// script should be loaded and do something with it.
});
});
Starting with Meteor 1.3, you can add 3rd party JavaScript libraries to a Meteor project directly via their npm package:
meteor npm install --save moment
Both server-side and client-side package work without modification because Meteor's ES2015 module system takes care of creating a Node-like environment in the client much as browserify or webpack do.
If an npm package happens to not function correctly, look for a wrapper on Atmoshpere. Atmosphere is Meteor's official 3rd package repository, but less and less relevant after Meteor v1.3. It will eventuall be phased out.
History
Before Meteor 1.3, you had to repackage 3rd party libraries for Meteor. A tool called Autopublish was developed to automate the process. After the Meteor Development Group stopped offering free hosting at meteor.com, Autopublish was discontinued.

Categories

Resources