Weex项目集成 BUI-Weex

对于已经创建好的 Weex项目，使用我们的UI框架也是比较方便的。请按照如下步骤进行：

第一步:修改package.json

以下有标注的地方需要新增，其他可以根据需要调整版本，例如可以使用最新版的vue，修改完成后 运行npm install 并确保其正常安装。

  1.  "scripts": {
  2.     "start": "npm run serve & npm run dev", //添加[可选] 用于合并dev和serve命令
  3.     "dev": "webpack --watch",
  4.     "serve": "node build/init.js && serve -p 8686",
  5.     "debug": "weex-devtool",
  6.     "publish": "node build/publish.js", //添加[可选] 用于打包bundel js到 publish目录
  7.     "build": "webpack"
  8.   },
  9.   "dependencies": {
  10.     "archiver": "^2.1.0",  //添加[可选] publish的时候压缩文件操作
  11.     "bui-weex": "^0.2.2", //添加 核心库
  12.     "glob": "^7.1.2", //添加 webpack中遍历入口时使用
  13.     "punycode": "^2.1.0",
  14.     "vue": "^2.5.13",  //可选择最新的版本
  15.     "vue-router": "^2.1.1",
  16.     "vue-template-compiler": "^2.5.13", //vue 需要它
  17.     "vuex": "^2.1.1",
  18.     "vuex-router-sync": "^4.0.1",
  19.     "weex-vue-render": "^0.11.2"
  20.   },
  21.   "devDependencies": {
  22.     "babel-core": "^6.20.0",
  23.     "babel-loader": "^6.2.9",
  24.     "babel-preset-es2015": "^6.18.0",
  25.     "copy-webpack-plugin": "^4.0.1",  //添加  webpack拷贝文件的插件
  26.     "css-loader": "^0.26.1",
  27.     "ip": "^1.1.4",
  28.     "json-loader": "^0.5.7",
  29.     "node-sass": "^4.5.2",  //添加  支持Sass
  30.     "sass-loader": "^6.0.3", //添加  支持Sass
  31.     "serve": "^1.4.0",
  32.     "vue-loader": "^10.0.2",
  33.     "webpack": "^1.14.0",
  34.     "weex-devtool": "^0.2.64",
  35.     "weex-loader": "^0.4.1",
  36.     "weex-vue-loader": "^0.2.5"
  37.   }

第二步: 新增publish.js

这一步是可选的，如果不需要通过 npm run publish 来发布bundle.js可以忽略此步骤。如果需要，请 下载 publish.js

第三步：修改 webpack.config.js

BUI-Weex提供的脚手架工程对webpack的优化包含如下方面：

  1. 自动根据 src/entry 遍历入口文件；
  2. 支持使用本地工程的图片资源(bui-image)；
  3. 支持使用字体图标(bui-icon)；
  4. 支持使用sass进行样式编写；

具体代码如下，请参考：

  1. var fs = require('fs');
  2. var webpack = require('webpack');
  3. var glob = require("glob");
  4. var copy = require('copy-webpack-plugin');
  6. var bannerPlugin = new webpack.BannerPlugin(
  7.     '// { "framework": "Vue" }\n',
  8.     {raw: true}
  9. )
  11. //  文件拷贝插件,将图片和字体拷贝到dist目录
  12. var copyPlugin = new copy([
  13.     {from: './src/image', to: "./image"},
  14.     {from: './node_modules/bui-weex/src/font', to: "./font"}
  15. ])
  17. // 遍历文件入口,动态生成入口
  18. function getEntries () {
  19.     var entryFiles = glob.sync('./src/entry/**', { 'nodir': true})
  20.     var entries = {};
  21.     for (var i = 0; i < entryFiles.length; i++) {
  22.         var filePath = entryFiles[i];
  23.         var filename = filePath.split('entry/')[1];
  24.         filename = filename.substr(0, filename.lastIndexOf('.'));
  25.         entries[filename] = filePath;
  26.     }
  27.     return entries;
  28. }
  30. // 生成webpack配置
  31. function getBaseConfig() {
  32.     return {
  33.         entry: getEntries(),
  34.         output: {
  35.             path: 'dist',
  36.         },
  37.         module: {
  38.             loaders: [
  39.                 {
  40.                     test: /\.js$/,
  41.                     loader: 'babel',
  42.                     exclude: /node_modules/
  43.                 }, {
  44.                     test: /\.vue(\?[^?]+)?$/,
  45.                     loaders: []
  46.                 }, {
  47.                     test: /\.scss$/,
  48.                     loader: 'style!css!sass'
  49.                 }
  50.             ]
  51.         },
  52.         vue: {},
  53.         plugins: [bannerPlugin, copyPlugin]
  54.     }
  55. }
  57. //*.web.js
  58. var webConfig = getBaseConfig();
  59. webConfig.output.filename = '[name].web.js';
  60. webConfig.module.loaders[1].loaders.push('vue');
  62. //*.weex.js
  63. var weexConfig = getBaseConfig();
  64. weexConfig.output.filename = '[name].weex.js';
  65. weexConfig.module.loaders[1].loaders.push('weex');
  67. module.exports = [webConfig, weexConfig];

第四步：工程结构

对于工程结构，BUI-weex 是有一定要求的，大致上和原生的 Weex工程保持一致。 具体请参看：【目录规范】

您在集成过程中发现的任何问题和建议，请在ISSUE中提问！