I. Field Description

The value must contain a maximum of 214 characters and cannot start with a hyphen ("). And underscore (_). Cannot contain uppercase letters
// Will eventually be used as urls, so non-URL-safe characters cannot be included
"name": "vuex".// NPM package project main entry file, required
"main": "dist/vue.runtime.common.js".// Node17 version of the new field, you can specify different reference entry depending on the module
Reference: / / https://nodejs.org/api/packages.html#packages_conditional_exports
"exports": {
  ".": {
    "module": "./dist/vuex.esm.js"."require": "./dist/vuex.common.js"."import": "./dist/vuex.mjs"
  },
  ". / *": ". / *".". /": ". /"
},
// The reference entry when the packaging tool supports ES
"module": "dist/vue.runtime.esm.js".// all files on NPM have CDN service address enabled
"unpkg": "dist/vue.js".// jsdelivr CDN public library
"jsdelivr": "dist/vue.js".// TypeScript entry file
"typings": "types/index.d.ts".// When you publish the package, the specific files will be published
"files": [
  "src"."dist/*.js"."types/*.d.ts"].// Declare whether the module contains sideEffects, thus giving tree-shaking more room for optimization.
"sideEffects": false.// Specifies the node.js version required for the project
"engines": {
  "node": "> = 8.9.1"."npm": "> = 5.5.1"."yarn": "> = 1.3.2"
},
// Version number Format: major version number. Second version. Revision number
// Dependencies have the following conditions:
// 1. Fixed version: The react-scripts version 4.0.3 is fixed, and only the specified version is installed.
// 2. Tilde: for example, ~4.0.3 indicates that the latest version of 4.0.x is installed (not less than 4.0.3), which means that it will not be changed during installation
// Change the major version number and minor version number;
// 3. Insert number: for example, the react version ^17.0.2 indicates that the latest version of 17.x.x is installed (at least 17.0.2).
// This means that the main version number will not change during installation. If the main version number is 0, the insertion and tilde behave the same;
// 4. latest: Installs the latest version
"dependencies": {
  "react": "^ 17.0.2"."react-dom": "^ 17.0.2"."react-scripts": "4.0.3",},// Pre-dependency
"peerDependencies": {
  "chai": "1.x"
}
Copy the code

The other fields are simpler and will not be covered here.

Second, the module

To compare the differences between Module and main in practice, here is one configuration of package.json:

{
  "main": "dist/dist.js"."module": "dist/dist.es.js"
}
Copy the code

This is equivalent to releasing both versions of the module specification in one package.

When the packaging tool encounters our module:

  • If it is already supportedmoduleFields are preferredES6A version of the module specification that can be enabledTree ShakingMechanism.
  • If it doesn’t recognize it yetmoduleThe fields will use what we’ve compiled intoCommonJSThe canonical version also does not hinder the packaging process.

test

We can do a Demo test to see if the module address is referenced first, and main second.

Create a new project and package it with rollup. Rollup.config.js is configured as follows:

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs'
import babel from '@rollup/plugin-babel'
import json from '@rollup/plugin-json'

export default [{
  input: ['./src/index.js'].output: {
    file: './dist/bundle.js'.format: 'umd'.name: 'mybundle'
  },
  plugins: [resolve(),commonjs(), babel(), json()],
  external: ['axios']}]Copy the code

Create a new folder under node_modules, give it an arbitrary name like test-module, and create the following folder and files:

- dist
  - dist.js
  - dist.es.js 
- package.json
Copy the code

Set node_modules/test-module/package.json as follows:

{
  "main": "dist/dist.js"."module": "dist/dist.es.js"
}
Copy the code

Node_modules /test-module/dist/dist. Js

var a = 1;
module.exports = { a }
Copy the code

Node_modules /test-module/dist/dist /dist.es. Js

export const a = 2;
Copy the code

Insert the test-module in the outer project SRC /index.js and print the value of a:

import a from 'test-module'

console.log('a')
Copy the code

Then execute rollup -c to view in the packaged file:

// ...

const a = 1;

// ...
Copy the code

Node_modules /test-module/package.json

// ...

var index_cjs = {
  a: 2
};

// ...
Copy the code

Rollup, which recognizes es6 syntax, will import the module field in package.json first, followed by the main field.

Iii. Relevant materials

  1. Nodejs17 document
  2. npm package.json
  3. Do you really understand package.json? Take a look, this is probably the most complete package parsing
  4. What do you know about package.json?
  5. Exports in the package. The json
  6. Talk about the Module field in package.json