之前我們已經(jīng)說過使用gulp+weex來搭建一個(gè)weex的開發(fā)環(huán)境津滞，
weex+express+gulp開發(fā)文件搭建
但是在開發(fā)中發(fā)現(xiàn)拢军，使用gulp-weex這個(gè)npm包來實(shí)現(xiàn)的話往声，對于組件的依賴和引入存在路徑的問題柠座，比如在一個(gè)組件里面需要加載另一個(gè)文件的組件铅祸，使用gulp-weex打包的時(shí)候作箍，會找不到路徑硬梁，翻看了源碼，也找不到配置路徑的地方胞得，而且不管是絕對和相對的路徑依賴荧止，都讀取不到相應(yīng)的文件
翻看了一下weex的demo項(xiàng)目，使用的是webpack來進(jìn)行模塊化打包實(shí)現(xiàn)懒震，所以考慮在gulp項(xiàng)目中加入webpack的模塊化依賴打包方式罩息，因?yàn)閣ebpack主打品牌就是模塊化打包，所以就在之前項(xiàng)目基礎(chǔ)上更換成webpack來實(shí)現(xiàn)模塊依賴个扰，變量管理瓷炮，而gulp同樣還可以繼續(xù)使用它的工程化管理優(yōu)勢，兩者結(jié)合使用递宅，具體實(shí)現(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);
// 配置入口文件
// 因?yàn)槊總€(gè)頁面都是一個(gè)單獨(dú)的weex的入口文件苍狰，在使用webpack打包時(shí)候，要是多入口文件的打包的話
// 需要在entry里面配置每個(gè)入口烘绽，也就是需要傳一個(gè)入口文件地址的數(shù)組
// 另外每個(gè)入口文件需要加上一個(gè)entry=true的查詢參數(shù)
function getEntryFiles(dirs) {
const files = fs.readdirSync(dirs);
const entrys = {};
let fName = '';
/** 遍歷目錄文件淋昭，這里處理之后默認(rèn)將第一級目錄, 第二級目錄的文件設(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的文件安接，不進(jìn)行處理
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組件的時(shí)候要是不是同級目錄的需要使用絕對路徑翔忽，這里定義一個(gè)絕對路徑的變量可以在weex文件里面直接使用
beforePath: dirPath
}
}, // 定義一些全變量，編譯時(shí)使用
module: {
loaders: [
{
test: /\.we(\?[^?]+)?$/,
loaders: [ 'weex-loader' ]
}
] //加載weex-loader對.we文件進(jìn)行處理
}
};
這樣就可以在node打包時(shí)加載這個(gè)配置文件盏檐，然后用webpack來進(jìn)行打包了歇式，因?yàn)槲覀冺?xiàng)目使用的是gulp來進(jìn)行工程化管理的，所以我們可以將webpack模塊化打包變成一個(gè)gulp任務(wù)胡野，如:
const gutil = require('gulp-util');
const webpack = require('webpack');
const weexConfig = require('../configs/weex-webpack.config');
/**
* 只對每個(gè)業(yè)務(wù)的入口文件進(jìn)行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時(shí)，需要引入一些組件依賴的時(shí)候硫豆，就可以使用import了龙巨，而不用全部都寫在一個(gè)文件里面，如：
# 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>
運(yùn)行g(shù)ulp weex打包命令熊响，加上就可以了旨别，真正的彌補(bǔ)了之前gulp-weex的缺點(diǎn)
