Shulou(Shulou.com)06/03 Report--

Today, I would like to talk to you about what package.json is like, many people may not know much about it. In order to make you understand better, the editor summarized the following content for you. I hope you can get something according to this article.

Common configuration items

Files

Files defines which files should be included in the node_modules after npm install.

Of course, some files are automatically exposed, regardless of whether you configure files or not, such as:

Package.json

README / CHANGELOG / LICENSE

...

Many libraries define files to prevent unnecessary files from being exposed to node_modules.

The configuration in vite is as follows:

{"files": ["bin", "dist", "client.d.ts"]}

I didn't know about this configuration before, which led to the release of a npm component vue-awesome-progress [3] that exposed the source code, although it didn't matter, it was open source. But it also increases the downloading of other people's resources, which is also a waste. Therefore, the professional point of the way or add files configuration.

Bin

Bin lists executable files that indicate which scripts you want to provide for this package.

When this package is installed by install, the executable listed by gjinbin will be added to the PATH variable (global executable) if it is a global installation; if it is a partial installation, it will go to the node_modules/.bin/ directory.

Bin is frequently used in some CLI tools, such as Vue CLI.

When developing npm packages, why is it that executable scripts that are published are required to start with #! / usr/bin/env node?

I checked, and it turned out to be used to indicate that the script file is to be executed using node.

Main, browser, module

These three configurations have a great impact on us.

The main field determines which module object is referenced when someone else require ('xxx'). When the main field is not set, the default value is index.js.

If you are developing a package for the browser side, then using browser to specify the entry file is the best choice.

Module supports ESM on behalf of the package you developed, and specifies an ESM entry.

There is a lot of knowledge about how to use these three fields. Here we recommend the priority [4] of the browser,module,main field in the article package.json, which you don't know yet.

Long picture warning!

Scripts

Scripts is also used almost every day, but have you ever used its hook script? If you haven't used it, you can try it, which is very useful when organizing a scripting process!

Pre: execute before a script is executed, such as prebuild, and you can do some preparatory work before packaging.

Post: execute after a script is executed, such as postbuild, and you can do some finishing work after packaging.

Config

The parameter xxx configured by config can be referenced in the script in the form of npm_package_config_xxx, such as port.

{"config": {"port": "8080"}}

Dependency correlation

Dependencies

Dependencies can be understood as a production dependency, and dependency packages installed through npm install-save go into dependencies.

DevDependencies

DevDependencies can be understood as a development environment dependency, usually a package of utility classes, such as webpack, babel, etc. Dependent packages installed through npm install-- save-dev go into devDependencies.

However, we often get confused when we use it in conjunction with some build tools. For example, I installed a package into devDependencies, but accidentally referenced it in the project and was finally packaged into the build result by webpack. What's going on?

It is suggested to read it together with the npm install section of the previous article.

PeerDependencies

I am package-a, you pretend to be me, you must pretend to be my peerDependencies.

Let "switch Man" increase the dependency of package-a to its own node_modules, so that you can avoid repeated installation when "switch Man" and package-a both need the same dependency (such as vue). This is common in development components or libraries.

Note that if a developer of a npm package declares peerDependencies, npm install in the package directory in the development environment will not install these dependencies in node_modules, so it is often necessary to rely on devDependencies.

For example, I develop a component that doesn't want to include vue code when I publish it to npm, which requires external vue, so it's understandable for me to define vue in peerDependencies. However, when developing components, you generally need the local development environment to run a demo to try the effect, which depends on vue, so you also need to install vue in devDependencies. I took a look at what vue-router does, so I learned it when I was developing my own components.

BundledDependencies

BundledDependencies is not quite the same as the above dependencies, and the configuration is not in the form of key-value pairs, but an array.

{"bundledDependencies": ["vue", "vue-router"]}

When you run npm pack, the corresponding dependencies are packaged into a tgz file. Do not use much, do not know the specific details, mainly or directly use npm install to install tgz package scenarios are relatively few, there is a concept on the line.

OptionalDependencies

OptionalDependencies is used to configure optional dependencies, and even with this, you should make a good judgment (protection) in the code, otherwise it will not be fun to run the error report.

Try {var foo = require ('foo') var fooVersion = require (' foo/package.json') .version} catch (er) {foo = null}

Extraneous remarks

After carefully reading the package.json documentation, it solved a lot of my confusion as a whole, and provided a lot of help to me in developing npm components.

After reading the above, do you have any further understanding of package.json? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.