使用npm管理weex組件及公共模塊庫(kù)

隨著公司終端多個(gè)項(xiàng)目切換到weex開發(fā)方案，這些項(xiàng)目中一些公共模塊和組件都需要進(jìn)行統(tǒng)一管理，以前直接使用源代碼復(fù)制存在著許多缺陷，比如公共庫(kù)中源代碼修改困難、import路徑需要多次修改、調(diào)用時(shí)每次都需要注冊(cè)組件等多個(gè)問題。本文主要是研究通過npm來(lái)管理項(xiàng)目中vue.js的組件以及一些常用的公共方法，簡(jiǎn)化項(xiàng)目開發(fā)一些工作。

在Github上創(chuàng)建模塊代碼倉(cāng)庫(kù)

首先在github上創(chuàng)建公共模塊庫(kù)，如下圖：

1

將創(chuàng)建好的github克隆下來(lái)，使用weexpack來(lái)創(chuàng)建一個(gè)weex項(xiàng)目。如果沒有安裝weexpack，先使用npm install -g weexpack --registry=https://registry.npm.taobao.org命令進(jìn)行安裝。

2

將生成的代碼復(fù)制到git目錄中，在項(xiàng)目目錄中運(yùn)行npm install安裝依賴。安裝完依賴后項(xiàng)目目錄如下：

 BRWeexComponents
  ├── README.md
  ├── android.config.json
  ├── config.xml
  ├── node_modules
  ├── hooks
  │   └── README.md
  ├── ios.config.json
  ├── package.json
  ├── platforms     // 平臺(tái)模版目錄
  ├── plugins       // 插件下載目錄
  │   └── README.md
  ├── src           // 業(yè)務(wù)代碼（vue文件）目錄
  │   └── index.vue
  ├── start
  ├── start.bat
  ├── tools
  │   └── webpack.config.plugin.js
  ├── web
  │   ├── index.html
  │   ├── index.js
  │   └── js
  │       └── init.js
  └── webpack.config.js

如果要使用原生項(xiàng)目，可以運(yùn)行weexpack platform add ios或者weexpack platform add android來(lái)添加對(duì)應(yīng)的平臺(tái)支持。

關(guān)于weexpack更多內(nèi)容可以參考weexpack說明。

添加需要發(fā)布的模塊

我們?cè)陧?xiàng)目中添加我們將要發(fā)布的模塊，包括組件、指令、混合以及公共方法等內(nèi)容，代碼目錄如下：

3

我們首先在項(xiàng)目中新建一個(gè)簡(jiǎn)單的組件v-base-button，在components中新建一個(gè)v-base-button.vue文件，內(nèi)容如下:

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

<script>
    export default {
        data: {
        },
        methods: {
            clickAction:function () {
                console.log("====被點(diǎn)擊了")
            }
        }
    }
</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目錄中導(dǎo)入以前常用的一些js模塊，比如項(xiàng)目所使用的DateUtil.js，然后需要在modules-index.js入口文件進(jìn)行導(dǎo)入。index.js中間主要是包含一個(gè)Vue.js插件，插件更詳細(xì)的用法可以參考Vue.js插件文檔說明，index.js的內(nèi)容如下：

import DateUtil from './utils/DateUtil'

const components = {
    //將需要注入的組件在此處導(dǎo)入
    "v-base-button":require('./components/v-base-button.vue')
};

const utils = {
    //將公共庫(kù)類統(tǒng)一放在此處管理
    DateUtil:DateUtil,
};

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

    //自動(dòng)注入所有導(dǎo)入components的組件
    Object.keys(components).forEach(key => {
        Vue.component(key, components[key]);
    });

    //將公共庫(kù)類統(tǒng)一放入到Vue實(shí)例的$utils中，項(xiàng)目中可以通過this.$utils.DateUtil來(lái)進(jìn)行調(diào)用
    Vue.prototype.$utils = utils;

    //也可以通過此方法來(lái)賦予全局變量，項(xiàng)目中可以通過使用Vue.brutils.DateUtil來(lái)進(jìn)行調(diào)用
    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方法導(dǎo)出，因?yàn)楝F(xiàn)在項(xiàng)目中統(tǒng)一采用es6的import方法，而不是requires方法， 模塊中所有的模塊導(dǎo)出必須采用export方式，否則會(huì)報(bào)錯(cuò)：
“Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'”
更多關(guān)于export、exports、modules.exports 和 require 、import的用法可以參考《export、exports、modules.exports 和 require 、import 的一些組合套路和坑》。

可以在src-index.vue中添加測(cè)試代碼，測(cè)試我們模塊中編寫的插件是否可用：

<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實(shí)例對(duì)象調(diào)用:" + this.$utils.DateUtil.format("yyyy-MM-dd hh:mm:ss", new Date()));
        console.log("=========Vue全局對(duì)象調(diào)用:" + 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運(yùn)行項(xiàng)目，可以看到我們插入的紅色方框已經(jīng)顯示在頁(yè)面最下面，同時(shí)console也打印出我們模塊中注入的全局對(duì)象和實(shí)例對(duì)象的調(diào)用log。

現(xiàn)在版本的weexpack生成的web-index.html中讀取的生成的js路徑有誤，有時(shí)候運(yùn)行npm run serve及npm run build后，仍然無(wú)法顯示，可以修改index.html中的var page = getUrlParam('page') || 'dist/index.js';修改成var page = getUrlParam('page') || '../dist/index.js';即可。

npm模塊發(fā)布

通過weexpack創(chuàng)建的項(xiàng)目本身包含一個(gè)package.json文件，我們可以通過此文件將公共模塊發(fā)布到npm倉(cāng)庫(kù)中去。

發(fā)布npm模塊首先需要注冊(cè)https://www.npmjs.com/賬號(hào)，注冊(cè)后在終端運(yùn)行npm adduser進(jìn)行登錄，依次填入注冊(cè)時(shí)的賬號(hào)、密碼以及郵箱。登錄后也可以通過npm whoami查看當(dāng)前賬號(hào)。

繼續(xù)修改package.json文件，添加模塊的詳細(xì)描述內(nèi)容。

{
    "name": "brweexcomponents",
    "version": "0.0.1",
    "description": "博瑞終端組weex組件庫(kù)、插件以及公共方法",
    "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不能包含大寫，否則不能發(fā)布。
main：代表文件入口，這里面使用的是模塊的入口文件， 也可以將編譯后的dist賦值過去，不過需要修改webpack.config.js文件，這里不做介紹。
files：我們直接引用源代碼，所以只包含src文件夾，如果使用dist的內(nèi)容，需要包含dist文件夾。

修改完成后，將項(xiàng)目推送到github上。然后在項(xiàng)目文件中運(yùn)行命令npm publish進(jìn)行發(fā)布。
發(fā)布成功后可以會(huì)在底部顯示模塊信息：

+ brweexcomponents@0.0.1

使用npm模塊

發(fā)布成功后，我們可以在其他項(xiàng)目中引入我們發(fā)布的模塊。
在package.json中加入依賴文件：

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

然后重新運(yùn)行npm install即可引入我們的模塊。

在項(xiàng)目入口中加入以下代碼，將我們的插件注入：

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

然后即可在所有的文件中引用模塊中的組件以及公共方法等內(nèi)容。

有更多問題可以在我的簡(jiǎn)書或者博瑞立方終端組中進(jìn)行留言交流。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容