npm，看这篇就够了

最近在研究 '故宫’组件发布，碰到一些相关问题，算是整理一下。

• 的package.json文件介绍- .npmrc的作用及配置- 公网NPM组件发布

package.json定义了当前项目中npm包之间的依赖关系和项目的一些配置信息（项目名称，版本，描述，开发人，许可证等等）。

当说到包管理器，就会遇到yarn和npm的选择性问题。我是喜欢用yarn
的，看看github上的开源项目，此类vue项目下yarn.lock就有文件，会使我猜测yarn可能更受欢迎一些，日常使用中我也是yarn用的比较多。

当我们npm install或yarn install会根据项目下的package.json解析依赖包之间的依赖关系然后从配置的npm registry（.npmrc可以配置对应的registry）地址中搜索并下载包。

我们可以在yarn.lock或package-lock.json看到包从哪里下载和依赖关系。

提交代码的时候排除node_modules目录，但是要提交yarn.lock或package-lock.json，用于锁定项目依赖包的版本。并且升级包的时候不要手动改package.json中的版本号，要使用命令yarn upgrade或npm upgrade升级。

npm init或yarn init可以生成package.json。

{
    "name": "@mflyyou/npm-description",
    "version": "0.1.0",
    "private": true,
    "author": "张攀钦",
    "license": "MIT",
    "main":"index.js",
    "keywords": [
 "npm 搜索关键词"
    ],
    "publishConfig": {
 "registry": "https://registry.npmjs.com/"
    },
    "repository": {
 "type": "git",
 "url": "http://git.com/项目git地址"
    },
    "files": [
 "dist",
 "src"
    ],
    "bugs": {
 "url": "http://localhost:8080//issues",
 "email": "bug@example.com"
    },
    "contributors": [
 {
     "name": "zhangpanqin",
     "email": "zhangpanqin@email.com"
 }
    ],
    "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“ ：{ } } ```
  
    
     
  
    
     
  
    
    




### package.json分区介绍

#### 名称

`名字`字段作为项目的名称。比如VUE中的一个组件` @ VUE / CLI-插件-通天塔'，前面这个` @vue `其实就当前包的范围，既命名空间。我们可以根据`范围`配置一些私有包`注册表`，从而达到一些包来源于特定的地址。

``` TXT 
注册表= HTTPS：//registry.npm.taobao.org/ 
@付费插件：注册表= HTTPS：//npm.udolphin.com ```


#### 版本

bash npm版本[ < newversion > | 专业| 小调| 补丁| premajor | 前级| 预补丁| 预发布[ --preid = <预发布-ID > ] | from-git ] 'npm [-v | --version]来打印npm版本'npm view 版本'以查看软件包的发布版本' npm ls'来检查当前的软件包/依赖版本'''
  






“版本”：“0.1.0” ，对应`主要的，次要的补丁` 

bash ＃更新主要的位置，其余位置为0 npm版本major ＃更新较小的位置，主要不变，其余位置为0 npm版本minor ＃更新补丁的位置，其余位置不变npm版本补丁```










- 主要对应一次大的迭代，比如VUE 3.0 TS重新，添加新的功能，更新主要版本号- 轻微的对应小版本迭代，发生兼容旧版API的修改或功能添加时，更新次要版本号- 补丁对应修订版本号，一般针对bug修复时，修改patch的版本号



当你的项目需要发布的时候，version一定要和以前的不一样，否则发布不成功。

#### 私人

标识当前包是否私有，为'真'时包不能发布。

#### 主要

默认index.js。指定import或require的时候加载的js。

#### 关键字

描述当前项目的关键字，用于检索当前插件。

#### publishConfig

```js
"publishConfig": {
    "registry": "https://registry.npmjs.com/"
}

// fly-use-npm
import flyNpm from 'fly-npm';
const obj = () => {
    console.log('引用的 fly-npm 版本为:', flyNpm.version);
    if (flyNpm.version > 1) {
 throw new Error('版本大于 1');
    }
}
export default obj;

# 获取 .npmrc 用户配置文件路径
npm config get userconfig

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

npm config set   [-g|--global]  //给配置参数key设置值为value；
npm config get    //获取配置参数key的值；
npm config delete   [-g|--global]      //删除置参数key及其值；
npm config list [-l]  		//显示npm的所有配置参数的信息；
npm config edit		//编辑用户配置文件
npm get       	//获取配置参数 key 生效的值；
npm set   [-g|--global]  //给配置参数key设置值为value；

＃安装包的时候，配置阿里镜像
注册表= https://registry.npm.taobao.org ```


在`的package.json `中配置发布源。

``json “ publishConfig” ：{ “注册表” ：“ https://registry.npmjs.com/” } `''
 
     



这样下载依赖包会从淘宝之上下载，发布依赖包会发布到npm官网去。



### 添加账号到你电脑

 [ 添加账号命令官网说明npm adduser ]（https://docs.npmjs.com/cli/adduser）

运行上述命令，.npmrc 用户配置文件生成一下内容

### 开发你的组件，使用 webpack,babel 处理

由于 webpack,babel 配置比较麻烦，这里使用 [vue-cli](https://cli.vuejs.org/zh/) 脚手架进行开发

#### package.json 

```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"
    ]
}