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

第四步:工程结构

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

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