之前我们已经说过使用gulp+weex来搭建一个weex的开发环境，
weex+express+gulp开发文件搭建
但是在开发中发现，使用gulp-weex这个npm包来实现的话，对于组件的依赖和引入存在路径的问题，比如在一个组件里面需要加载另一个文件的组件，使用gulp-weex打包的时候，会找不到路径，翻看了源码，也找不到配置路径的地方，而且不管是绝对和相对的路径依赖，都读取不到相应的文件
翻看了一下weex的demo项目，使用的是webpack来进行模块化打包实现，所以考虑在gulp项目中加入webpack的模块化依赖打包方式，因为webpack主打品牌就是模块化打包，所以就在之前项目基础上更换成webpack来实现模块依赖，变量管理，而gulp同样还可以继续使用它的工程化管理优势，两者结合使用，具体实现如下：
# 环境配置文件 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');
// 一些环境变量配置
const config = require('../config.json');
// 我们写的weex页面目录地址，需要使用绝对地址
const dirPath = path.join(__dirname, '../../', config.weex.views);
// 配置入口文件
// 因为每个页面都是一个单独的weex的入口文件，在使用webpack打包时候，要是多入口文件的打包的话
// 需要在entry里面配置每个入口，也就是需要传一个入口文件地址的数组
// 另外每个入口文件需要加上一个entry=true的查询参数
function getEntryFiles(dirs) {
const files = fs.readdirSync(dirs);
const entrys = {};
let fName = '';
/** 遍历目录文件，这里处理之后默认将第一级目录, 第二级目录的文件设置为入口文件即：
* --weex
* ---goods
* --- component
* --- header.we // 不是入口文件
* --- goodsList.we // 设置成入口文件
* --index.we // 设置成入口文件
* 上面的文件目录处理之后会返回如下的入口文件数组
* [
* '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任务，如:
const gutil = require('gulp-util');
const webpack = require('webpack');
const weexConfig = require('../configs/weex-webpack.config');
/**
* 只对每个业务的入口文件进行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();
});
});
这样，当我们在编写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>
运行gulp weex打包命令，加上就可以了，真正的弥补了之前gulp-weex的缺点
