将自己封装的vue组件打包，发布到npm

前言

在做前端开发的过程中，有很多重复的代码，尤其是vue项目，不同项目之间相互拷贝代码实在太麻烦了。这里研究一下，如何将自己的代码打包发布到npm，方便以后直接npm install 再次使用。

账号准备

发布到npm，是需要账号的，首先可以先去https://www.npmjs.com/去注册一个账号，注意记住用户名和密码。

然后在本地电脑打开命令窗口，输入npm login ,然后根据提示输入刚刚申请的npm用户名、密码、邮箱。注意一定要输入命令时，自己的npm镜像源地址一定得是官方地址，不能是淘宝镜像，要不然特别容易失败。

插件构建

1.创建项目

使用下面命令创建项目，步骤和创建vue项目一样

vue init webpack-simple location-map-image  #最后的是你的项目名，可以根据自己情况调整

使用下面的命令，让项目正常跑起来，

#安装依赖
npm install

npm run dev

2.开发插件

• 在src目录下创建components文件夹，新建LocationMapImage.vue文件，文件里的代码我就不公布了，都是自己的插件代码，除了对package.json里的插件有依赖，不依赖于其他文件。

• 在App的vue文件中，引入这个插件，方便自己调试插件使用，放心是不会影响后面的打包与发布的

<template>
  <div id="app" style="width: 100%;height: 100%">
   <location-map-image :geo-json="geoJson"></location-map-image>
  </div>
</template>

<script>
  import LocationMapImage from "./components/LocationMapImage";
export default {
  name: 'app',
  components:{
    LocationMapImage
  },
  data () {
    return {
      geoJson:{
        "type": "Polygon",
        "coordinates": [
          [
            [
              109.48974609375,
              34.66935854524543
            ],
            [
              108.25927734375,
              31.952162238024975
            ],
            [
              111.81884765624999,
              30.334953881988564
            ],
            [
              114.2138671875,
              31.27855085894653
            ],
            [
              113.92822265625,
              32.861132322810946
            ],
            [
              112.8076171875,
              34.32529192442733
            ],
            [
              111.9287109375,
              34.97600151317588
            ],
            [
              109.48974609375,
              34.66935854524543
            ]
          ]
        ]
      }
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

body,html{
  height: 100vh;
  width: 100vw;
  padding: 0;
  margin: 0;
}
</style>

• 修改index.js文件，方便vue项目引入

import LocationMapImage from './src/components/LocationMapImage'
import _Vue from 'vue'

LocationMapImage.install = Vue => {
  if (!Vue) {
    window.Vue = Vue = _Vue
  }
  Vue.component(LocationMapImage.name, LocationMapImage)
}
export default LocationMapImage;

• 将package.json 中private改为false，不然无法发布，同时增加main属性，表明程序的入口

• 修改 webpack.config.js

如下图，根据自己的实际情况调整。入口会根据开发环境 ，生产环境切换， main.js 是npm run dev 的入口，就是App.vue， 用于调试/测试我们开发的组件;   index.js是Main.vue， 就是我们开发的组件，我们打包到生产环境打包就只是单纯的 组件

• 修改index.html，配置引入自己编辑的js文件

 

执行npm run build 生成编译后的代码文件

到这里就完成了

 

dist文件夹下除了会生成编译后的代码文件，还会生成源码文件.map。可以通过调整webpack.confg.js，控制不生成map文件，将sourceMap的true改为false

3.调整发布配置

发布

输入npm publish 命令即可完成发布

发布完成后，前往npm官网，登录自己的账号，点击packages，就可以看到发布的包，正常发布成功后，会向你的邮箱发一个邮件

验证

新建一个vue项目，直接npm install 你发布的插件名  --save，

然后在页面中引入即可验证。和其他的vue 的UI插件用法一样