Right now I am following a Mojs tutorial, and, having played a little bit with it, I figured out that installing and uninstalling Mojs through npm install and npm uninstall, respectively, doesn't make any difference - if I have a hyperlink
<script src="http://cdn.jsdelivr.net/mojs/latest/mo.min.js"></script>
in my html file, the script works, if I remove it - it stops,no matter if I have Mojs installed through npm. How to make any sense of it?
Node is just a javascript runtime. You use it to run Javascript code outside of the browser. It doesn't automatically put any script files in your html. Node Package Manager (npm) is a helpful tool for getting packages and modules, such as Mojs, but they have to be 'required' in a seperate js file either by using require or import
If you've ever used Python, think of Node as Python and npm as pip where you have to run pip install before you can 'import' the module.
Using node you can run any js file by typing node file.js similar to how you would run a python script using python file.js.
When you install a package using npm install a node_modules directory is created and a whole bunch of (usually) javascript files are installed there under a folder of the name of the module, so if you want to manually include the files, you should look there to find it.
I suggest this introduction to Nodejs.
The script tag that you posted is using a url to a cdn (content delivery network (I think)). This means that when it tries to load the script tag, it looks at the url, then fetches the data from the cdn server and returns it to the browser.
The files you are installing via npm are generally not available to your front-end code unless you are using something like webpack or browserify. They will bundle all of the files you are using from node and allow them to be available in the browser.
So, yes, it does make sense that you installing or uninstalling that package is not affecting the app.
Related
When I install a JS library with npm, say:
npm install chartjs
It places the required JS file in ./node_modules/chartjs/chart.js.
Since I want the file to be located in, say, ./public/js/chart.js, I could just copy and paste it there. But is there a proper way to do that, like linking directly to the file installed by npm ?
Thanks in advance for your help. (Yes I'm kind of new to JS...)
In general, if you are using npm to manage your dependencies then you would use a bundler (such as Rollup, Webpack, or Parcel) to combine them into a browser-friendly file in your distribution directory.
MDN has a tutorial which walks through setting up a basic project in Parcel.
If I'm developing a library which work is based a lot around of current working directory and the filesystem generally, a lot of paths resolution, and I want to see how it will behave when will be installed as a node module, I don't want to get unexpected results when I'll upload it to the npm. How do I test my library behavior pretending it's a node module? Is placing its folder in node_modules enough?
Make a local package and install it everywhere:
$ npm pack
it will generate a zipped file, so you can copy somewhere and install it.
// another project
$ npm install /path/to/pack
Resources:
npm pack,
Add local package
Absolutely you can use npm link too. link
I am relatively new to using git and GitHub, and I am working on my personal website. I am using the JS plugin Slick, a responsive carousel feature. I downloaded all of the necessary files and stored them within my local repo. The size and content of the Slick zip folder is much larger than the files for my site at the moment, so when syncing with GitHub this makes my project appear as 75% Javascript, whereas the actual website is not.
Am I doing this correctly, storing the files for my JS plugin directly within my repository folder? Or should I be using some other method to implement Slick on my site? Or is this just something I should not be worried about? Thanks
If you're just using one library, manually storing it in your Git repo is fine. You'd have to manually update the files if a new version is released, but that's not a big deal for one library. (And you might not even care about updates to this library).
However if you're using more than one library, I'd highly recommend using Node Package Manager (NPM) and a build tool like Webpack.
Here's an article that introduces these tools (plus a few others): https://medium.com/front-end-hacking/what-are-npm-yarn-babel-and-webpack-and-how-to-properly-use-them-d835a758f987
For using git, you should store your dependencies in a folder that is in your .gitignore. If you install browserify or another similar tool like webpack, you can use the npm package manager to create a dependency list file with npm init that allows for easy package installation with npm install by anyone. You can install packages slick with npm install --saveslick-carousel and use them with require() in your main js file. Then, take your js file and run browserify jsfile.js -o outputfile.js and it will package your js and your dependencies together to be used by the browser
When uploading to your git repo, add a .gitignore like this one for Node. This prevents your dependencies from being uploaded to the repo and instead when someone wants to run your project, they must run npm install to get all the dependencies.
Browserify gives an output JS file you add to your web server, the name of this file should be put in your .gitignore as well. Your code is stored in the js file you pass to browserify and other people can still access it without the output file, but they need to run the browserify command to package your code.
I'm trying to follow this page https://github.com/feross/simple-peer
1) Install npm simple-peer (check)
2) create an html page: bundle.js is missing?
3) the next code window doesn't indicate what it is at all.
Is it the JS for the html file, or the code in node. no idea.. as browserify (if I understand correctly) allows you to use require() in the browser...
Can someone clarify?
The document given is a little incomplete and assumes you have knowledge of module bundling, which many people dont. Anyways, to get this working, you would have to use a module bundler (like browserify or webpack).
To get started, consider bootstrapping your app using this yeoman generator.
After bootstrapping your app, add the script given in the above documentation in the source file (in src/index.js), after installing dependancies with npm install
Run npm start
Open localhost:8080 and you should see the result you want.
bundle.js which is mentioned the the above module is the resultant javascript file after all node modules have been bundled into one browser compatible file.
I'm sorry if this doesn't count as a "Programming Question" but I found it relevant since this will make me able to do programming in the Podio API.
My question/problem is that I can't figure out the correct way to set up the Podio JavaScript SDK/API scripts. I followed "http://podio.github.io/podio-js/" but it really only explains so much.. Mostly about Node and that I need to use Node for it, but isn't there another way like simple Ajax calls?
Reason being, I don't have the possibility of running a Node server in my server background, just to make API calls, it may be effective but it sounds kind of stupid when so many other API's out there doesn't require this.
Thoughts?
podio-js is a Podio JavaScript SDK for node and the browser.
... which means you don't necessary need Node.js. To use NPM module in the browser you'll need a bundler, like Webpack:
npm install podio-js --save
npm install webpack --save-dev
Then in your app.js:
var podio = require('podio-js');
// follow the tutorial
To bundle the app:
./node_modules/.bin/webpack app.js app.bundle.js
Then include the bundle in your HTML via script tag and voilà:
<script src="app.bundle.js"></script>