之前我們已經(jīng)說過使用gulp+weex來搭建一個weex的開發(fā)環(huán)境，
weex+express+gulp開發(fā)文件搭建
但是在開發(fā)中發(fā)現(xiàn)，使用gulp-weex這個npm包來實現(xiàn)的話，對于組件的依賴和引入存在路徑的問題，比如在一個組件里面需要加載另一個文件的組件，使用gulp-weex打包的時候，會找不到路徑，翻看了源碼，也找不到配置路徑的地方，而且不管是絕對和相對的路徑依賴，都讀取不到相應(yīng)的文件

翻看了一下weex的demo項目，使用的是webpack來進行模塊化打包實現(xiàn)，所以考慮在gulp項目中加入webpack的模塊化依賴打包方式，因為webpack主打品牌就是模塊化打包，所以就在之前項目基礎(chǔ)上更換成webpack來實現(xiàn)模塊依賴，變量管理，而gulp同樣還可以繼續(xù)使用它的工程化管理優(yōu)勢，兩者結(jié)合使用，具體實現(xiàn)如下：

# 環(huán)境配置文件 config.json
"weex": {
    "views": "app/views/weex/",
    "mainHtml": "task/weexTemplate/",
    "transportJs": "app/public/weex/",
    "previewPath": "app/public/weexPreview/"
}

# webpack配置文件 weex-webpack.config.js
'use strict';
require('webpack'); // 需要引入webpack
require('weex-loader'); // webpack對weex處理的插件

const path   = require('path');
const fs     = require('fs');
// 一些環(huán)境變量配置
const config = require('../config.json');
// 我們寫的weex頁面目錄地址，需要使用絕對地址
const dirPath = path.join(__dirname, '../../', config.weex.views);

// 配置入口文件
// 因為每個頁面都是一個單獨的weex的入口文件，在使用webpack打包時候，要是多入口文件的打包的話
// 需要在entry里面配置每個入口，也就是需要傳一個入口文件地址的數(shù)組
// 另外每個入口文件需要加上一個entry=true的查詢參數(shù)
function getEntryFiles(dirs) {
    const files = fs.readdirSync(dirs);
    const entrys = {};
    let fName = '';

    /** 遍歷目錄文件，這里處理之后默認將第一級目錄, 第二級目錄的文件設(shè)置為入口文件即：
    *   --weex
    *     ---goods
    *        --- component
    *            --- header.we // 不是入口文件
    *        --- goodsList.we // 設(shè)置成入口文件
    *   --index.we // 設(shè)置成入口文件
    * 上面的文件目錄處理之后會返回如下的入口文件數(shù)組
    *  [
    *     'index': 'app/views/weex/index.we?entry=true',
    *     'goodsList': 'app/views/weex/goods/goodsList.we?entry=true'
    *  ]
    */
    files.forEach(function (file) {
        const curPath = dirs + file;

        if ( fs.lstatSync(curPath).isDirectory() ) {
            fs.readdirSync(curPath).forEach((item) => {
                const realFile = curPath + '/' + item;

                if (!fs.lstatSync(realFile).isDirectory()) {
                    fName = getFilesName(item);
                    if ( fName !== -1 ) {
                        entrys[fName] = realFile + '?entry=true';
                    }
                }
            });
        } else {
            fName = getFilesName(file);
            if ( fName !== -1 ) {
                entrys[fName] = curPath + '?entry=true';
            }
        }
    });

    return entrys;
}

// 獲取文件名字，如果不是.we的文件，不進行處理
function getFilesName(file) {
    const fName = file.match(/(.+)\.we$/);

    if ( fName ) {
        return fName[1];
    }

    return -1;
}

// 返回webpack配置
module.exports = {
    entry: getEntryFiles(dirPath), // 入口文件
    output: {
        path: path.join(__dirname, '../../', config.weex.transportJs),
        filename: '[name].js'
    }, //輸出文件地址和文件名配置
    resolve: {
        alias: {
            // 定義一些公共的變量,可以代碼里面直接使用,在weex文件里面import組件的時候要是不是同級目錄的需要使用絕對路徑，這里定義一個絕對路徑的變量可以在weex文件里面直接使用
            beforePath: dirPath
        }
    }, // 定義一些全變量，編譯時使用
    module: {
        loaders: [
            {
                test: /\.we(\?[^?]+)?$/,
                loaders: [ 'weex-loader' ]
            }
        ] //加載weex-loader對.we文件進行處理
    }
};

這樣就可以在node打包時加載這個配置文件，然后用webpack來進行打包了，因為我們項目使用的是gulp來進行工程化管理的，所以我們可以將webpack模塊化打包變成一個gulp任務(wù)，如:

const gutil          = require('gulp-util');
const webpack        = require('webpack');
const weexConfig     = require('../configs/weex-webpack.config');

/**
 * 只對每個業(yè)務(wù)的入口文件進行weex的編譯
 */
gulp.task('weex', function (callback) {
    webpack(weexConfig, function(err, stats) {
        if(err) throw new gutil.PluginError("webpack", err);
        gutil.log("[webpack]", stats.toString({
            // output options
        }));
        callback();
    });
});

這樣，當(dāng)我們在編寫weex時，需要引入一些組件依賴的時候，就可以使用import了，而不用全部都寫在一個文件里面，如：

# goods/goodsList.we
<!--賣家信用和成交率-->
<template>
    <div>
        <text class="text-small">賣家信用：</text>
        <sellerLevel grade="{{grade}}" class="border-light padding-r-small"></sellerLevel>
        </div>
    </div>
</template>

<script>
    require("beforePath/goods/components/sellerLevel.we");
</script>

<style>
.text-row{
    flex-direction: row;
}
.text-small{
    font-size: 24;
}
.border-light{
    border-right-width: 1;
    border-right-color: #e8e8e8; 
}
.padding-r-small{
    padding-right: 20;
}
.padding-l-small{
    padding-left: 20;
}
</style>

# goods/components/sellerLevel.we
<template>
    <div>
        <div if="spanRepeat != 0" style="flex-direction: row;">
            <image src="{{imgPath}}" repeat="{{setLevels(spanRepeat)}}" style="width: 30;height:30"></image>
        </div>
        <text if="showMsg">{{showMsg}}</text>
    </div>
</template>

<script>
    var badgeUrl = "";
    module.exports = {
        data: {
            imgPath: '',
            spanRepeat: 0,
            showMsg: false
        },
        created: function(){
            
        },
        methods: {
            
        }
    }
</script>
<style>

</style>

運行g(shù)ulp weex打包命令，加上就可以了，真正的彌補了之前gulp-weex的缺點