使用npm管理weex组件及公共模块库

随着公司终端多个项目切换到weex开发方案，这些项目中一些公共模块和组件都需要进行统一管理，以前直接使用源代码复制存在着许多缺陷，比如公共库中源代码修改困难、import路径需要多次修改、调用时每次都需要注册组件等多个问题。本文主要是研究通过npm来管理项目中vue.js的组件以及一些常用的公共方法，简化项目开发一些工作。

在Github上创建模块代码仓库

首先在github上创建公共模块库，如下图：

将创建好的github克隆下来，使用weexpack来创建一个weex项目。如果没有安装weexpack，先使用npm install -g weexpack --registry=https://registry.npm.taobao.org命令进行安装。

将生成的代码复制到git目录中，在项目目录中运行npm install安装依赖。安装完依赖后项目目录如下：

 BRWeexComponents
  ├── README.md
  ├── android.config.json
  ├── config.xml
  ├── node_modules
  ├── hooks
  │   └── README.md
  ├── ios.config.json
  ├── package.json
  ├── platforms     // 平台模版目录
  ├── plugins       // 插件下载目录
  │   └── README.md
  ├── src           // 业务代码（vue文件）目录
  │   └── index.vue
  ├── start
  ├── start.bat
  ├── tools
  │   └── webpack.config.plugin.js
  ├── web
  │   ├── index.html
  │   ├── index.js
  │   └── js
  │       └── init.js
  └── webpack.config.js

如果要使用原生项目，可以运行weexpack platform add ios或者weexpack platform add android来添加对应的平台支持。

关于weexpack更多内容可以参考weexpack说明。

添加需要发布的模块

我们在项目中添加我们将要发布的模块，包括组件、指令、混合以及公共方法等内容，代码目录如下：

我们首先在项目中新建一个简单的组件v-base-button，在components中新建一个v-base-button.vue文件，内容如下:

<template>
    <div class="base-button" v-on:click="clickAction"></div>
</template>

<script>
    export default {
        data: {
        },
        methods