npm version major
npm version minor
npm version patch
major 对应一次大的迭代，比如 vue 3.0 ts 重新，添加新的功能，更新 major 版本号
minor 对应小版本迭代，发生兼容旧版API的修改或功能添加时，更新 minor 版本号
patch 对应修订版本号，一般针对 bug 修复时，修改 patch 的版本号
当你的项目需要发布的时候，version 一定要和以前的不一样，否则发布不成功。
private
标识当前包是否私有，为 true 时包不能发布。
默认 index.js。指定 import 或 require 的时候加载的 js。
keywords
描述当前项目的关键字，用于检索当前插件。
publishConfig
"publishConfig": {
"registry": "https://registry.npmjs.com/"
复制代码
有的时候呢我们在 .npmrc 配置了别的 registry ，比如淘宝镜像。我安装依赖包的时候呢，想从淘宝镜像安装。发布插件的时候想发布到官网上。就可以在 publishConfig 中配置了。
files
指定发布的依赖包，包含的文件，默认会忽略一些文件。也可以根目录下创建 .npmignore 忽略一些文件。
scripts
配置一些执行脚本。比如说 npm run dev 就是运行 sh ./build/build.sh。
"scripts": {
"dev": "sh ./build/build.sh",
"build": "npm -v",
"pub": "npm run build && npm publish"
复制代码
dependencies
项目的开发依赖。key 为模块名称，value 为版本范围。项目打包时会将这里的依赖打包进去。
fly-npm 地址
fly-npm 和 fly-use-npm 已发布。
注意，这里也有个坑。比如我有两个插件 fly-npm，fly-use-npm，fly-use-npm 中 dependencies 中依赖 fly-npm。我在 my-vue 项目开发的时候引入 fly-use-npm。我是可以直接 import fly-use-npm 项目可以正常运行。但是当你 import fly-npm 项目解析依赖会报错。因为只有在当前项目中 dependencies 引入的依赖才可以被 import。
<template>
<button @click="clickTest">
</button>
</div>
</template>
<script>
import flyUseNpm from 'fly-use-npm';
export default {
name: 'TestPlugin',
methods: {
clickTest() {
flyUseNpm();
</script>
复制代码
devDependencies
为开发依赖，打包的时候不会打包进去。比如我们使用的 babel webpak 等相关的插件，打包的时候，并不会被打包进去。
peerDependencies
在将这个之前，我们先来了解 npm 的树形依赖是什么意思。
我创建一个 vue 项目 my-vue 依赖 fly-use-npm(它依赖 fly-npm 1.0.0)，fly-npm(2.0.0)，在我们项目中可以看到。
当 my-vue 没有引入 fly-npm 2.0.0 的时候，my-vue/node_modules/fly-npm 为 1.0.0。
当我们引入 fly-npm 2.0.0 的时候，依赖关系图如上图，这就是树形依赖。
下面是测试引入 fly-npm 2.0.0 之后的变化。
<template>
<button @click="clickTest">
</button>
</div>
</template>
<script>
import flyUseNpm from 'fly-use-npm';
import flyNpm from 'fly-npm';
export default {
name: 'TestPlugin',
methods: {
clickTest() {
console.log('fly-npm', flyNpm);
flyUseNpm();
</script>
复制代码
从上面我们可以看到，一个项目存在了两份 fly-npm 的包。这样打包的体积相应也会增大。为了解决这个问题，引入了 peerDependencies 。
创建 vue 项目 my-vue，依赖 fly-use-npm(4.0.0,其 peerDependencies 是 fly-npm 1.0.0 )。
peerDependencies 添加的依赖包，不会（测试的 yarn 1.22.0，npm 6.13.7）自动安装的。
当我在 my-vue 项目 yarn install 的时候，由于没有引入 fly-npm 会报错。
当我在项目中引入 fly-npm 2.0.0 安装会在当前项目下，出现警告信息。
warning " > fly-use-npm@4.0.0" has incorrect peer dependency "fly-npm@1.0.0”。
当你开发一个组件，依赖特定包的版本就需要这样处理。
import flyNpm from 'fly-npm';
const obj = () => {
console.log('引用的 fly-npm 版本为:', flyNpm.version);
if (flyNpm.version > 1) {
throw new Error('版本大于 1');
export default obj;
复制代码
算是场景模拟，fly-npm 最新包是 2.0.0，这算是一个重大版本升级，可能存在不兼容 1.0.0 的东西。所以我在 fly-use-npm 推荐使用（peerDependencies）1.0.0。当我在实际用的时候呢，引入 fly-npm 2.0.0 ,发现某个功能依赖 fly-npm 2.0.0 报错了，就需要想到是不是依赖包不兼容的问题了。
但是同时你还想用 fly-npm 2.0.0 的功能，那你只能去提交一个 pr 兼容 fly-npm 或者 fly-use-npm 。
这种情况很少会遇到，一般版本升级都会兼容以前的功能的，也不用太在意这样的问题。
一般我们很少会遇到这种问题。github 上流行的库也很少会用到 peerDependencies。
.npmrc
package.json 中的依赖包从哪里安装呢？.npmrc 可以配置依赖包从哪里安装，也可以配置 npm 的一些别的配置。
.npmrc 配置文件优先级
项目配置文件: /project/.npmrc
用户配置文件：~/.npmrc
全局配置文件：/usr/local/etc/npmrc
npm 内置配置文件 /path/to/npm/npmrc
# 获取 .npmrc 用户配置文件路径
npm config get userconfig
复制代码
项目下 .npmrc 文件的优先级最高，可以每个项目配置不同的镜像，项目之间的配置互不影响。我们也可以指定特殊的命名空间（scope）的来源。
以@thingjs-plugin 开头的包从 registry=https://npm.udolphin.com 这里下载，其余全去淘宝镜像下载。
registry=https://registry.npm.taobao.org/
@thingjs-plugin:registry=https://npm.udolphin.com
复制代码
npm config set <key> <value> [-g|--global]
npm config get <key>
npm config delete <key> [-g|--global]
npm config list [-l]
npm config edit
npm get <key>
npm set <key> <value> [-g|--global]
复制代码
没有加 -g 配置的是用户配置文件
-g 会配置到全局配置文件
npm 组件发布流程
去 npm 官网申请账号
添加账号到你电脑
开发你的组件，使用 webpack,babel 处理
npm 发布你的包
官网申请一个账号，用于登录和发布组件。
在项目的根路径下创建 .npmrc 配置文件，添加如下内容。
registry = https://registry.npm.taobao.org
复制代码
在 package.json 中配置发布源。
"publishConfig": {
"registry": "https://registry.npmjs.com/"
复制代码
这样下载依赖包会从淘宝镜像下载，发布依赖包会发布到 npm 官网去。
添加账号到你电脑
添加账号命令官网说明 npm adduser
# npm adduser [--registry=url] [--scope=@orgname] [--always-auth] [--auth-type=legacy]
npm adduser --registry=https://registry.npmjs.com/
复制代码
运行上述命令，.npmrc 用户配置文件生成一下内容
registry=https://registry.npmjs.com/
//registry.npmjs.com/:_authToken=xxx
复制代码
开发你的组件，使用 webpack,babel 处理
由于 webpack,babel 配置比较麻烦，这里使用 vue-cli 脚手架进行开发
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"
复制代码
