weexapp 开发流程（一）开发环境配置

1.创建项目

weexpack create weexapp

2.安装必要插件

npm i jwt-simple vue-resource vue-router vuex vuex-router-sync weex-ui -S

npm i babel-plugin-component babel-preset-stage-0 history quick-local-ip weex-builder weex-router -D

3.修改 scripts 指令

package.json

"scripts": {
"build": "webpack",
"build_plugin": "webpack --config ./tools/webpack.config.plugin.js --color",
"dev": "webpack --config webpack.config.js --watch",
"serve": "webpack-dev-server --config webpack.dev.js --progress --watch --open",
"start": "webpack && webpack-dev-server --config webpack.dev.js --progress --watch --open",
"create": "weexpack run android"
},

4.配置 weex-ui

.babelrc

{
"presets": ["es2015", "stage-0"],
"plugins": [
[
"component",
{
"libraryName": "weex-ui",
"libDir": "packages"
}
]
]
}

5.修改 webpack 模块管理

webpack.config.js

步骤一：



步骤二：



步骤三：



步骤四：



步骤五：



修改后：

webpack.config.js

const pathTo = require('path');
const fs = require('fs-extra');
const webpack = require('webpack');

const entry = {index: pathTo.resolve('src', 'entry.js')};
const weexEntry = {index: pathTo.resolve('src', 'entry.js')};
const vueWebTemp = 'temp';
const hasPluginInstalled = fs.existsSync('./web/plugin.js');
var isWin = /^win/.test(process.platform);

function getEntryFileContent(entryPath, vueFilePath) {
let relativePath = pathTo.relative(pathTo.join(entryPath, '../'), vueFilePath);
let contents = '';
if (hasPluginInstalled) {
const plugindir = pathTo.resolve('./web/plugin.js');
contents = 'require(\'' + plugindir + '\') \n';
}
if (isWin) {
relativePath = relativePath.replace(/\\/g,'\\\\');
}
contents += 'var App = require(\'' + relativePath + '\')\n';
contents += 'App.el = \'#root\'\n';
contents += 'new Vue(App)\n';
return contents;
}

var fileType = '';

function walk(dir) {
dir = dir || '.';
const directory = pathTo.join(__dirname, 'src', dir);
fs.readdirSync(directory)
.forEach((file) => {
const fullpath = pathTo.join(directory, file);
const stat = fs.statSync(fullpath);
const extname = pathTo.extname(fullpath);
const basename = pathTo.basename(fullpath);
if (stat.isFile() && extname === '.vue' && basename != 'App.vue' ) {
if (!fileType) {
fileType = extname;
}
if (fileType && extname !== fileType) {
console.log('Error: This is not a good practice when you use ".we" and ".vue" togither!');
}
const name = pathTo.join(dir, pathTo.basename(file, extname));
if (extname === '.vue') {
const entryFile = pathTo.join(vueWebTemp, dir, pathTo.basename(file, extname) + '.js');
fs.outputFileSync(pathTo.join(entryFile), getEntryFileContent(entryFile, fullpath));

entry[name] = pathTo.join(__dirname, entryFile) + '?entry=true';
}
weexEntry[name] = fullpath + '?entry=true';
} else if (stat.isDirectory() && ['build','include','assets','filters','mixins'].indexOf(file) == -1 ) {
const subdir = pathTo.join(dir, file);
walk(subdir);
}
});
}

walk();
// web need vue-loader
const plugins = [
new webpack.optimize.UglifyJsPlugin({minimize: true}),
new webpack.BannerPlugin({
banner: '// { "framework": ' + (fileType === '.vue' ? '"Vue"' : '"Weex"') + '} \n',
raw: true,
exclude: 'Vue'
})
];
const webConfig = {
context: pathTo.join(__dirname, ''),
entry: entry,
output: {
path: pathTo.join(__dirname, 'dist'),
filename: '[name].web.js',
},
module: {
// webpack 2.0
rules: [
{
test: /\.js$/,
use: [{
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}]
},
{
test: /\.css$/,
use: [{
loader: 'css-loader'
}]
},
{
test: /\.vue(\?[^?]+)?$/,
use: [{
loader: 'vue-loader'
}]
}
]
},
plugins: plugins
};
const weexConfig = {
entry: weexEntry,
output: {
path: pathTo.join(__dirname, 'dist'),
filename: '[name].js',
},
module: {
rules: [
{
test: /\.js$/,
use: [{
loader: 'babel-loader',
}]
},
{
test: /\.vue(\?[^?]+)?$/,
use: [{
loader: 'weex-loader'
}]
},
{
test: /\.we(\?[^?]+)?$/,
use: [{
loader: 'weex-loader'
}]
}
],
},
plugins: plugins,
};

var exports = [webConfig, weexConfig];

module.exports = exports;

6.修改 webpack 开发环境文件

webpack.dev.js

const ip = require('quick-local-ip').getLocalIP4();
const configs = require('./webpack.config.js');
const webpack = require('webpack');
const pathTo = require('path');
const chalk = require('chalk');
let config = Array.isArray(configs) ? configs[0] : configs;
config.devServer = {
contentBase: pathTo.join(__dirname, ''),
compress: true,
// hot: true,
host: '0.0.0.0',
public: ip + ':8080/web',
// publicPath: '/dist/',
};
// configs.plugins.push(new webpack.HotModuleReplacementPlugin());
console.log('server is running! Please open ' + chalk.green('http://' + ip + ':8080/web/index.html'));
module.exports = config;

7.提取 weex-ui 组件

项目名称 / index.js

/**
* weex-ui 常用组件
*/

import Utils from './packages/utils';
import WxcButton from './packages/wxc-button';
import WxcCell from './packages/wxc-cell';
import WxcCheckbox from './packages/wxc-checkbox';
import WxcCheckboxList from './packages/wxc-checkbox-list';
import WxcCountdown from './packages/wxc-countdown';
import WxcDialog from './packages/wxc-dialog';
import WxcEpSlider from './packages/wxc-ep-slider';
import WxcPanItem from './packages/wxc-pan-item';
import WxcGridSelect from './packages/wxc-grid-select';
import WxcIndexlist from './packages/wxc-indexlist';
import WxcLightbox from './packages/wxc-lightbox';
import WxcLoading from './packages/wxc-loading';
import WxcPartLoading from './packages/wxc-part-loading';
import WxcMask from './packages/wxc-mask';
import WxcMinibar from './packages/wxc-minibar';
import WxcLotteryRain from './packages/wxc-lottery-rain';
import WxcNoticebar from './packages/wxc-noticebar';
import WxcOverlay from './packages/wxc-overlay';
import WxcPageCalendar from './packages/wxc-page-calendar';
import WxcPopup from './packages/wxc-popup';
import WxcProgress from './packages/wxc-progress';
import WxcRadio from './packages/wxc-radio';
import WxcResult from './packages/wxc-result';
import WxcRichText from './packages/wxc-rich-text';
import WxcSpecialRichText from './packages/wxc-special-rich-text';
import WxcSearchbar from './packages/wxc-searchbar';
import WxcSimpleFlow from './packages/wxc-simple-flow';
import WxcSlideNav from './packages/wxc-slide-nav';
import WxcSliderBar from './packages/wxc-slider-bar';
import WxcStepper from './packages/wxc-stepper';
import WxcTabPage from './packages/wxc-tab-page';
import WxcTabBar from './packages/wxc-tab-bar';
import WxcTag from './packages/wxc-tag';

export {
Utils,
WxcButton,
WxcCell,
WxcCheckbox,
WxcCheckboxList,
WxcCountdown,
WxcDialog,
WxcEpSlider,
WxcPanItem,
WxcGridSelect,
WxcIndexlist,
WxcLightbox,
WxcLoading,
WxcPartLoading,
WxcMask,
WxcMinibar,
WxcLotteryRain,
WxcNoticebar,
WxcOverlay,
WxcPageCalendar,
WxcPopup,
WxcProgress,
WxcRadio,
WxcResult,
WxcRichText,
WxcSpecialRichText,
WxcSearchbar,
WxcSimpleFlow,
WxcSlideNav,
WxcSliderBar,
WxcStepper,
WxcTabPage,
WxcTabBar,
WxcTag
};

.