javascript - Why declare dependencies in dependencies?

Question

When you see the module installed by --save, it will be displayed in dependencies.
And the modules in dependencies represent the dependencies of the production environment. Such as jQuery.

But what I don’t understand is, take jQuery as an example. Why should I declare dependencies in dependencies?
In a production environment, I will directly use script tags to reference jQuery, without dependencies at all. What happens if the modules that the production environment depends on are declared in dependencies? Will it automatically add script tags for me or, for example, when packaging modules, when packaging production environment modules, will all dependencies in dependencies be packaged? But as far as I know, for example, when webpack modules are packaged, they are packaged based on the dependency graph created by the require module, so I don't quite understand why production environment dependencies should be declared in dependencies.

Answer 1

We will use many modules in actual development. Some modules (such as gulp, babel, these are placed in devDependencies) are only used in the development environment, while jquery is used in the production environment. When you deploy the project to In a production environment, if you execute npm install --production, only the modules in dependencies will be installed, which makes it very convenient to manage modules

Answer 2

The fact is that that field is designed for node, so it doesn’t matter whether you write it or not.

To be more specific, as a front-end project, your dependencies are either packaged or introduced with script tags, so what is in your deps field will not affect the final code at all.

Answer 3

• If you use <script> to add the module, this method of introducing JS/CSS itself does not require npm package management, and you can directly ignore the configuration problem of package.json

• If you use webpack for packaging. When webpack packages modules, it packages them based on the dependency graph created by the require module. This is indeed true. But there is another step after that, that is, when webpack packages through the dependency chart, if there is a jQuery dependency in the dependency chart, webpack still has to find the jQuery file, and then inject it into the packaged file. If you don't write dependencies, during team development, another person changes a little code, and then uses npm install to install the dependency package. When repackaging, webpack creates a dependency graph, and the dependency graph depends on jQuery. However, webpack cannot find the jQuery code to be injected into the target file in node_modules, so it will fail to repackage. Of course, you can ignore this if you are the only one developing.

• Of course, there is another application of dependencies, such as a node.js crawler I wrote before. Since this crawler directly uses node to run JS code, the require() packages in my JS file need to be written in dependencies. When deploying, use npm install to install these dependencies before require can read them. to the corresponding package.

Answer 4

I think you may use node because you need to use webpack to develop pages. Otherwise you won't ask about the relationship between dependencies and script. There is no connection between the two.

Here you have mixed 3 things:

1. Dependency management of package.json

2. Dependency management of webpack

3. Script introduction in html

Dependency management of package.json

node can not only be used for page development, but also can be used to do many things, such as developing server programs, developing JS libraries, etc. Dependencies record and guarantee the dependencies of your project when it is used by ; devDependencies record and guarantee the dependencies of your project when it is developed by . As an example, we develop a library and prepare to publish it on NPM. You need to use

lodash.sample

, use es6 when developing, and also use eslint to standardize the code style. Then dependencies include lodash.sample, and devDependencies include babel and eslint. dependencies ensure that when anyone installs our library,

lodash.sample

will be installed (otherwise the library will not run correctly); devDependencies ensure that anyone (or yourself on other devices) can install this project When making modifications (development), you can obtain the same development environment (packaging, transcoding, constraints, building, etc.) through npm install. Think about it, if you are on another computer and want to develop version 2.0 of this library, if there are no devDependencies, you will need to manually install babel and eslint again, or you will have to copy the entire project from the original project. node_modules folder. Dependency management of webpack

Webpack is a building tool that can be used in page development and can also be used in other places. Webpack's dependency management does find dependencies through

require

, and it does not rely on dependencies. Still using the example of the above library, we can use webpack for packaging (then there should be webpack in devDependencies). Even if you

npm install --save

have dozens of other modules, only lodash.sample will be imported when webpacking. Script introduction in html

When webpack is used to develop pages, the packaged js files are first manually introduced as scripts in HTML, but later there are plug-ins to help us automatically complete this process. Later, some scaffolding tools such as vue-cli had built-in responsible webpack configuration, optimizing and automating the entire process. In addition, the entire development process is completed in node, which may lead you to mistakenly believe that there is a connection between dependencies and scripts.

Back to your question: "Why should we declare production environment dependencies in dependencies"

The reason is: if these dependencies are not recorded, when other people (or you yourself on other devices) are re-developing, they will not know which dependencies need to be introduced into the project, and development will not be possible. If you are just one person and do not switch computers, dependencies do not need to be used.

Answer 5

When the working environment changes, if you want your project to run normally. Dependencies must be declared, so no matter where they are, just
npm install can restore the working environment and solve all dependencies