I have a question about installing Paper.js. According to the Github link (https://github.com/paperjs/paper.js), the recommended way of installing and maintaining Paper is by Bower for browsers and NPM for Node.js, so I made sure I hade npm and bower installed and then I just ran this command in my project's folder:
$ bower install paper
Is this a tad complicated? Couldn't I have just downloaded the zip file directly to my project's folder and unzipped it? Right now I'm just planning on playing with Paper.js to learn it.
Thanks
It is a bit more complicated than grabbing a zip archive, but bower, npm, and git are standard tools for JS devs these days. now that you have npm and bower, you have nearly direct access to hundreds of js libs including Paper.js, Two.js, Raphael.js, D3, JQuery, Underscore... in-fact most reputable js libs will be hosted on bower and/or npm.
Additionally, you can keep your libs easily updated using these package managers
$ bower update paper
$ npm install raphael
The most important part of using these is that if you publish your own code, you don't need ti include dependancy libs like paper. You can simply include a package.json that will allow whomever loads your code to install dependancies.
Related
When installing anything via npm, it downloads dozens of not needed files. Usually I am looking for a library final build, a *.min.js file or anything like that but the rest is useless.
How do you handle all these useless files? Do you remove them by hand or generate the final app with any build tool like gulp or grunt?
I'm quite confused as I have plenty of npm modules installed in my webapp and the folder size is about 50 megabytes but it could be 2mb only.
npm install --production
Just doing an npm install brings in both development and runtime dependencies. You could also set the ENV to production globally for the server: npm config set production.
See this github issue. Note that this won't get you only the final minified build of everything, but will greatly reduce the bloat. For instance, a library might rely on babel-cli, babel-preset-es2015, and uglifyjs to be built (devDependency), but you don't need any of that if it also includes the transpiled minified file.
Managing Packages
For front end non-development packages I prefer Bower. It maintains the minified and non-minified version of your packages.
Build Tool
Use either Gulp or Grunt. Gulp would be my tool of choice.
Gulp task that will greatly improve your code are:
minification of both css and js
optimization/compression of images
concatenation and caching to reduce the number of calls to the server
package versioning
automatic injection of project dependencies
automatic injection of external dependencies
static analysis of js and css
automatic builds on code changes
deployment
testing
Node
If you can, leave to node all your development tools and leave to bower all your release plugins. Most node packages that are used in released apps have a bower installation counterpart.
Edit
Don't delete anything from Node manually as you don't know which packages have other packages as dependencies. If you are afraid that you may have junk in there, use npm rimraf to delete the node_modules folder, and then run npm install. Most importantly check your package.json for unnecessary saved packages.
I want to build a small js plugin, and I want to try that with ReactJS.
ReactJS recommends installing using npm and browserify.
In my experience with Ruby on Rails, there are always a lot of things to install, and using Windows introduces additional problems.
With Ruby it is Rails Installer. What is JS equivalent of Rails Installer? i.e. a tool that lets me install all necessary packages with one step?
I did a little bit of search, find that I need to install:
NodeJS, NPM
NVM
Webpack or Browerify
Babel
I think there may be others that I need.
To start the project you need node and npm because webpack, browserify and babel is npm packages.
The only way to install all packages in one step is to install package that actually depend on all packages you need. There is a lot of ReactJS starter kits in github like this https://github.com/kriasoft/react-starter-kit
I, personally recommend you doing such a things by yourself - its not a big deal if you understand what you want. In the root of all nodejs projects there is a file package.json every time you need a new module (package) just type npm install -S <module_name> in the root directory of your project.
This new module appears in node_modules directory and because of -S flag it name also will be stored in dependencies of your project in package.json file so that in the future you can just type npm install to install all dependencies (aka modules/packages) of your project.
Is it ok to have a node.js project with no package.json? The ones I see on the internet all come with package.json
What is the effect of having no package.json?
How is package.json created in the first place? Is it created automatically? I am wondering why I do not have package.json
Fundamentally, package.json is a meta file for your application. It lists all the configuration of your application.
What is the effect of having no package.json?
Nothing as far as you're running all your code locally and have no requirement for deployment whatsoever.
Let's setup a scene for you to understand this better.
Imagine that you wrote a brilliant application using node. Now all the chicks in your surrounding want it to play with. It is so fantastic!
Now you want to give it to them and during the development process you `npm install`ed so many things that your project grows beyond 4TB size.
There is no data storage device available to ship that huge code base.
Then the girl of your dream said I want it and I want it now. So you begin searching for app deployment process for node applications.
That is where you stumble upon a magical thing called package.json.
So what you do is you list all your npm installed modules under dependencies property. Then you delete node_modulesfolder, add package.json and commit the entire damn thing in github. Even the .zip file is of 10MB
Then she gets the code.
Types in npm install && npm start (which will install all the dependencies from the package.json` and start your application)
If you have package.json however, that is where you specify all your dependencies.
Using --save flag of npm install
Example.
npm install express --save
How is package.json created in the first place? Is it created automatically?
You can manually create a text file and save it as package.json
OR
A more sophisticated way is to use the command
npm init
I am wondering why I do not have package.json
Me too! :)
You're most probably following a tutorial that doesn't emphasize on initial configuration of the project OR the author of those tutorials presume that the reader has all the fundamentals down to begin with.
It is created automatically if you write npm init.
Then, every package you add using npm install packagename --save will be added to the dependencies list.
You need package.json so that when you want to use your project on another machine you don't have to copy all node_modules, but only your .js files you have written, assets and package.json. You can then run npm install command and it will automatically download and install all the required modules (found in the list of dependencies inside package.json).
You can also manually create or edit it, but it's easier to add --save when installing a module so you don't have to worry about package versions and stuff like that.
Also if you want to create a npm package, an open source project or stuff other people will use, it's either required or the norm to have this package.json file describing your project.
package.json is npm file, if you don't use npm you will not have this file, npm is a great tool if you want to use external libraries in your project but if you don't need it (which is very not likely unless you are doing something very simple), you don't need package.json file too.
To generate package.json file initialize npm in your project using npm init
possible reason thus it exist is you maybe you enter a wrong command like npm i -y, you must initialize the project first, just enter a command npm init -y
Welcome.
Well, if you are running it on your local machine, it's fine. now to answer your last question, package.json is not created automatically.
the npm command npm init -y creates the 'package.json' file. It basically makes sharing your code and installing your codebase easier.
I just installed Node with npm to use it for frontend dependency management. I know there is also bower but why would I need another package manager that is built on top of another?
When installing a package, npm seems to always load the full source of the js library into the node_modules directory. Just as it's downloading the complete github repository.
How do I install only the minifed (distribution) version of a javascript lib with npm?
There is no standard way to ask npm to get the minified version of a library. Some developers will produce packages that contain both minified and unminified versions (that's what I've done for one of my projects, which is web-only but can be installed through npm) or will create a package that contains an unminified version and another package that contains the minified version. This is done on a case by case basis, varies from package to package, and has to be determined by looking at a project's documentation.
If a developer has not cared to provide a minified code base through npm then you'll have to perform the minification yourself or get the "official" minified code through some other means.
You can use packages like node-prune and ModClean to clean up the unwanted dependencies.
Read this post for more details.
As complexity of my web project is growing, I am realizing that downloading external JavaScript libraries manually, is error prone, time consuming and making project less maintainable over time.
Although Visual Studio has NuGet package manager, it is not as powerful as bower. Also not all external libraries are being released on NuGet.
But there is no clear help on how to configure bower with Visual Studio. Please help !
As complexity of my web project grew, I realized that downloading external JavaScript libraries manually, was error prone, time consuming and made project less maintainable over time.
Although Visual Studio has NuGet package manager, it is not as powerful as bower. Also not all external libraries are being released on NuGet.
So, I decided to take the plunge and get started with bower.
My project structure is now much cleaner and easy to maintain.
Here I am listing steps, we need to take to configure bower with Visual Studio.
Detailed steps to use bower are already available on http://bower.io/#install-bower. Here I will list steps, I took to
— install bower
— configure it with Visual Studio
— download a sample package -- ( AngularJS )
Bower requires node, npm and git for windows.
Before proceeding ahead, install the following
git for windows – install from https://msysgit.github.io/
node – install from https://nodejs.org/
npm is part of node (no need for any extra step)
Step# 1
Open Command Prompt and execute command
npm install -g bower
Above step may fail, if you are behind corporate proxy server. To add
proxy server settings in npm, execute following 2 commands from
command prompt
npm config set proxy http://proxy.myCompany.com:80
npm config set https-proxy http://proxy.myCompany.com:80
Once done, try installing
bower again
Step# 2
Navigate to your Visual Studio Project folder from Command Prompt.
Execute command
bower init
Include this file to Visual Studio project. You may have to click on
“Show All Files” from Solution Explorer menu.
Step# 3
Create a .bowerrc file using notepad with following configuration and save it in your Visual Studio Project folder
{
"directory": "scripts/bower_components",
"proxy":"http://proxy.myCompany.com:80",
"https-proxy":"http://proxy.myCompany.com:80"
}
Include this file to Visual Studio project.
Edit this file to set directory for packages to be downloaded by
bower
Add proxy server settings if you are working behind corporate proxy. Else remove the last 2 lines for proxy and https-proxy
Step# 4
To download AngularJs, execute command
bower install angular –save
This will add a line in bower.json.
Step# 5
Package will be downloaded under bower_components directory by default. (or under the directory mentioned in .bowerrc file)
Make to sure include the whole package directory in Visual Studio project.
Click on Show All Files
Right click on new downloaded package and click on “Include in
Project”
Step# 6
Finally add reference of new package to your index.html
I found that I also needed to configure git to use the proxy server :
git config --global http.proxy http://username:password#proxyURL:8080
After that bower worked in VS 2015