When webpack bundles the node_modules my project needs, do I still need dependencies or could I list everything to devDependencies?
I have created a react component library and have published it to npm. The only peerDependencies I've listed are react and react-dom, because, well, you'll need them when using my library. At first I set up my project like I normally would, stuff like babel, eslint, css-loader listed in the devDependencies, and stuff I actually use in my code, like prop-types, classnames, react-slick, listed as dependencies.
I then use webpack with babel to create one main.js with the module imports included
When someone on my team tries to use my library npm will give some errors 'Peer dependencies unmet' with stuff like webpack, eslint & #babel/core. So I'm guessing these are some peer dependencies from my dependencies? (that's a little side question)
That got me thinking, do I even need dependencies at all? Since webpack bundles everything and I only use my main.js, shouldn't everything be a devDependency?
Dependencies are those that your project needs to run, like a library that provides functions that you call from your code.
Dev dependencies are dependencies you only need during development or releasing, like compilers that take your code and compile it into javascript, test frameworks or documentation generators.
Related
I have an npm project which is used solely for UI components and I have another one that is used for everything else. Since these two will be running in the same environment, I want to make sure they use the exact same version of runtime dependencies.
Here's an example. The project structure looks like:
root
- UI Component Project
- Main Project
The "Main Project" has a package.json with all the necessary dependencies it needs. What I want to do is to let "UI Component Project" use the exact same versions of the dependencies used in "Main Project", but only those that are also used in "UI Component Project".
For example, "Main Project" may have several dependencies such as TypeScript, React, and several others. "UI Component Project" also has its own set of runtime dependencies but they also use TypeScript and React. In this case, I want to make sure "UI Component Project" installs its own dependencies plus TypeScript and React with the same exact version used in "Main Project".
Does npm natively support something like this? I'm looking for something automatic to achieve this without manually trying to sync the dependencies in two projects.
I found that tools like lernacan help me do this.
We got couple of different projects that are using main dependencies like React and TypeScript packages. Each of those projects(maintained by different dev team) is using diferent version of React and TypeScript - question here:
Is there any clever way to share/inherit/force to use specific version of main dependencies across all those projects? i.e.:
Yes, this is definitely possible. Simplest way is to create an npm module with the required common dependencies in a package.json file and publish this into your repo. Then in the projects, require that published npm module as a dependency. The projects can than further require other dependencies and override any from the parent if needed.
I'm trying to understand the version relationship between package.json dependencies and build.gradle dependencies. For example, I have the following dependency configured in package.json:
"firebase-auth": "^0.1.2"
I have the corresponding dependency configured in my build.gradle:
implementation "com.google.firebase:firebase-auth:19.1.0"
I think I had originally installed the firebase-auth package and encountered an error which led me down a path where I googled and determined that the build.gradle dependency above was required. Based on some more googling, I got lucky with the version 19.1.0 but I really don't know how version dependencies between package.json packages and build.gradle dependency references are correlated. Can someone here provide some insight on this?
The difference between package.json and gradle is the difference between storage.
package.json is literally a file for js, and the gradle is like a repository made to protect Maven's shortcomings and Ant's.
The relationship between the two is defined when making a module through npm, build.gradle has content related to building libraries (such as SDK version), you can find the version here.
The version listed in package.json is modified each time an update is made on the github, and depending on the module in the dependency, the link will install the corresponding android and iOS modules for the version of dependencies.
When I run npm install #aspnet/signalr in my project directory, over 20 modules are installed into node_modules. However, in the actuall project, for example on a webpage, only signalr.js needs to be referenced. How does signalr.js reference its dependencies?
One additional example I find confusing is that when bundling, only signalr.js needs to be put into bundleconfig.json for SignalR to work in the project. Are the other dependencies actually needed?
I feel comfortable using Gulp for compiling scss, minifying it, minifying and concatenating scripts etc. For installing vendor libraries bower seems really nice to me due to its flat dependency tree. But when I install Gulp locally with
npm install gulp
it creates a node_modules folder with lots of different libs except Gulp itself. So I it comes to that I don't actually need bower and I may use these libs. But I really don't like npm's complicated dependency tree. Perhaps, I could somehow install only Gulp itself and use just bower for dependencies?
And what about package.json and bower.json? Do I really need both of them in the project or maybe they duplicate one another's functions? In general, I'm feeling a bit of confused with how to use bower and gulp together. Maybe someone could clarify those moments to me?
Gulp is an automated build tool you get with nodejs's package manager npm, it's used to run tasks such as concatenating, compiling sass, etc.
Bower is a dependency management tool whereby it fetches libraries, and their dependencies for your project. It does nothing but dependency management.
An example of how the two are used together would be fetching bootstrap and jquery with bower, then using gulp to copy the relevant scripts (jquery.js &bootstrap.js) to your websites assets folder.
Basically you'd use bower to fetch a library, such as jquery, then you'd use gulp to minify your jquery code.
A final example would, you use bower to fetch jquery, bootstrap, and say angularjs, you then use gulp to concatenate them into one file 'vendor.js', to save http requests in your app.
Hope those examples shine some light on how the two are used together.