How do devDependencies work when you yarn add <package>? - npm

If you have a project that depends on packageA and you yarn add packageA but packageA has a devDependency on packageB to build, shouldn't that cause packageA to not work for you? Since packageA won't be able to build unless its devDependencies are installed too?
I guess my main question is if a pacakge has a devDependency on a built tool like babel, how does it get built and work when it gets yarn added by a project? Shouldn't build tools like webpack be a normal dependency?

No, they shouldn't, because the package that is yarn added is already built in an environment where the devDependencies are available. For example, when a package needs babel or webpack to build, then during the publishing a built bundle is created in a CI/CD pipeline that is valid es5 code and that is what you pull from npm. No build required after that.

GOOD MORNING :)
If you are having dependency problems on your dependencies of package.json, it is very simple to solve =]
What happens is that the dependency modules that the modules of your project need (dependencies) must be installed in the global npm as a package node (module), that is:
npm install -g youPackageName
If you have already installed a module in other projects or in the current project and want to turn it into a global package, you can use the command:
npm link youPackageName

Related

How to link a globally installed node package to a project with yarn?

I have just started using yarn and I can't figure out how to link a globally installed package to a project. With npm I would just run npm link <package-name> but it doesn't work with yarn.
when I run yarn link <package-name> it gives this error:
yarn link v1.22.4
error No registered package found called "express".
info Visit https://yarnpkg.com/en/docs/cli/link for documentation about this command.
The link functionality is not really meant for linking global packages to a project. It is meant to link a package that you are working on to another project that you are working on. The fact, that the npm link command can be used to link globally installed packages to the current project is just an implementation detail of npm. From the yarn docs:
For the vast majority of packages it is considered a bad practice to have global dependencies because they are implicit. It is much better to add all of your dependencies locally so that they are explicit and anyone else using your project gets the same set of dependencies.
So you should just add the dependencies via yarn add <package-name>.

differences of dependencies and devDependencies

I'm new to nodejs and npm, just a question on dependencies and devDependencies
When I create a new react or Angular project, then I added a new required package by
npm install xxx --save
so the command above add the new package entry to "dependencies" in package.json file.
then I run npm start. The project is working OK and it is using the package I just installed.
But when I run npm start, I'm still in development environment, isn't it? and if the entry is not added to devDependencies, how can the application still run in development? I'm confused
The difference between these two, is that devDependencies are modules which are only required during development, while dependencies are modules which are also required at runtime. So while development we use both of them. For more details check here.

dependencies and devDependencies when using webpack

Does it make sense to put any modules into package.json dependencies when I use webpack?
When I want to develope a package, I use git clone <url> then npm install, then npm installs all dependencies and devDependencies from package.json file and it makes sense.
When I'm end-user and I just want to install some package into my node_modules to use it in my project, I run npm install package-name, then npm installs package-name with only its dependencies, and it makes sense too.
But does it make sense to put any modules into dependencies when I use webpack? The webpack will bundle all dependencies into eg. bundle.js, so, for me, there is no need to install dependencies then (while they're included into bundle.js file).
Let's assume that I put all neccessary modules into devDependencies (keep the dependencies object empty) for my project: my-project, bundle it with webpack and publish:
the developer-user will use git clone <url to my_project>, then run npm install, then npm will install devDependencies from package.json (and ommit empty dependencies object), then it is ready to develope.
the end-user will use npm install my-project, then npm will install my-project, do not install devDependencies (because this is for production) and do not install dependencies (because dependencies object in package.json remain empty). Putting anything into dependencies would double the dependencies: both the dependencies would be installed, and the same dependencies would be accessible in the bundle.js file.
Am I right?
You are correct that there may be no dependencies once it's been transpiled with webpack. However, some packages are multi-purpose and may be used in multiple ways, so in some circumstances dependencies may still be required.
If you look at the package.json specification, there are two possible entry points, 'main' and 'browser'. There is also the proposed 'module' entry point. It is currently under discussion about how to handle these in webpack and users seem to want webpack to prioritize them as module > browser > main, however browser is currently used by webpack first.
The idea behind prioritizing them in the order module > browser > main is presumably that browsers could use the pre-transpiled stuff directly in "browser", whereas another project calling require() or include() on your package would use non-transpiled code from the "module" entry. The "module" entry code could contain modern JavaScript with new features and the project/package requiring it could then transpile it to their own specifications, using "browserslist" for example.
I found this question because I was wondering the same thing...

How does npm know you're in dev/developing mode?

Can someone explain to me what it means to --save-dev and how this impacts distribution and how NPM is aware of what you're trying to do?
First, see the answer to this question, What's the difference between dependencies, devDependencies and peerDependencies.
That will explain a TON.
Second, npm will install devDependencies by default unless one of two things is true, in which case devDependencies will be skipped. These things are:
You explicitly tell npm it's production with npm install --production
You set an environment variable that npm checks, NODE_ENVIRONMENT=production
In general, if you are distributing to something like Heroku, they will have the production flag set and your devDependencies will not be installed. So only install things with the --save-dev or -D flag (both do the same thing) if it is a module used for development, such as tests/mocks/scaffolding/etc.
--save-dev is useful for dependencies such as unit testing libraries. These dependencies are not required by the application to run in production; therefore if you published your package, consumers of your package would not get these dev dependencies in their node_modules folder.
NPM doesn't necessarily know that your in dev mode, it's just a package manager that allows you to install packages into your working directory and publish your own package from said directory.

jspm or npm to install packages?

I'm new to jspm, transitioning from npm-only. I have one fundamental question. I have some dependencies in the package.json, and I runned jspm init, which created a nice jspm config.js file. My question is, what it the point of installing these packages from jspm (via jspm install ...)? Why not just install them through npm?
More specifically, in my package.json, what's the difference between putting these packages inside dependencies: {} vs inside jspm.dependencies: {}
Assuming that you are building a webapp jspm is more suitable for managing your frontend dependencies than npm. I think for a webapp npm only makes sense when used together with browserify. One key benefit of jspm is that you can load your dependencies using SystemJS & the ES6 Module Loader Polyfill.
This enables you to load the dependencies in the browser using the ES6 module syntax.
E.g.:
import 'jquery';
Keep in mind that jspm is ment to be used for your frontend dependencies.
For your dependencies used for the build process you should keep using npm.