使用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: {
clickAction:function () {
console.log("====被点击了")
}
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.base-button {
display: block;
background: red;
width: 100px;
height: 100px;
}
</style>

再在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 '#<Object>'”

更多关于export、exports、modules.exports 和 require 、import的用法可以参考《export、exports、modules.exports 和 require 、import 的一些组合套路和坑》。

可以在

src-index.vue

中添加测试代码，测试我们模块中编写的插件是否可用：

<template>
<div class="wrapper" @click="update">
<image :src="logoUrl" class="logo"></image>
<text class="title">Hello {{target}}</text>
<text class="desc">Now, let's use vue to build your weex app.</text>
<!--使用模块中注入的自定义组件-->
<v-base-button></v-base-button>
</div>
</template>

<style>
.wrapper { align-items: center; margin-top: 120px; }
.title { padding-top:40px; padding-bottom: 40px; font-size: 48px; }
.logo { width: 360px; height: 156px; }
.desc { padding-top: 20px; color:#888; font-size: 24px;}
</style>

<script>

import Vue from "vue"
import brmodules from './modules/index'

//使用模块中编写的插件
Vue.use(brmodules);

export default {
data: function() {
return {
logoUrl: 'http://img1.vued.vanthink.cn/vued08aa73a9ab65dcbd360ec54659ada97c.png',
target: 'World'
}
},
created: function() {
console.log("=========Vue实例对象调用:" + this.$utils.DateUtil.format("yyyy-MM-dd hh:mm:ss", new Date()));
console.log("=========Vue全局对象调用:" + Vue.brutils.DateUtil.format("yyyy-MM-dd hh:mm:ss", new Date()));
},
methods: {
update: function (e) {
this.target = 'Weex';
console.log('target:', this.target)
}
}
}
</script>

通过

npm run serve

运行项目，可以看到我们插入的红色方框已经显示在页面最下面，同时console也打印出我们模块中注入的全局对象和实例对象的调用log。

现在版本的weexpack生成的

web-index.html

中读取的生成的js路径有误，有时候运行

npm run serve

及

npm run build

后，仍然无法显示，可以修改index.html中的

var page = getUrlParam('page') || 'dist/index.js';

修改成

var page = getUrlParam('page') || '../dist/index.js';

即可。

npm模块发布

通过weexpack创建的项目本身包含一个

package.json

文件，我们可以通过此文件将公共模块发布到npm仓库中去。

发布npm模块首先需要注册https://www.npmjs.com/账号，注册后在终端运行

npm adduser

进行登录，依次填入注册时的账号、密码以及邮箱。登录后也可以通过

npm whoami

查看当前账号。

继续修改

package.json

文件，添加模块的详细描述内容。

{
"name": "brweexcomponents",
"version": "0.0.1",
"description": "博瑞终端组weex组件库、插件以及公共方法",
"homepage": "https://github.com/brlf-gz/BRWeexComponents",
"main": "src/modules/index.js",
"files": [
"src"
],
"repository": {
"type": "git",
"url": "https://github.com/brlf-gz/BRWeexComponents.git"
},
"bugs": {
"url": "https://github.com/brlf-gz/BRWeexComponents/issues"
},
"keywords": [
"weex",
"vue",
"component"
],
"author": "brlf",
"license": "MIT",
"dependencies": {
"fs-extra": "^4.0.1",
"vue": "^2.1.8",
"vue-router": "^2.1.1",
"vuex": "^2.1.1",
"vuex-router-sync": "^4.0.1",
"weex-html5": "^0.4.1",
"weex-vue-render": "^0.11.2"
},
......
}

注意： name不能包含大写，否则不能发布。

main：代表文件入口，这里面使用的是模块的入口文件， 也可以将编译后的dist赋值过去，不过需要修改webpack.config.js文件，这里不做介绍。

files：我们直接引用源代码，所以只包含src文件夹，如果使用dist的内容，需要包含dist文件夹。

修改完成后，将项目推送到github上。然后在项目文件中运行命令

npm publish

进行发布。

发布成功后可以会在底部显示模块信息：

+ brweexcomponents@0.0.1

使用npm模块

发布成功后，我们可以在其他项目中引入我们发布的模块。

在package.json中加入依赖文件：

"dependencies": {
......
"brweexcomponents":"^0.0.1",
......
},

然后重新运行

npm install

即可引入我们的模块。

在项目入口中加入以下代码，将我们的插件注入：

import brmodules from 'brweexcomponents'
import Vue from 'vue'
Vue.use(brmodules);

然后即可在所有的文件中引用模块中的组件以及公共方法等内容。

有更多问题可以在我的简书或者博瑞立方终端组中进行留言交流。