美文网首页Weex开发技巧Web前端之路Vue.js专区
使用npm管理weex组件及公共模块库

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

作者: 前尘如梦 | 来源:发表于2017-11-14 19:20 被阅读102次

随着公司终端多个项目切换到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文件,内容如下:

<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 servenpm 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);

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

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

相关文章

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

    随着公司终端多个项目切换到weex开发方案,这些项目中一些公共模块和组件都需要进行统一管理,以前直接使用源代码复制...

  • (26)打鸡儿教你Vue.js

    weex框架的使用 1、weex开发入门2、weex开发环境搭建3、掌握部分weex组件模块4、了解一些vue基本...

  • RN减少公用库的无效引用

    使用 import 语句导入模块时,会自动执行所加载的模块。而当使用组件库或公共方法库的时候,往往并不希望如此。 ...

  • weex 基本的环境搭建和它的 ui 组件库

    weex 可以使用的 UI 组件库 weex-ui 水滴-ui bui-wee weex-ui wxc-tab-p...

  • 国内优秀npm镜像推荐及使用

    国内优秀npm镜像推荐及使用 npm全称Node Package Manager,是node.js的模块依赖管理工...

  • 国内npm镜像推荐及使用

    国内npm镜像推荐及使用 npm全称Node Package Manager,是node.js的模块依赖管理工具。...

  • 2018-11-19

    组件库weex-ui Weex 原生组件的封装应该注意什么? 1. 通用性,只有多个业务同时在使用,同时具备可抽离...

  • 组件化开发遇到的小问题

    组件模块依赖公共模块的时候,要使用api project()而不是使用implementation project...

  • git 子模块使用小结

    目前公司搭建了一个公共组件库,想用于多个系统,就想到了使用 git 中的子模块 submodule 在介绍子模块前...

  • script方式引入npm包

    原因 之前公司组件库都是放在npm上,然后使用的时候通过npm使用,但是这样的话,如果组件有更新,其他项目使用到组...

网友评论

    本文标题:使用npm管理weex组件及公共模块库

    本文链接:https://www.haomeiwen.com/subject/wdnfvxtx.html