npm依赖包私服发布流程

描述：将项目环境中开发好的 vue 组件作为 npm 依赖，发布到私服。
这里我们不用脚手架，因为脚手架会附带很多用不到的东西。

初始化仓库

每个 npm 包都需要一个 package.json 文件，来进行常规配置信息。

执行命令如下：

npm init

进行包初始化设置，自动生成 package.json 文件。填写内容选项，包括：名称、版本号、入口文件、描述、作者、证书等。

在 package.json 文件中填写 npm 包需要的依赖。

这里主要是项目打包和样式的基础依赖。

"devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.7",
    "es6-promise": "^4.1.1",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "sass": "^1.32.8",
    "sass-loader": "^11.0.1",
    "style-loader": "^0.19.0",
    "url-loader": "^0.6.2",
    "vue": "^2.5.9",
    "vue-hot-reload-api": "^2.2.4",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^13.5.0",
    "vue-router": "^3.0.1",
    "vue-style-loader": "^3.0.3",
    "vue-template-compiler": "^2.5.9",
    "vuex": "^3.0.1",
    "webpack": "^3.12.0",
    "webpack-dev-server": "^2.9.5"
  }

执行 npm install 命令安装所需依赖。
执行命令如下：

npm install

命令执行后会产生新的文件package-lock.json，暂时不需要管它。

在项目根文件夹下，新建 dist 文件夹和 src 文件夹。

dist 文件夹放置打包后的文件；src 文件夹放置开发好的通用组件。

将开发好的 vue 组件放置到 src 文件夹下。

把通用组件 ./src 文件夹下。

新建 index.js 文件，并导出 vue 组件。

在 index.js 文件填写内容，方便在之后的项目开发中使用。

导出指令：

export { default as PageHeader } from './src/PageHeader.vue';
export { default as PageFooter } from './src/PageFooter.vue';

在根目录下新建 webpack.config.js 文件夹。

内容主要是填写项目打包方式。

填写内容如下：

需要注意的是：
entry 指定的是入口文件，即根目录下的index.js文件

const path = require("path");
const webpack = require("webpack");
const uglify = require("uglifyjs-webpack-plugin");
 
module.exports = {
 devtool: 'source-map',
 entry: "./index.js", //入口文件，根目录下的index.js文件
 output: {
  path: path.resolve(__dirname, './dist'),//输出路径，就是上步骤中新建的dist目录，
  publicPath: '/dist/',
  filename: 'helloMsg.min.js',
  libraryTarget: 'umd',
  umdNamedDefine: true
 },
 module: {
  rules: [{
    test: /\.vue$/,
    loader: 'vue-loader'
   },
   {
    test: /\.less$/,
    use: [
     { loader: "style-loader" },
     { loader: "css-loader" },
     { loader: "less-loader" }
    ]
   },
   {
    test: /\.js$/,
    exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
    loader: 'babel-loader'
   },
   {
    test: /\.(png|jpg|gif|ttf|svg|woff|eot)$/,
    loader: 'url-loader',
    query: {
     limit: 30000,
     name: '[name].[ext]?[hash]'
    }
   }
  ]
 },
 plugins: [
  new webpack.DefinePlugin({
   "process.env": {
    NODE_ENV: JSON.stringify("production")
   }
  })
 ]
};

执行 npm run build 命令，会在 dist 文件夹下生成打包好的文件。

新建文件 .npmignore，填写不需要发布到 npm 的文件和文件夹。

填写内容如下：

.*
*.md
*.yml
build/
node_modules/
src/
test/
gulpfile.js

登录 npm 私服并发布依赖

在 cmd 查看本地 npm 镜像地址

npm config get registry

切换到私服镜像地址

npm config set registry http://x.x.x.x:xxxx/repository/npm-local/

登录私服账号

npm login

注： 可以使用npm who am i命令查看账号是否登录成功。

发布 npm 包

npm publish

卸载 npm 包

npm unpublish xxx@1.0.0

发布新版本

通过修改 package.json 版本号来完成。

安装 npm 依赖

配置 npm 镜像地址为私服的 npm-group仓库地址，执行命令如下：

npm config set registry http://x.x.x.x.xxxx/repository/npm-group/

私服仓库有三个npm仓库，分别是：proxy、hosted、group
npm(proxy): 可配置代理的仓库，当此仓库没有相应包时 会从配置的第三方仓库拉取 并缓存到本地proxy仓库。
npm(hosted)：开发自己的包推送到此仓库，需登录才能推送。
npm(group)： 可配置包含上面两种仓库，这样用户只需要配置npm(group) 这个地址即可 ，避免配置npm(proxy) 和npm(hosted) 两个地址。

安装刚刚发布的项目依赖：

npm install xxx@1.0.0

参考链接：
https://www.jb51.net/article/150527.htm
https://www.jianshu.com/p/52d274115f3a