前言
最近在研究 '故宫’组件发布，碰到一些相关问题，算是整理一下。
涉及内容
- 的package.json文件介绍- .npmrc的作用及配置- 公网NPM组件发布
package.json
概述
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 <pkg>版本'以查看软件包的发布版本' 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/"
}
有的时候呢我们在.npmrc配置了别的注册表，比如淘宝镜像。我安装依赖包的时候呢，想从淘宝镜像安装。发布插件的时候想发布到官网上。就可以在publishConfig中配置了。
####个文件
指定发布的依赖包，包含的文件，替换会忽略一些文件。也可以根目录下创建.npmignore忽略一些文件。
脚本
配置一些执行脚本。比如说NPM运行开发就是运行SH ./build/build.sh。
js “ scripts” ：{ //运行shell 脚本“ dev” ：“ sh ./build/build.sh” ，“ build” ：“ npm -v” ，// build成功之后会执行publish “ pub” ：“ npm run build && npm publish” }
依赖
项目的开发依赖。key为模块名称，值为版本范围。项目打包时转向此处的依赖打包进去。
[ fly-npm地址 ]（https://github.com/wanguzhang/fly-npm）
fly-npm和fly-use-npm已发布。
注意，这里也有个坑。一部分我有两个插件fly-npm，fly-use-npm，fly-use-npm中或中依赖fly-npm。我在my-vue项目开发的时候约会fly-use 进口飞使用的新公共管理'项目可以正常运行。但是当你-NPM 。我是可以直接进口飞NPM`项目解析依赖会报错。因为只有在当前项目中的替换约会的依赖才可以被导入。
<template>
<div>
<button @click="clickTest">
测试
</button>
</div>
</template>
<script>
// fly-npm 只有在当前 my-vue 项目 dependencies 引入才可以被 import
//import flyNpm from 'fly-npm';
import flyUseNpm from 'fly-use-npm';
export default {
name: 'TestPlugin',
methods: {
clickTest （） { flyUseNpm （）; } ，} ，} ; < / /脚本> ```
#### devDependencies
为开发依赖，打包的时候不会打包进去。比如我们使用的`巴贝尔` ` webpak `等相关的插件，打包的时候，并不会被打包进去。
#### peerDependencies
在将这个之前，我们先来了解npm的树形依赖是什么意思。
我创建一个vue项目my-vue依赖fly-use-npm（它依赖fly-npm 1.0.0），fly-npm（2.0.0），在我们项目中可以看到。
当`我-VUE `没有引入`飞NPM 2.0.0 `的时候，'我-VUE / node_modules /飞NPM `为1.0.0。
当我们引入 `fly-npm 2.0.0` 的时候，依赖关系图如上图，这就是树形依赖。
下面是测试引入 `fly-npm 2.0.0` 之后的变化。
```js
<template>
<div>
<button @click="clickTest">
测试
</button>
</div>
</template>
<script>
import flyUseNpm from 'fly-use-npm';
import flyNpm from 'fly-npm';
export default {
name: 'TestPlugin',
methods: {
clickTest() {
// 打印 2.0.0
console.log('fly-npm', flyNpm);
// 使用的是 1.0.0
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”。
当你开发一个组件，依赖特定包的版本就需要这样处理。
// 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;
算是场景模拟，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] //给配置参数key设置值为value；
npm config get <key> //获取配置参数key的值；
npm config delete <key> [-g|--global] //删除置参数key及其值；
npm config list [-l] //显示npm的所有配置参数的信息；
npm config edit //编辑用户配置文件
npm get <key> //获取配置参数 key 生效的值；
npm set <key> <value> [-g|--global] //给配置参数key设置值为value；
没有加-g配置的是用户配置文件
-g会配置到层次配置文件
npm组件发布流程
- 去npm官网申请账号
- 添加账号到你电脑
- 开发你的组件，使用webpack，babel处理
- npm发布你的包
申请账号
在项目的根路径下创建.npmrc配置文件，添加如下内容。
＃安装包的时候，配置阿里镜像
注册表= https://registry.npm.taobao.org ```
在`的package.json `中配置发布源。
``json “ publishConfig” ：{ “注册表” ：“ https://registry.npmjs.com/” } `''
这样下载依赖包会从淘宝之上下载，发布依赖包会发布到npm官网去。
### 添加账号到你电脑
[ 添加账号命令官网说明npm adduser ]（https://docs.npmjs.com/cli/adduser）
npm adduser [–registry = url] [–scope = @ orgname] [–always-auth] [–auth-type = legacy]
npm adduser --registry = https：//registry.npmjs.com/
运行上述命令，.npmrc 用户配置文件生成一下内容
注册表= https：//registry.npmjs.com/
//registry.npmjs.com/:_authToken=xxx
### 开发你的组件，使用 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"
]
}
组件内容
- 机管局
<template>
<div>
AA组件
</ div>
</ template>
<script>
导出默认值{
name：'AA'
};
</ script> ```
- index.js
从'./components/AA.vue'导入AA;
const组件= [AA]；
//当调用Vue.use，实际会调用这个install方法。Vue.componentXML编码器组件。
const install = function (Vue) {
components.forEach(component => {
Vue.component(component.name, component);
});
};
如果（typeof window！=='undefined'&& window.Vue）{安装（window.Vue）; }
导出版本{版本：'1.0.0'，安装，AA}
###发布组件 的庆典中的NPM发布–access =公共 `
由[张攀钦的博客]（http://www.mflyyou.cn/）创作。可自由转载，引用，但需署名作者并注明为文章出处。
随时随地看视频
