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

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

在Github上创建模块代码仓库

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

1

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

2

将生成的代码复制到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说明。

添加需要发布的模块

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

3

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

再在utils目录中导入以前常用的一些js模块，比如项目所使用的DateUtil.js，然后需要在modules-index.js入口文件进行导入。index.js中间主要是包含一个Vue.js插件，插件更详细的用法可以参考Vue.js插件文档说明，index.js的内容如下：

import DateUtil from './utils/DateUtil'

const components = {
    //将需要注入的组件在此处导入
    "v-base-button":require('./components/v-base-button.vue')
};

const utils = {
    //将公共库类统一放在此处管理
    DateUtil:DateUtil,
};

const install = function (Vue, opts = {}) {

    //自动注入所有导入components的组件
    Object.keys(components).forEach(key => {
        Vue.component(key, components[key]);
    });

    //将公共库类统一放入到Vue实例的$utils中，项目中可以通过this.$utils.DateUtil来进行调用
    Vue.prototype.$utils = utils;

    //也可以通过此方法来赋予全局变量，项目中可以通过使用Vue.brutils.DateUtil来进行调用
    Vue.brutils = utils;

};

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

let API = {
    version: '0.0.15',
    install,
    components:components,
    utils:utils
};

export default API;

注意： 在此处没有采用modules.exports方法导出，因为现在项目中统一采用es6的import方法，而不是requires方法， 模块中所有的模块导出必须采用export方式，否则会报错：
“Uncaught TypeError: Cannot assign to read only property 'exports' of object '#