基于前端工程化的考虑，我们之前基于webpack工具链封装了前端工程化工具uba，并在此基础上整合成最佳实践的前端脚手架工程，我们将其命名为 tinper-react，并且广泛应用于三一重工、贵冶智能工厂、华新丽华、绿城集团、中兴通讯等大型企业应用和用友云系列产品矩阵当中。

ucf-web 和 tinper-react 有什么联系

ucf-web 是从 tinper-react 吸取经验、总结最佳实践、解决开发者提出的问题，并在 UCF 中台能力框架的指导下演进而来，它在技术选型上保证了和之前的 tinper-react 框架的延续性，并在易用性、规范化、标准化上得到了更好的实践。

1、升级开发体验，增强工程化能力

1.1、简化项目依赖包数量，由原来的60个左右减少到10个左右

之前：

  1. "devDependencies": {
  2.     "autoprefixer": "^9.4.3",
  3.     "babel-core": "^6.26.3",
  4.     "babel-loader": "^7.1.5",
  5.     "babel-plugin-transform-runtime": "^6.23.0",
  6.     "babel-polyfill": "^6.26.0",
  7.     "babel-preset-env": "^1.7.0",
  8.     "babel-preset-react": "^6.24.1",
  9.     "babel-preset-stage-2": "^6.24.1",
  10.     "clean-webpack-plugin": "^1.0.0",
  11.     "copy-webpack-plugin": "^4.6.0",
  12.     "cross-env": "^5.2.0",
  13.     "css-loader": "^1.0.1",
  14.     "cssnano": "^4.1.7",
  15.     "extract-text-webpack-plugin": "^2.1.2",
  16.     "file-loader": "^2.0.0",
  17.     "glob": "^7.1.3",
  18.     "gulp": "^3.9.1",
  19.     "gulp-fez-sftp": "^1.0.1",
  20.     "gulp-ftp": "^1.1.0",
  21.     "gulp-zip": "^4.1.0",
  22.     "html-webpack-plugin": "^3.2.0",
  23.     "less": "^3.9.0",
  24.     "less-loader": "^4.1.0",
  25.     "open-browser-webpack-plugin": "^0.0.5",
  26.     "postcss-flexbugs-fixes": "^4.1.0",
  27.     "postcss-loader": "^3.0.0",
  28.     "redux-logger": "^3.0.6",
  29.     "style-loader": "^0.23.1",
  30.     "uba": "^2.3.11",
  31.     "url-loader": "^1.1.2",
  32.     "webpack-bundle-analyzer": "^3.0.3",
  33.     "webpack-hot-middleware": "^2.24.3"
  34.   },
  35.   "dependencies": {
  36.     "ac-attachment": "^0.2.2",
  37.     "async-validator": "^1.10.0",
  38.     "axios": "^0.18.0",
  39.     "bee-autocomplete": "^1.0.4",
  40.     "bee-checkbox": "^1.2.6",
  41.     "bee-complex-grid": "^1.0.8",
  42.     "bee-datepicker": "^1.3.8",
  43.     "bee-dropdown": "^1.0.3",
  44.     "bee-form": "^2.0.6",
  45.     "bee-input-number": "^1.2.1",
  46.     "bee-menus": "^1.0.8",
  47.     "bee-pagination": "^1.1.14",
  48.     "bee-search-panel": "^0.1.4",
  49.     "bee-select": "^1.1.5",
  50.     "bee-table": "^1.6.16",
  51.     "bee-tooltip": "^1.0.13",
  52.     "bee-upload": "^1.0.0",
  53.     "classnames": "^2.2.5",
  54.     "core-js": "^2.6.0",
  55.     "mirrorx": "^0.2.12",
  56.     "moment": "^2.23.0",
  57.     "prop-types": "^15.6.2",
  58.     "query-string": "^5.1.1",
  59.     "react": "^16.6.3",
  60.     "react-dom": "^16.6.3",
  61.     "react-transition-group": "^2.4.0",
  62.     "ref-combobox": "0.0.2",
  63.     "ref-multiple-table": "^0.1.12",
  64.     "ref-tree": "^0.1.16",
  65.     "tinper-bee": "1.6.5",
  66.     "yyuap-bpm": "^0.3.26",
  67.     "yyuap-ref": "^1.1.55"
  68.   }

现在(dependencies里面的包会随着项目逐渐完善而会增多)：

  1. "devDependencies": {
  2.     "ucf-scripts": "^1.0.2"
  3.   },
  4.   "dependencies": {
  5.     "@babel/polyfill": "^7.2.5",
  6.     "@babel/runtime": "^7.3.1",
  7.     "bee-complex-grid": "^1.0.11",
  8.     "bee-form": "^2.0.7",
  9.     "bee-table": "^1.6.33",
  10.     "classnames": "^2.2.6",
  11.     "mirrorx": "^0.2.12",
  12.     "prop-types": "^15.6.2",
  13.     "react": "^16.7.0",
  14.     "react-dom": "^16.7.0",
  15.     "tinper-bee": "^1.6.9",
  16.     "ucf-request": "^1.0.0"
  17.   }

1.2、对配置文件做了精简，由原来的200多行精简到三四十行

原来的 uba.config.js：

  1. const path = require('path');
  2. const hotMiddlewareScript = 'webpack-hot-middleware/client?reload=true';
  3. const webpack = require('webpack');
  4. const glob = require("glob");
  5. const HtmlWebpackPlugin = require('html-webpack-plugin');
  6. const ExtractTextPlugin = require('extract-text-webpack-plugin');
  7. const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
  8. const CleanWebpackPlugin = require('clean-webpack-plugin');
  9. const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  10. const pathUrl = ''; //http://127.0.0.1:8080 设置host，可选
  11. const context = '/iuap_walsin_fe';//工程节点名称
  12. const contentBase = './build' + context;//打包目录
  13. const staticConfig = {
  14.   folder: "dll"
  15. };
  18. let entries = {};
  19. let chunks = [];
  20. let prodEntries = {};
  21. let prodChunks = [];
  22. let htmlEntrys = [];
  24. const svrConfig = {
  25.   historyApiFallback: false
  26. };
  28. // 远程代理访问，可以配置多个代理服务：https://github.com/chimurai/http-proxy-middleware
  29. const proxyConfig = [
  30.   {
  31.     enable: true,
  32.     headers: {
  33.       // 与下方url一致
  34.       "Referer": "http://172.20.52.215:8888"
  35.     },
  36.     //要代理访问的对方路由
  37.     router: [
  38.       '/iuap_walsin_demo', '/wbalone', '/iuap-saas-message-center/', '/iuap-saas-filesystem-service/', '/eiap-plus/', '/newref/', '/print_service/', '/iuap-print/'
  39.     ],
  40.     url: 'http://172.20.52.215:8888'
  41.   }
  42. ];
  44. const globalEnvConfig = new webpack.DefinePlugin({
  45.   __MODE__: JSON.stringify(process.env.NODE_ENV),
  46.   GROBAL_HTTP_CTX: JSON.stringify("/iuap_walsin_demo"),
  47.   'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
  48. })
  50. const MINIMIZE_FLAG = (process.env.NODE_ENV == "production") ? true : false;
  52. //提取package里的包
  53. function getVendors() {
  54.   let pkg = require("./package.json");
  55.   let _vendors = [];
  56.   for (const key in pkg.dependencies) {
  57.     _vendors.push(key);
  58.   }
  59.   return _vendors;
  60. }
  61. //优化配置，对于使用CDN作为包资源的引用从外到内的配置
  62. const externals = {
  63.   // 'axios': 'axios',
  64.   // 'react': 'React',
  65.   // 'react-dom': 'ReactDOM',
  66.   //'tinper-bee': 'TinperBee'
  67. }
  68. //默认加载扩展名、相对JS路径模块的配置
  69. const resolve = {
  70.   extensions: [
  71.     '.jsx', '.js', '.less', '.css', '.json'
  72.   ],
  73.   alias: {
  74.     components: path.resolve(__dirname, 'src/components/'),
  75.     modules: path.resolve(__dirname, 'src/pages/'),
  76.     routes: path.resolve(__dirname, 'src/routes/'),
  77.     layout: path.resolve(__dirname, 'src/layout/'),
  78.     utils: path.resolve(__dirname, 'src/utils/'),
  79.     static: path.resolve(__dirname, 'src/static/'),
  80.     src: path.resolve(__dirname, 'src/')
  81.   }
  82. }
  83. //开发和生产需要的loader
  84. const rules = [{
  85.   test: /\.js[x]?$/,
  86.   exclude: /(node_modules)/,
  87.   include: path.resolve('src'),
  88.   use: [{
  89.     loader: 'babel-loader'
  90.   }]
  91. }, {
  92.   test: /\.less$/,
  93.   exclude: /(node_modules)/,
  94.   use: ExtractTextPlugin.extract({
  95.     use: ['css-loader', 'postcss-loader', 'less-loader'],
  96.     fallback: 'style-loader'
  97.   })
  98. }, {
  99.   test: /\.css$/,
  100.   use: ExtractTextPlugin.extract({
  101.     use: [{
  102.       loader: 'css-loader',
  103.     }, 'postcss-loader'],
  104.     fallback: 'style-loader'
  105.   })
  106. }, {
  107.   test: /\.(png|jpg|jpeg|gif)(\?.+)?$/,
  108.   //exclude: /favicon\.png$/,
  109.   use: [{
  110.     loader: 'url-loader',
  111.     options: {
  112.       limit: 8196,
  113.       name: 'images/[name].[hash:8].[ext]',
  114.       publicPath: pathUrl + context
  115.     }
  116.   }]
  117. }, {
  118.   test: /\.(eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
  119.   use: [{
  120.     loader: 'file-loader',
  121.     options: {
  122.       name: '[name].[hash:8].[ext]',
  123.       outputPath: 'fonts',
  124.       publicPath: pathUrl + context + '/fonts/'
  125.     }
  126.   }]
  127. }]
  130. entries.vendors = prodEntries.vendors = ['babel-polyfill'].concat(getVendors());
  133. glob.sync("./src/pages/**/app.js").forEach(path => {
  134.   const chunk = path.split("./src/pages/")[1].split(".js")[0];
  135.   entries[chunk] = [path, hotMiddlewareScript];
  136.   chunks.push(chunk);
  137. });
  139. //开发环境的webpack配置
  140. const devConfig = {
  141.   devtool: 'cheap-module-eval-source-map',
  142.   entry: entries,
  143.   output: {
  144.     path: path.resolve(__dirname, contentBase),
  145.     filename: "[name].js",
  146.     chunkFilename: 'js/[name].[hash:8].bundle.js',
  147.     publicPath: context
  148.   },
  149.   externals: externals,
  150.   module: {
  151.     rules: rules
  152.   },
  153.   plugins: [
  154.     new CommonsChunkPlugin({
  155.       name: "vendors",
  156.       filename: "vendors/[name].js"
  157.     }),
  158.     new ExtractTextPlugin({
  159.       filename: '[name].css',
  160.       allChunks: true
  161.     }),
  162.     globalEnvConfig,
  163.     new webpack.NamedModulesPlugin(),
  164.     new webpack.HotModuleReplacementPlugin(),
  165.   ],
  166.   resolve: resolve
  167. }
  169. glob.sync("./src/pages/**/index.html").forEach(path => {
  170.   const chunk = path.split("./src/pages/")[1].split("/index.html")[0];
  172.   const filename = chunk + "/index.html"
  173.   const key = chunk + "/index";
  175.   const htmlConf = {
  176.     filename: filename,
  177.     template: path,
  178.     inject: false,
  179.     hash: true,
  180.     key: key,
  181.     chunks: ['vendors', chunk + '/app'],
  182.     favicon: './src/static/images/favicon.png'
  183.   };
  184.   htmlEntrys.push(filename);
  185.   devConfig.plugins.push(new HtmlWebpackPlugin(htmlConf));
  186. });
  190. glob.sync("./src/pages/**/app.js").forEach(path => {
  191.   const chunk = path.split("./src/pages/")[1].split(".js")[0];
  193.   prodEntries[chunk] = [path];
  194.   prodChunks.push(chunk);
  195. });
  197. //生产环境的webpack配置
  198. const prodConfig = {
  199.   // devtool: 'source-map',
  200.   entry: prodEntries,
  201.   output: {
  202.     publicPath: pathUrl + context,
  203.     path: path.resolve(__dirname, contentBase),
  204.     chunkFilename: 'js/[name].bundle.js',
  205.   },
  206.   externals: externals,
  207.   module: {
  208.     rules: rules
  209.   },
  210.   plugins: [
  211.     new CommonsChunkPlugin({
  212.       name: "vendors",
  213.       filename: "vendors/[name].js"
  214.     }),
  215.     new ExtractTextPlugin({
  216.       filename: '[name].css',
  217.       allChunks: true
  218.     }),
  219.     globalEnvConfig,
  220.     new webpack.optimize.UglifyJsPlugin({
  221.       sourceMap: false,
  222.       compress: {
  223.         warnings: false,
  224.         drop_debugger: true,
  225.         drop_console: true
  226.       }
  227.     }),
  228.     new CleanWebpackPlugin(['build']),
  230.     new BundleAnalyzerPlugin({
  231.       analyzerMode: 'static'
  232.     })
  233.   ],
  234.   resolve: resolve
  235. }
  237. glob.sync("./src/pages/**/index.html").forEach(path => {
  238.   const chunk = path.split("./src/pages/")[1].split("/index.html")[0];
  240.   const filename = chunk + "/index.html";
  241.   const key = chunk + "/index";
  242.   const realPath = prodConfig.output.publicPath + key + '.js';
  243.   const realCssPath = prodConfig.output.publicPath + key + '.css';
  245.   const htmlConf = {
  246.     filename: filename,
  247.     template: path,
  248.     inject: false,
  249.     hash: true,
  250.     key: key,
  251.     chunks: ['vendors', chunk + '/app'],
  252.     favicon: './src/static/images/favicon.png',
  253.     realPath: realPath,
  254.     realCssPath: realCssPath,
  255.     minify: {
  256.       removeComments: true,
  257.       collapseWhitespace: true,
  258.       removeRedundantAttributes: true,
  259.       useShortDoctype: true,
  260.       removeEmptyAttributes: true,
  261.       removeStyleLinkTypeAttributes: true,
  262.       keepClosingSlash: true,
  263.       minifyJS: true,
  264.       minifyCSS: true,
  265.       minifyURLs: true
  266.     }
  267.   };
  269.   prodConfig.plugins.push(new HtmlWebpackPlugin(htmlConf));
  270. });
  273. //最终向uba导出配置文件
  274. module.exports = {
  275.   devConfig,
  276.   prodConfig,
  277.   svrConfig,
  278.   proxyConfig,
  279.   staticConfig
  280. };

现在的 ucf.config.js：

这个只是为了展示有这个能力，可以直接返回一个对象{}，并不是依赖所有功能节点

  1. require('@babel/polyfill');
  3. module.exports = (env, argv) => {
  4.     return {
  5.         // 启动所有模块，默认这个配置，速度慢的时候使用另外的配置
  6.         // bootList: true,
  7.         // 启动这两个模块，启动调试、构建
  8.         bootList: [
  9.             "demo-app-org",
  10.             "demo-app-staff"
  11.         ],
  12.         // 代理的配置
  13.         proxy: [
  14.             {
  15.                 enable: true,
  16.                 headers: {
  17.                     "Referer": "http://iuap-meger-demo.test.app.yyuap.com"
  18.                 },
  19.                 //要代理访问的对方路由
  20.                 router: [
  21.                     '/iuap'
  22.                 ],
  23.                 url: 'http://iuap-meger-demo.test.app.yyuap.com'
  24.             }
  25.         ],
  26.         // 构建资源的时候产出sourceMap，调试服务不会生效
  27.         source_map: true,
  28.         // 全局环境变量
  29.         global_env: {
  30.             GROBAL_HTTP_CTX: JSON.stringify("/iuap_demo"),
  31.         },
  32.         // 别名配置
  33.         alias: {
  34.             //'ucf-apps': path.resolve(__dirname, 'ucf-apps/')
  35.         },
  36.         // 构建排除指定包
  37.         externals: {
  38.             //'tinper-bee': 'TinperBee'
  39.         },
  40.         // 加载器Loader
  41.         loader: [],
  42.         // 调试服务需要运行的插件
  43.         devPlugins: [],
  44.         // 构建服务需要运行的插件
  45.         buildPlugins: []
  46.     }
  47. }

1.3、项目整体结构更加规范化，文件数量减少

之前的：

  1. ├── .babelrc
  2. ├── .gitignore
  3. ├── LICENSE
  4. ├── README.md
  5. ├── doc
  6. ├── gulpfile.js
  7. ├── mock
  8. ├── node_modules
  9. ├── package-lock.json
  10. ├── package.json
  11. ├── postcss.config.js
  12. ├── src
  13. ├── uba.config.js
  14. └── uba.mock.js
  16. 4 directories, 10 files

现在的：

  1. ├── .gitignore
  2. ├── LICENSE
  3. ├── README.md
  4. ├── docs
  5. ├── package.json
  6. ├── ucf-apps
  7. ├── ucf-common
  8. └── ucf.config.js
  10. 4 directories, 5 files

1.4、启动开发调试效率加快

原来的大型单页应用，整体页面有可能达到四五百个页面，甚至近千个，在前端开发和调试的速度较慢，目前支持以下优化：

  • 支持将整个应用按功能或是按业务模块拆分为多个独立的单页应用，并支持将部分页面拆分为独立的单体页面。
  • 支持按需启动指定的业务模块，按需打包指定的业务模块。

2、易用性提升

2.1、文档更加系统化

在此之前，前端基础文档、框架介绍资料、典型案例培训文档得现写、配套的开发调试和部署等方式未做说明，文档化内容比较散乱，这次ucf-web 将文档内容也系统化的进行了整理。

2.2、更加友好：支持快速创建标准的模板节点

之前是需要自己手动复制修改粘贴去新增节点，目前已经通过工具命令来快速创建模板，减少复杂繁琐操作，专注业务组件开发

2.3、调试更加方便

目前已经集成了开发平台门户系统，只用于本地开发环境，可以很好的模拟出最终上线后的视觉要求，浏览器兼容性等问题，不再是只开发一部分页面，有效的降低了错误率。还增加了打开后帮助开发者访问指定的页面功能。