Vue发布nmp包

有的同学问我怎么将自己开发的Vue组件打包上传，供他人下载使用呢？接下来我就把自己发布npm包过程记录如下，大家做个参考

一、生成发布文件

1、npm包基本信息配置文件package.json

package.json在你项目的根目录下，相关配置如下：

{
  "name": "hbl-comment",
  "version": "1.0.0", 
  "description": "评论回复组件",
  "author": "hbl",
  "main": "dist/comment.js",
  "keywords": [
    "评论",
    "回复",
    "vue"
  ],
 "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "webpack --display-error-details --config webpack.config.js"
  },
  "dependencies": {
    "element-ui": "^2.12.0",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

2、打包相关配置文件webpack.config.js

webpack.config.js配置文件需要在根目录下创建，然后添加以下配置

const path = require("path");
const webpack = require("webpack");
const uglify = require("uglifyjs-webpack-plugin");

module.exports = {
  entry: "./src/index.js", //入口文件，src下的index.js
  output: {
    path: path.resolve(__dirname, "./dist"), //输出路径dist目录
    publicPath: "/dist/",  //打包后输出路径      与package.json中main路径对应
    filename: "comment.js", //打包后输出的文件名 与package.json中main文件名对应  main应该为:'dist/comment.js'
    libraryTarget: "umd",//使打包格式支持多种使用场景
    umdNamedDefine: true
  },

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader"
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader"
          },
          {
            loader: "scss-loader"
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader" //babel的相关配置在.babelrc文件里
      },
      {
        test: /\.(png|jpg|gif|ttf|svg|woff|eot)$/,
        loader: "url-loader",
        query: {
          limit: 30000 //把一些小图片打包为base64
        }
      }
    ]
  },
  plugins: [
    //压缩js代码
    new webpack.optimize.UglifyJsPlugin({
      //输出不显示警告
      compress: {
        warnings: false //默认值
      },
      //输出去掉注释
      output: {
        comments: false //默认值
      }
    })
  ]
};

3、在src下创建上面配置的index.js文件，主要用于导出我们的组件

import comment from './components/Comment'
export default  comment

4、使用如下命令进行构建，生成需要发布的文件

npm run build

命令执行完成之后会发现在dist目录下生成了comment.js文件，如下图

二、发布npm包

打包成功之后将其上传到npm上，提供其他用户使用,没有账号的可以去其官网注册

https://www.npmjs.com/

首先登陆npm

npm  login

按提示输入账号和密码等信息进行登录，登录成功后如下图：

然后使用下面命令发布组件

npm publish

如果没有安装pubish会提示如下错误：

那么需要先安装publish然后再发布：

npm install -g pubish

发布成功之后会显示名称和版本号，如下图：

其他用户可直接在项目中使用下面命令进行下载

npm i hbl-comment