Weex项目集成 BUI-Weex

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. 6. var bannerPlugin = new webpack.BannerPlugin( 7. '// { "framework": "Vue" }\n', 8. {raw: true} 9. ) 10. 11. // 文件拷贝插件,将图片和字体拷贝到dist目录 12. var copyPlugin = new copy([ 13. {from: './src/image', to: "./image"}, 14. {from: './node_modules/bui-weex/src/font', to: "./font"} 15. ]) 16. 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. } 29. 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. } 56. 57. //.web.js 58. var webConfig = getBaseConfig(); 59. webConfig.output.filename = '[name].web.js'; 60. webConfig.module.loaders[1].loaders.push('vue'); 61. 62. //.weex.js 63. var weexConfig = getBaseConfig(); 64. weexConfig.output.filename = '[name].weex.js'; 65. weexConfig.module.loaders[1].loaders.push('weex'); 66. 67. module.exports = [webConfig, weexConfig];

第四步：工程结构

对于工程结构，BUI-weex 是有一定要求的，大致上和原生的 Weex工程保持一致。具体请参看：【目录规范】您在集成过程中发现的任何问题和建议，请在ISSUE中提问！