Inject dependencies into index without bower+wiredep - node.js

currently i'm using gulp + bower with wiredep to inject my dependencies into my HTML file. It all works pretty well but i'm having some problems with newer versions that don't support bower anymore.
Having that said, I would love to just drop bower completely and use the node_modules files instead. Is there anything that works like wiredrep but instead uses package.json to get my dependencies?
thank you all

Related

Can you prevent node.js from installing packages locally? (Use global packages)

I've been working on a lot of different node.js projects. All of them have their own package.json file with their own needed packages. Every time I run node <mainfile>.js, npm installs all the packages to the project directory. Like so: C:/Users/me/Projects/<project-name>/node_modules.
This isn't a very big problem, but is there a way to make npm use/install to the global packages? Like in C:/Users/me/node_modules?
One of the advantages I could see this having is less storage being taken up, although it isn't a huge advantage.
I would assume that if it is possible, it would require you to add/modify something in the package.json file.
While looking into answers for this question, I've seen people saying that you should avoid installing packages globally. Can you also explain why this is a bad practice andy why I should avoid it?
Install Package Globally
NPM installs global packages into //local/lib/node_modules folder.
Apply -g in the install command to install package globally.
npm install -g express
To answer your other question
The obvious short answer is that your project depends on them. If your
project depends on a package, it should be documented in package.json
so that you can guarantee that it is installed when someone types npm
install. Otherwise, you’ll need to add extra steps in your README file
to inform anyone else who clones your project that they need to
install each of your global dependencies as well
Finally, even if someone installs the correct version of Browserify
for your project, they may be working on a different project that
requires a different version of that same tool, which would cause
conflicts. Several of your own projects might even use different
versions of Browserify because you updated it when you started a new
project and didn’t go back to make sure that earlier projects were
updated to work with the new version. These conflicts can be avoided.
You can only have one version installed globally. This causes problems if you have different projects that rely on different versions of a package.
Why not to install all packages globally
It's not really you shouldn't install a package globally it's more knowing what packages to install globally. The packages to install globally are ones that your project/application does not depend on.
How to identify a package that my project depends on
A package that your project is depended on is a package that your application could not run without like axios or express (an express API could not run without express installed or a web page that makes API requests with axios cant make those requests without axios) but something like http-server or minify is not needed to run the application so it can be installed globally.
Why is it important to have locally installed packages
It's important/good practice because if you are working with a group of developers or someone gets your work from Github they can just run npm install and get all the packages with out having to find all the packages them selfs.
How can I remove the node modules folder
You could technically globally install every package but I would sudjest not to. Node and many other developers know this is an issue that they have created a solution for in deno "the node killer".
I would recommend not installing all packages globally and if the node modules folder really annoys you try deno it fixes a lot of things that node developers hate.

relationship between webpack, npm, bower, gulp

I have recently just went in web-development and heard about these tools, I still confusing about it even I done research after, and also I have some questions as well. this is the following research I have done if there are something wrong please correct me.
Webpack is replacing bower and gulp
Bower was use to manage front end lib(eg: bootstrap), which gulp was use to manage backend lib(eg: backbone.js )
In some big project people still use gulp because give more control of the project
npm is the package manager for JavaScript.
If I want to I can install bootstrap from either npm or bower or gulp.
People choose to use bower and not just npm to install bootstrap is because npm does nested dependency tree, which Bower requires a flat dependency tree, which means faster.
Webpack replacing bower and gulp is because those are overkilling people's time.
The last thing is a question, I saw on youtube people download sass sass(which I understand is a front end thing tool)eg:(npm install gulp gulp-sass --save-dev) in gulp and then not using bower, is that even the the right way to do things? because if yes why do we still need to use use bower?
Webpack can be an alternative for gulp. Webpack doesn't do anything Bower does.
Bower was often used to manage frontend dependencies (eg, bootstrap), while npm was often used to manage backend dependencies (eg, express).
People use gulp because it's worked out for them so far, and the time/effort it takes to learn something else and switch to something else might not be worth it.
npm is a package manager for dependencies, but it isn't exclusive to JavaScript dependencies.
You can install bootstrap with Bower or npm.
Starting with version 3, npm installs everything in a flat hierarchy. You can use npm to manage dependencies that are used on the frontend AND backend, so some people don't see the point in having Bower.
Webpack can be an alternative to Gulp, but a lot of people had a hard time learning how to use Webpack.
Yes, you would npm install gulp-sass --save-dev, which installs gulp-sass with npm. I imagine gulp-sass is a tool that lets you use SASS and Gulp together. You wouldn't use Bower in any of this.

Manage non-packages with NPM, Bower, etc?

Can NPM, Bower, or any similar Node.js based frameworks download non-"packages" for my project?
I try to keep external libraries out of my repo as much as possible by having something like NPM download them for me (and then ignoring them in my repo).
However, every so often I run across something which doesn't have a package.json or anything similar. It's just one fixed file, either a zip or a random file.
Thanks.
Bower can install arbitrary files from a URL. This URL can point to a single file or an archive (which will be exploded).
For example:
bower install http://code.jquery.com/jquery-1.11.2.min.js
Or in you bower.json
"dependencies": {
"funcunit": "https://github.com/bitovi/funcunit/archive/jmvc.tar.gz"
}
In addition, Bower will also be able to install a package from a Github repository even if it does not contain a bower.json file. It will simply checkout the entire tag/branch.

gulp-util now included in npm install of gulp?

ok, so I didn't find my answer in the already asked questions. I recently had to reload my node to include trying to reload all the globally loaded 'things' (that I could remember).
Back when I was learning "Gulp", I remember having to do a separate install for gulp-util. But when I looked in the node > node_modules folder, I see where gulp-util was already loaded as a sub module of gulp. This was also a duplicated and exact version as to my separate install of gulp-util.
So does gulp (npm install -g gulp), now come with gulp-util as a part of its install process. So doing a separate install of gulp-util is pointless and overkill?? Or do I still need to do it???
Yes, you still need.
The fact that gulp-util is a submodule (along with any other) of gulp just means that gulp uses it, but doesn't mean that you don't need to include it.
If you want to get gulp-util from gulp you can do something like it:
var gutil = require('gulp/node_modules/gulp-util')
But, I strongly advise you not to.
Anyway, gulp is a build tool, overkill shouldn't be a concern here since you won't ship it or its rendundant submodules for the client.

Can't build my web application when integrating bootstrap template

I'm totally new to Node.js meteor and all development outside of visual studio.
When I go in the console and add bootstrap like this :
npm install twitter-bootstrap
It gets installed and adds all the bootstrap files in my solution but when I run my application with meteor it says
Process finished with exit code 254
No more information. No errors. If I delete all the bootstrap files, it builds and run just fine. Any idea what might be causing this?
I've tried looking for the exit code meaning but I can't find it for my IDE and I'm a bit clueless as for why simply adding those packages without even referencing them anywhere in the project might cause my application not to run at all.
You can't add npm packages in your project folder like that. It will create a node_modules sub-directory that meteor will treat like any other project folder, i.e., it will interpret all the files in it. That's not what you want. Either do the npm install in a super-directory, or, better yet, use the meteor meteorhacks:npm package (https://atmospherejs.com/meteorhacks/npm):
meteor add meteorhacks:npm
and then add the npm dependency to your packages.json file.
{
"twitter-bootstrap": "2.1.1"
}
But the real question is: why do you need this package? bootstrap3 is already part of the standard meteor packages, i.e., you already have full access to bootstrap, incl. javascript.
You can use atmosphere meteor packages called mizzao:bootstrap-3 by running the commend
meteor add mizzoa:bootstrap-3
Alternatively if you want to use npm packages you must add meteorhacks:npm packages.
meteor add meteorhacks:npm
npm install twitter-bootstrap
You can specify all the required npm packages inside a packages.json file.
{
"gm":"1.16.0",
"twitter":"0.2.12",
"twitter-bootstrap":"2.1.1",
}

Resources