NPM, just read this one

preface

Recently IN the research of NPM component release, encountered some related problems, is to sort out.

Involves the content

Package. json file introduction
. Function and configuration of NPMRC
The public NETWORK NPM component is released

package.json

An overview of the

Package. json defines dependencies between NPM packages in the current project and some configuration information about the project (project name, version, description, developer, license, and so on).

When it comes to package managers, the issue of yarn versus NPM selectivity comes up. I like to use Yarn. Look at the open source project on Github, for example, the vue project has yarn.lock file, so I guess yarn is more popular.

NPM Install or YARN Install resolves dependencies between dependencies based on package.json under the project and searches for and downloads packages from the configured NPM Registry (.npmrc can be configured with registry) address.

We can see where packages are downloaded from and dependencies in yarn.lock or package-lock.json.

Exclude node_modules when submitting code, but submit yarn.lock or package-lock.json to lock the version of the project dependency package. Do not manually change the version number in package.json. Instead, run the yarn upgrade or NPM upgrade command to upgrade the package.

NPM init or YARN init can generate package.json.

{
    "name": "@mflyyou/npm-description"."version": "0.1.0 from"."private": true."author": "Zhang Panqin"."license": "MIT"."main":"index.js"."keywords": [
        "NPM search keywords"]."publishConfig": {
        "registry": "https://registry.npmjs.com/"
    },
    "repository": {
        "type": "git"."url": "http://git.com/ project git address"
    },
    "files": [
        "dist"."src"]."bugs": {
        "url": "http://localhost:8080//issues"."email": "[email protected]"
    },
    "contributors": [{"name": "zhangpanqin"."email": "[email protected]"}]."scripts": {
        "dev": "sh ./build/build.sh"."npm-version": "npm -v"."serve": "vue-cli-service serve"
    },
    "dependencies": {
        "vue": "^ 2.5.21"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "^ 3.3.0"
    },
    "peerDependencies":{}
}

Copy the code

Package. json field description

name

The name field is the name of the project. For example, @vue/cli-plugin-babel is a component in vue. The former @vue is the scope of the current package. We can configure some private package Registry according to scope, so that some packages come from specific addresses.

registry=https://registry.npm.taobao.org/
@pay-plugin:registry=https://npm.udolphin.com
Copy the code

version

npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease [--preid=<prerelease-id>] | from-git]

'npm [-v | --version]' to print npm version
'npm view <pkg> version' to view a package's published version
'npm ls' to inspect current package/dependency versions
Copy the code

“Version “: “0.1.0”, corresponding to major-minor-patch

# change the position of major to 0
npm version major 

# change the position of minor to 0
npm version minor 

# Update the position of patch, and keep the other positions unchanged
npm version patch 
Copy the code

Major corresponds to a major iteration, such as vue 3.0TS re-adding new features and updating the Major version number
Minor corresponds to a minor version iteration. The minor version number is updated when changes or features are added that are compatible with older apis
Patch corresponds to the revised version number. Generally, the patch version number is changed during bug repair

When your project needs to be released, the version must be different from the previous one or the release will not be successful.

private

Identifies whether the current package is private. If true, the package cannot be published.

main

The default index. Js. Js loaded when import or require is specified.

keywords

Keywords describing the current project to retrieve the current plug-in.

publishConfig

"publishConfig": {
    "registry": "https://registry.npmjs.com/"
}
Copy the code

Sometimes we configure other registry in.npmrc, such as Taobao mirror. When I install the dependency package, I want to install from Taobao image. When you publish a plugin, you want to publish it on the official website. This can be configured in publishConfig.

files

Specifies the dependencies to be published, including files, some of which are ignored by default. You can also create.npmignore in the root directory to ignore some files.

scripts

Configure some execution scripts. For example, NPM run dev runs sh./build/build.sh.

"scripts": {
    // Run the shell script
	"dev": "sh ./build/build.sh"."build": "npm -v".// Publish is performed after build is successful
	"pub": "npm run build && npm publish"
}
Copy the code

dependencies

Development dependencies for the project. Key indicates the module name and value indicates the version range. When the project is packaged, the dependencies here are packaged in.

Fly – NPM address

Fly-npm and fly-use-NPM have been published.

Notice, there’s a pit here, too. Fly-npm = fly-use-nPM; fly-use-nPM = fly-nPM I introduced fly-use-NPM during the development of my-Vue project. I can directly import the fly-use-nPM project can run normally. However, an error is reported when you import fly-npm project resolution dependencies. Only the dependencies introduced by Dependencies can be imported in the current project.

<template> <div> < button@click ="clickTest"> Test </button> </div> </template> <script> // fly-npm only in the current my-vue project Import flyNpm from 'fly-npm'; import flyUseNpm from 'fly-use-npm'; export default { name: 'TestPlugin', methods: { clickTest() { flyUseNpm(); ,}}}; </script>Copy the code

devDependencies

For development dependencies, packages are not packaged. For example, we use related plugins such as Babel Webpak, when packaged, they are not packaged.

peerDependencies

Before we do that, let’s look at what NPM’s tree dependencies mean.

I created a VUE project my-vue that relies on fly-use-npm(it relies on fly-npm 1.0.0), fly-npm(2.0.0), which can be seen in our project.

When my-vue does not introduce fly-npm 2.0.0, my-vue/node_modules/fly-npm is 1.0.0.

When we introduced fly-NPM 2.0.0, the dependency diagram was shown above, which is the tree dependency.

Here are the changes after the introduction of fly-NPM 2.0.0.

<template> <div> < button@click ="clickTest"> test </button> </div> </template> <script> import flyUseNpm from 'fly-use-npm'; import flyNpm from 'fly-npm'; Export default {name: 'TestPlugin', methods: {clickTest() {// Print 2.0.0 console.log('fly-npm', flyNpm); // use 1.0.0 flyUseNpm(); ,}}}; </script>Copy the code

From the above we can see that there are two fly-NPM packages for one project. The volume of the package will increase accordingly. To solve this problem, peerDependencies were introduced.

Create the vUE project my-vue, depending on fly-use-nPM (4.0.0, whose peerDependencies are fly-nPM 1.0.0).

The dependency package added to peerDependencies is not automatically installed (test YARN 1.22.0, NPM 6.13.7).

When I was installing the My-Vue project YARN, AN error was reported because fly-NPM was not introduced.

When I introduce the fly-Npm 2.0.0 installation into my project, I get a warning message under the current project.

Warning “> [email protected]” has incorrect peer Dependency “[email protected]”.

When you develop a component, versions that depend on a particular package need to be handled this way.

// fly-use-npm
import flyNpm from 'fly-npm';
const obj = (a)= > {
    console.log('The quoted fly-nPM version is :', flyNpm.version);
    if (flyNpm.version > 1) {
        throw new Error('Version greater than 1'); }}export default obj;
Copy the code

As a scenario simulation, the latest fly-NPM package is 2.0.0, which is a major release upgrade and there may be some incompatibations with 1.0.0. Therefore, I recommend 1.0.0 in fly-use-nPM (peerDependencies). When using fly-npm 2.0.0, I found a function dependent on fly-npm 2.0.0 error, so I need to think about whether the dependency package is incompatible.

But if you want to use fly-NPM 2.0.0, you have to submit a PR-compatible Fly-NPM or fly-use-NPM.

This is rarely the case, the general version of the upgrade will be compatible with the previous functionality, do not worry too much about this problem.

We rarely encounter this kind of problem. PeerDependencies are also rarely used in github’s popular library.

.npmrc

Where are the dependencies in package.json installed from? .npMRc can configure where dependencies are installed from, as well as some other configurations of NPM.

.npmrc Configuration file priority

Project configuration file:/project/.npmrc
User profile:~/.npmrc
Global profile:/usr/local/etc/npmrc
NPM built-in configuration files/path/to/npm/npmrc

Get.npmrc user profile path
npm config get userconfig
Copy the code

The. NPMRC file has the highest priority. You can configure different images for each project, and configurations between projects do not affect each other. We can also specify the source of a special namespace (scope).

Packages starting with @thingjs-plugin can be downloaded from registry=https://npm.udolphin.com, and the rest can be downloaded from Taobao image.

registry=https://registry.npm.taobao.org/
@thingjs-plugin:registry=https://npm.udolphin.com
Copy the code

NPM config set < key > < value > [| -- - g global] / / to the setting of the configuration parameters of the key value; NPM config get <key> // Obtain the key value. NPM config delete < key > [| -- - g global] / / delete key set parameters and their values; NPM config list [-l] NPM config list [-l] NPM config edit // Edit the user configuration file NPM get <key> // Obtain the effective value of the configuration parameter key. NPM set < key > < value > [| -- - g global] / / to the setting of the configuration parameters of the key value;Copy the code

What is not configured with -g is the user profile

-g will be configured to the global configuration file

NPM component publishing process

Go to NPM website to apply for an account
Add an account to your computer
Develop your components using WebPack, Babel processing
NPM publishes your package

Apply for account

Apply for an account on the official website for logging in and publishing components.

Create the.npmrc configuration file at the root of the project and add the following.

# the installation package, mirror registry configuration ali = https://registry.npm.taobao.orgCopy the code

Configure the publishing source in package.json.

"publishConfig": {
    "registry": "https://registry.npmjs.com/"
}
Copy the code

In this way, the download dependency package will be downloaded from Taobao mirror, and the release dependency package will be released to NPM official website.

Add an account to your computer

Official website description of adding an Account command NPM adduser

# npm adduser [--registry=url] [--scope=@orgname] [--always-auth] [--auth-type=legacy]

npm adduser  --registry=https://registry.npmjs.com/
Copy the code

Run the above command to generate the.npmrc user profile

registry=https://registry.npmjs.com/
//registry.npmjs.com/:_authToken=xxx
Copy the code

Develop your components using WebPack, Babel processing

Due to webpack, Babel configuration is cumbersome, so vue-CLI scaffolding is used for development

package.json

{
    "name": "@thingjs-ad/thingjs-app"."version": "0.1.1"."private": false."scripts": {
        "serve": "vue-cli-service serve"."build": "vue-cli-service build --target lib --name thingjs-app ./src/index.js"."lint": "vue-cli-service lint"."pub": "npm run build && npm publish --access=public"
    },
    "main": "dist/thingjs-app.umd.min.js"."files": [
        "src"."dist"]."devDependencies": {
        "@vue/cli-plugin-babel": "^ 4.2.0"."@vue/cli-plugin-eslint": "^ 4.2.0"."@vue/cli-service": "^ 4.2.0"."babel-eslint": "^ 10.0.3"."eslint": "^ 6.7.2." "."eslint-plugin-vue": "^ 6.1.2." "."vue-template-compiler": "^ 2.6.11." "
    },
    "eslintConfig": {
        "root": true."env": {
            "node": true
        },
        "extends": [
            "plugin:vue/essential"."eslint:recommended"]."parserOptions": {
            "parser": "babel-eslint"
        },
        "rules": {}},"browserslist": [
        "1%" >."last 2 versions"]}Copy the code

The component content

AA.vue

<template> <div> AA component </div> </template> <script>export default {
    name:'AA'
};
</script>
Copy the code

index.js

import AA from './components/AA.vue'; const components = [AA]; // When vue. use is called, the install method is actually called. Vue.com Ponent Registers global components. const install =function (Vue) {
    components.forEach(component => {
        Vue.component(component.name, component);
    });
};

if(typeof window ! = ='undefined' && window.Vue) {
    install(window.Vue);
}

export default {
    version: '1.0.0',
    install,
    AA
}
Copy the code

Release the component

npm publish --access=public
Copy the code

This article was created by Zhang Panqin’s blog. It can be reproduced and quoted freely, but the author must be signed and indicate the source of the article.

If reprinted to wechat official account, please add the author’s official qr code at the end of the article. Wechat official account name: Mflyyou

preface

Involves the content

package.json

An overview of the

Package. json field description

name

version

private

main

keywords

publishConfig

files

scripts

dependencies

devDependencies

peerDependencies

.npmrc

.npmrc Configuration file priority

NPM component publishing process

Apply for account

Add an account to your computer

Develop your components using WebPack, Babel processing

package.json

The component content

Release the component

Related Posts

Git, NPM,yarn Common proxy Settings

Agile practices | can’t distinguish Kanban and Kanban only you…

Document processing tutorial: Use Java to add watermarks to images