I am currently working on making a web extension application(chrome app) and I want to use npm in my application. When I want to use npm on my computer, I had to simply download and install it on my computer. But if I want to put it into my application, I am not sure how to include this.
Like bootstrap, do I need to include a min.js file such as bootstrap.min.js?
(what I want to do with npm is to make a crawling to happen using cheeriojs!)
Is there anyone who knows how to include npm in this case?
Thanks in advance!! Any advice would be much appreciated! :)
npm is a package management tool. It has no place being in a Chrome extension.
If you want to use packages from NPM in a browser extension, then you'll typically want to use a tool like Webpack to transpile them from module format into a single ES5 file.
Note, however, that cheeriojs is:
Fast, flexible & lean implementation of core jQuery designed specifically for the server.
… and since you want to run this in a browser, you should probably just use jQuery!
Related
I understand that when we talk about the frontend we're talking about files being served to the browser of the person accessing my page. So, frontend javascript libraries are only javascript code that is being sent from my server to the browser.
So far everything is fine, what I don't understand is why npm has repositories for frontend libraries. Let's take this Leaflet example, I can install this library with npm using npm install leaflet -s. But what would be the purpose of doing that? I see that if I open Visual Studio Code and I declare this library with const leaflet = require('leaflet') then I can see its functions and documentation in a more clear way on the suggestions after typing leaflet.... I don't think that's the purpose of installing a library like Leaflet on Node.js though (since it works only on the frontend). What am I missing? Why would anyone install frontend only libraries on Node.js?
There are likely other reasons, but this is they reason I've done it and the reason I've seen other people do it: Many people use Node.js tooling to bundle/build webapps, so you might install your frontend dependencies, and then use rollup or webpack or browserify or TypeScript tooling or whatever to bundle it into a single .js file. Since you're likely already installing the tooling with npm, installing the libraries also with npm means you don't need some other tool to do it.
Additionally, people also use npm to install libraries for electron apps, cordova apps, React Native apps, etc. And these things can all use frontend libraries because they basically have a web view embedded. (To be honest, I'm not sure that's the case with React Native because I've never used it, but I assume it is.)
Since you mention Leaflet specifically, here is an example of someone using npm to install leaflet, and then using browserify to make it so that they can basically write Node.js code (including require('leaflet') and run it in the browser.
I was wondering if somebody could help me with this issue, which hopefully will not be complicated.
I am running a project using Angular4, and I want to use this component.
https://www.npmjs.com/package/range-datepicker
I've tried to run bower install range-datepicker, but if then I use the <range-datepicker> tag in my project it won't recognise it.
In addition, I've added
"range-datepicker":"0.0.13"
to my package.json file, and running npm install it installs it and I can see the files in node_modules.
However, I still cannot use the <range-datepicker>, so I was wondering if someone can help me with this issue. I don't know if maybe I should add some script or style in my angular.json file
That library does not provide an Angular component, but rather a WebComponent.
WebComponents are usable in Angular, but you need to take care of a few extra things.
I suggest that you look for documentation on using WebComponents in Angular.
Here's one link to get you started: https://www.sitepen.com/blog/2017/09/14/using-web-components-with-angular/
For my understanding, node.js is a javascript-engine which is running javascript-code without using a browser(window-global). You can use javascript on a server. But I saw now a lot of tutorials(react, angular, vue etc.). In every tutorial, I have to install something with npm. I can follow there are several dev-tools which I can use on my local machine to minimize my javscript-files or compile sass to css. But in the end, when I put my files on a webserver, I just have normal javascript-files, css-files etc. No node.js code in it, right?
My question is: React, angular, vue.js etc. are written in just normal javascript without node.js right? The reason why I use npm ist just to install every dependencies with one command, right?
A question more: Is there an any recommended order to learn all these frontend-development stuff? There are so much words I have to google it: angular.js, react, vue.js, vanilla.js, typescript, backbone.js, bower, grunt, webpack, yarn etc... I dont know where I start, so I look into few tutorials, but everytime I go through these tutorials, there is a new word(technology) I have to research.
I think you're getting your terminology a little muddled.
Node.js is a JavaScript runtime, built on Google Chrome’s V8 JavaScript engine. However, that is not to say that Node programs are executed in a browser. They aren’t. Rather, the creator of Node (Ryan Dahl) took the V8 engine and enhanced it with various features (such as a file system API and an HTTP library) to create a program we can use to execute JavaScript on our computers.
Node comes bundled with a package manager called npm which you can use to install packages (such as React and Angular) from the npm registry. These packages are indeed written in normal JavaScript (or a language that compiles to JavaScript, such as TypeScript).
The reason why I use npm is just to install every dependencies with one command, right?
Kinda. You can certainly use npm to install dependencies. However, it does a lot more that that. For example you can use npm scripts to carry out various build tasks, or you can create a package yourself and use npm to publish it to the registry.
A question more: Is there an any recommended order to learn all these frontend-development stuff?
As with everything, it depends. What are you trying to build? It's relatively pointless to learn about Node, npm, React and Angular if you are attempting to build a simple static website. If I were you, I'd define a clear goal and set about learning the technologies you'll need to reach that goal. Saying that, if you are doing anything with front-end development, learning about npm will be a good use of your time.
Here's an article by way of further reading that explains things a little more: https://www.sitepoint.com/an-introduction-to-node-js/
I am using Express with Jade and I installed backbone.js and jQuery via npm. Do I copy the appropriate js files into my public/javascript folder or will Jade understand if I use require() inside the view template file?
Please steer me in the right direction.
Thanks
Anything installed with the package manager is available by require(). If you're trying to use the libraries to be rendered client-side, then you shouldn't be installing them server-side.
As hexacyanide says, Anything installed with the package manager is available by require().
If you want to use packages installed via npm in the browser, you may want to take a look at browserify. Although I'd recommend to at first simply using the files provided on the backbone and jQuery websites. It's less to learn.
NPM is only for server side JavaScript packages.
If you want to manage your client side libraries with a package manager take a look at bower, which shares some concepts of NPM, but for the client side.
I'm putting together a module I'd like to release, but am a bit stuck on how best to go about packaging it up. In addition to server side javascript, the module will need things like an admin screen, and client side javascript files. That is, it needs to serve out a fixed set of static html/css/js files. (I may have the node-static module as a dependency)
I'm curious what is the best way to handle this. I'd like to make this simple to install and integrate into apps, without forcing the user to dig through a long README. Basically they should be able to NPM the module, then add a line or two of code in the relevant place, and have it "just work". I don't want them to have to download other stuff, tell the module where to find the static files, etc.
Also, I'd like to make sure it can be included in both simple apps (i.e. one step from the standard "hello world") as well as complex apps using frameworks etc like Express, without undue hassle.
Is this possible, or is this beyond the scope of what the module system is designed to handle?
Once your package in installed with npm install mypackage -g you can use __dirname inside your executable to find the directory it's running in.
Likely /usr/local/lib/node_modules/mypackage/bin/mypackage
With your assets in /usr/local/lib/node_modules/mypackage/assets
so __dirname + '../assets' + myasset should correctly find your asset