vue封装组件并发布到npm的简单流程

最近项目不是很忙，去研究了下封装Vue组件并发布到npm的流程，简单的记录下， 源码传送门。在动手开发之前去看了下element的源码，有很多值得学习的地方，如果对封装vue组件感兴趣的推荐一定要去看一看。

一、首先是项目环境的搭建。

主要还是配置webapck，之前一直使用vue-cli创建项目，对这块不是很熟折腾了一会儿。

主要用到的依赖：vue，vue-template-compiler， vue-loader，webpack，webpack-cli，webpack-dev-server等。

npm init , 再install需要的依赖。

项目目录结构如下：

build放打包配置的文件；在开发过程中我们需要调试 dist放用来调试的打包后文件；lib用来组件发布的打包后文件；packages用来放实际的组件代码；src/index.js是整个组件库的入口文件

之前一直是使用vue-cli脚手架来创建项目 自己很少去配一个webpack的环境。遇到的一些问题如下：

1.打包.vue文件 。主要使用 vue-loader 要使用一下VueLoaderPlugin 要不然会有问题。

 //在wbepack配置文件中
const VueLoaderPlugin = require("vue-loader/lib/plugin");

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
        options: {
          compilerOptions: {
            preserveWhitespace: false
          }
        }
      },
    ]
},
plugins: [
    new VueLoaderPlugin()
  ],

2.指定打包后的文件打包到哪

比如我们想打包后的文件目录如下（打包到dist目录下，assets目录下分别有js css文件夹, 放打包后的js、css文件）：

配置output 和使用mini-css-extract-plugin插件就可以了

output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "aseets/js/[name].[hash:7].js",
    chunkFilename: "[name].js"
  },
plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "./index.html"
    }),
//每次打包先把dist清空再打包 之前打包的文件会被清理
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: "aseets/css/[name].[contenthash:7].css"
    })
  ],

package.json再配置下命令如下：

"scripts": {
    "watch": "webpack --config build/webpack.dev.js --watch",
    "build": "cross-env NODE_ENV=production webpack --config build/webpack.dev.js",
    "build:lib": "cross-env NODE_ENV=production webpack --config build/webpack.lib.js",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.js"
  },

开发的时候 先npm run watch ,再起一个命令窗口 npm run dev 这样代码改变页面就会自动更新了 提高开发效率。

针对发布到npm webpack配置（webpack.lib.js）如下：

entry: "./src/index.js", 
output: {
    path: path.resolve(__dirname, "../lib"),
    filename: "[name].js",
    chunkFilename: "[name].js",
    library: 'faveur', // 指定的就是你使用require时的模块名
    libraryTarget: 'umd', // 指定输出格式
    umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  },
//output 后两项是必须 否则发布到npm再使用会有问题

二、组件代码的编写

和正常使用Vue写业务是一模一样的。

//input.vue
<template>
  <input @input="handleInput" class="fu-input__inner" v-bind="$attrs"/>
</template>

<script>
export default {
  name: "FuInput",
  props: {
    value: [String, Number],
  },
  data() {
    return {};
  },
  methods: {
    handleInput(e) {
      this.$emit('input', e.target.value)
    }
  }
};
</script>

// index.js
import FuInput from "./src/input";

/* istanbul ignore next */
FuInput.install = function(Vue) {
  Vue.component(FuInput.name, FuInput);
};

export default FuInput;

项目入口文件 src/index.js:

import Button from '../packages/button/index.js';
import Input from '../packages/input/index.js';

const components = [
  Button,
  Input,
]

const install = function(Vue, opts = {}) {
  components.forEach(component => {
    Vue.component(component.name, component);
  });
}

/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

export default {
  install,
}

三、发布到npm

首先去npm官网申请个账号；然后在命令行里 npm login 按提示输入账号、密码； 然后npm publish 。

注意点：1.你的包名  就是package.json里的 name 不能是已经存在的，事先可以去npm官网搜一下 看你取的名称是不是有人用过了。
               2. 发布之后 再更新发布 需要改版本号 就是package.json里的version 否则会报错 You cannot publish over the previously published versions: xxx.

四、页面中使用

 以我自己的为例：

npm install faveur
在入口文件main.js中引入

import Faveur from 'faveur';

import 'faveur/packages/theme-chalk/src/index.scss';

Vue.use(Faveur);

//页面使用
<fu-input placeholder="请输入内容" class="input"/>

通过这次尝试，对从头开始配webpack打包配置更加熟悉；对组件封装从开发到发布的流程也有了一个简单的了解。如果有什么疑问或建议欢迎大家交流学习。