Merge branch '1.0.6-wmj' into '1.0.6'

feat: 支持weex多页面打包

See merge request cml/new-open-chameleon-sets!171

packages/chameleon-templates/project/chameleon.config.js

@@ -7,7 +7,7 @@ const apiPrefix = 'https://api.chameleon.com';
 cml.config.merge({
   templateLang: 'cml',
   templateType: 'html',
-  platforms: ['web', 'weex', 'wx', 'baidu', 'alipay', 'qq'],
+  platforms: ['web', 'weex', 'wx'],
   buildInfo: {
     wxAppId: '123456'
   },

packages/chameleon-tool/commanders/utils.js

@@ -10,6 +10,7 @@ const path = require('path');
 const fs = require('fs');
 const crypto = require('crypto');
 const cmlUtils = require('chameleon-tool-utils');
+const {getEntryName} = require('../configs/utils.js');
 
 /**
  * 非web端构建
@@ -227,16 +228,10 @@ function startCmlLinter(media) {
     });
   }
 }
-
-exports.createConfigJson = function() {
-  let configJsonPath = path.join(cml.projectRoot, 'dist/config.json');
-  let configObj = {};
-  if (cml.utils.isFile(configJsonPath)) {
-    configObj = JSON.parse(fs.readFileSync(configJsonPath, {encoding: 'utf-8'}))
+exports.getMD5 = function(weexjs) {
+  if (!weexjs) {
+    return '';
   }
-  // 获取weex jsbundle地址
-  let weexjs = configObj.weexjs || '';
-  let md5str = '';
   const weexjsName = weexjs.split('/').pop();
   const weexjsPath = path.resolve(cml.projectRoot, 'dist/weex/', weexjsName);
 
@@ -244,8 +239,17 @@ exports.createConfigJson = function() {
     const md5sum = crypto.createHash('md5');
     const buffer = fs.readFileSync(weexjsPath);
     md5sum.update(buffer);
-    md5str = md5sum.digest('hex').toUpperCase();
+    let md5str = md5sum.digest('hex').toUpperCase();
+    return md5str
   }
+}
+exports.createConfigJson = function() {
+  let configJsonPath = path.join(cml.projectRoot, 'dist/config.json');
+  let configObj = {};
+  if (cml.utils.isFile(configJsonPath)) {
+    configObj = JSON.parse(fs.readFileSync(configJsonPath, {encoding: 'utf-8'}))
+  }
+  // 获取weex jsbundle地址
 
   let config = cml.config.get();
   config.buildInfo = config.buildInfo || {};
@@ -257,6 +261,12 @@ exports.createConfigJson = function() {
     extAppId = config.buildInfo && config.buildInfo[`${extCommand}AppId`]
   }
   let {routerConfig, hasError} = cml.utils.getRouterConfig();
+  let entryName = getEntryName();
+  let weexjs = (configObj.entryName && configObj.entryName.js) || '';
+  let md5str = exports.getMD5(weexjs);
+  let mpa = routerConfig.mpa;
+
+
   if (hasError) {
     throw new Error('router.config.json格式不正确')
   }
@@ -267,8 +277,17 @@ exports.createConfigJson = function() {
       throw new Error('router.config.json 中未设置web端需要的domain字段');
     }
     let {domain, mode} = routerConfig;
-
     routerConfig.routes.forEach(item => {
+      // 如果配置了weex多页面，那么每个路由都要重新计算对应的weexjs
+      if (mpa && mpa.weexMpa && Array.isArray(mpa.weexMpa)) { // 配置了weex多页面
+        let weexMpa = mpa.weexMpa;
+        for (let i = 0; i < weexMpa.length ; i++) {
+          if (Array.isArray(weexMpa[i].paths) && weexMpa[i].paths.includes(item.path)) {
+            weexjs = configObj[`${entryName}${i}`] && configObj[`${entryName}${i}`].js;
+            md5str = exports.getMD5(weexjs);
+          }
+        }
+      }
       let webUrl = domain;
       if (mode === 'history') {
         webUrl += item.url;

packages/chameleon-tool/commanders/web/dev-server.js

@@ -8,6 +8,7 @@ var config = require('../../configs/config');
 var dynamicApiMiddleware = require('./dynamicApiMiddleware');
 var responseTime = require('./responseTime');
 const liveLoadMiddleware = require('webpack-liveload-middleware');
+const cmlUtils = require('chameleon-tool-utils');
 const fse = require('fs-extra');
 const tpl = require('chameleon-templates');
 const proxy = require('chameleon-dev-proxy');
@@ -118,8 +119,29 @@ module.exports = function({webpackConfig, options, compiler}) {
     }
     uri += 'preview.html';
     var entry = utils.getEntryName();
-    var jsbundle = `weex/${entry}.js`;
-    let staticParams = { jsbundle, subpath, buildType: cml.activePlatform };
+    const {routerConfig} = cmlUtils.getRouterConfig();
+    let mpa = routerConfig.mpa;
+    let weexBundles = [];
+    if (mpa && mpa.weexMpa && Array.isArray(mpa.weexMpa)) { // 配置了weex多页面
+      let weexMpa = mpa.weexMpa;
+      for (let i = 0; i < weexMpa.length ; i++) {
+        weexBundles.push({
+          bundle: `weex/${entry}${i}.js`,
+          paths: weexMpa[i].paths
+        })
+      }
+    } else { // 兼容原来的没有配置的情况
+      let allPaths = routerConfig.routes.reduce((result, current) => {
+        result.push(current.path);
+        return result;
+      }, [])
+      weexBundles.push({
+        bundle: `weex/${entry}.js`,
+        paths: allPaths
+      })
+    }
+    // var jsbundle = `weex/${entry}.js`;
+    let staticParams = { weexBundles, subpath, buildType: cml.activePlatform };
     createRoutesReact({server, staticParams});
 
     cml.log.notice('Listening at ' + uri);

packages/chameleon-tool/commanders/web/web-socket.js

@@ -42,7 +42,7 @@ exports.getRouteConfig = function getRouteConfig() {
       let usedPlatforms = item.usedPlatforms;
       return (!usedPlatforms || (usedPlatforms && usedPlatforms.includes('web')) || (usedPlatforms && usedPlatforms.includes('weex')))
     })
-    routerConfig = Object.assign(routerConfig, staticParams);// {jsbundle,subpath}
+    routerConfig = Object.assign(routerConfig, staticParams);// {weexBundles,subpath}
     return JSON.stringify(routerConfig);
   }
 }

packages/chameleon-tool/configs/entryLoader.js

+/*
+将 import router from '$ROUTER 转化为
+import router from '$ROUTER?query=0'; //'$ROUTER?query=1'之类的
+转化比较简单，可以用正则，该文件源文件在 configs/default/entry.js 中
+*/
+
+module.exports = function(content) {
+  this.cacheable(false);
+  const resourceQuery = this.resourceQuery
+  return content.replace('$ROUTER', `$ROUTER${resourceQuery}`)
+}

packages/chameleon-tool/configs/getWeexBuildConfig.js

@@ -19,16 +19,15 @@ module.exports = function (options) {
     plugins: [
       new CleanWebpackPlugin(['./*'], {root: outputPath, verbose: false}),
       new AssetsPlugin({
-        filename: '/dist/config.json',
-        processOutput: function (assets) {
-          let config = cml.config.get();
+        filename: '/dist/config.json'
+        // processOutput: function (assets) {
+        //   let config = cml.config.get();
+        //   let weexjs = assets[config.projectName].js;
+        //   return JSON.stringify({
+        //     weexjs
+        //   }, '', 4);
 
-          let weexjs = assets[config.projectName].js;
-          return JSON.stringify({
-            weexjs
-          }, '', 4);        
-
-        }
+        // }
       })
     ]
   }

packages/chameleon-tool/configs/getWeexCommonConfig.js

@@ -4,6 +4,7 @@ const path = require('path');
 const webpack = require('webpack')
 const merge = require('webpack-merge')
 const config = require('./config')
+const cmlUtils = require('chameleon-tool-utils');
 const getCommonConfig = require('./getCommonConfig');
 module.exports = function (options) {
   let {
@@ -73,13 +74,21 @@ module.exports = function (options) {
 
     ],
     node: config.nodeConfiguration
-
   }
 
   if (media === 'export') {
     commonConfig.output.libraryTarget = 'umd';
   }
-
+  const {routerConfig} = cmlUtils.getRouterConfig();
+  let mpa = routerConfig.mpa;
+  if (mpa && mpa.weexMpa && Array.isArray(mpa.weexMpa)) { // 配置了weex多页面
+    commonConfig.module.rules.push(
+      {
+        test: path.resolve(cml.projectRoot, 'node_modules/chameleon-runtime/.temp/entry.js'),
+        loader: path.join(__dirname, 'entryLoader.js')
+      }
+    )
+  }
   return merge(getCommonConfig(options), commonConfig);
 
 

packages/chameleon-tool/configs/preview.html

@@ -684,6 +684,7 @@
     (function () {
       var subpath = '';
       var jsbundle = '';
+      var weexBundles = [];//[{bundle,paths},{bundle,paths}]
       var routerConfig  = {
         mode: 'history',
         routes:[]
@@ -696,7 +697,8 @@
       //初始化全局参数值
       function initParams(params){
         subpath = params.subpath;
-        jsbundle = params.jsbundle;
+        weexBundles = params.weexBundles || [];
+        jsbundle = params.weexBundles && weexBundles[0].bundle;
       }
       function activeBuildType(params){
         var buildType = params.buildType;
@@ -807,7 +809,16 @@
           }
         }
       }
-
+      //所点击路由在对应的weexjsbundle里面
+      function updateWeexBundle(routePath){
+        var bundle = location.origin + '/' + jsbundle;
+        for(var i = 0; i < weexBundles.length; i++){
+          if(weexBundles[i].paths.indexOf(routePath) != -1){
+            bundle =location.origin + '/' + weexBundles[i].bundle;
+          }
+        }
+        return bundle;
+      }
       function setRoutesList(routes) {
         var bundleurl = location.origin + '/' + jsbundle;
         routesContainer.innerHTML = '';//先将该元素下面的所有子元素删除
@@ -842,6 +853,7 @@
               } else if (routerConfig.mode === 'hash') {
                 subpath = '#' + routes[index].url;
               }
+              bundleurl = updateWeexBundle(routes[index].path)
               setRouteSelected(index,routeListDom);
               setPageUrl(subpath);
               createQRCode(bundleurl, routes[index].path);

packages/chameleon-tool/configs/routerLoader.js

 const path = require('path');
 const cmlUtils = require('chameleon-tool-utils');
+const loaderUtils = require('loader-utils');
+
+const filterWeexRouter = function(routerConfig, params) {
+  let mpa = routerConfig.mpa;
+  let query = params.query;
+  if (mpa && mpa.weexMpa && Array.isArray(mpa.weexMpa)) {
+    // 处理 routerConfig.routes
+    let currentWeexRoute = (mpa.weexMpa[query] && mpa.weexMpa[query].paths) || [];
+    routerConfig.routes = routerConfig.routes.filter((route) => currentWeexRoute.includes(route.path))
+  }
+
+}
 module.exports = function(content) {
+  this.cacheable(false);
   let currentType = this.options.name || 'web';
+
   const context = (
     this.rootContext ||
     (this.options && this.options.context) ||
@@ -15,6 +29,10 @@ module.exports = function(content) {
   } else {
     let mode = routerConfig.mode;
     let routerList = '';
+    if (currentType === 'weex' && this.resourceQuery) {
+      let params = loaderUtils.parseQuery(this.resourceQuery);
+      filterWeexRouter(routerConfig, params)
+    }
     routerConfig.routes.forEach(item => {
       let usedPlatforms = item.usedPlatforms;
       if (!usedPlatforms || (usedPlatforms && usedPlatforms.includes(currentType))) {

packages/chameleon-tool/configs/utils.js

@@ -461,6 +461,7 @@ exports.getWeexEntry = function (options) {
   var entry = {};
   var entryFile = [];
   let entryConfig = cml.config.get().entry;
+  let entryJS = path.join(cml.projectRoot, 'node_modules/chameleon-runtime/.temp/entry.js');
   if (entryConfig && entryConfig.weex) {
     if (cml.utils.isFile(entryConfig.weex)) {
       entryFile.push(entryConfig.weex)
@@ -468,7 +469,7 @@ exports.getWeexEntry = function (options) {
       throw new Error('no such file: ' + entryConfig.weex);
     }
   } else {
-    entryFile.push(path.join(cml.projectRoot, 'node_modules/chameleon-runtime/.temp/entry.js'));
+    entryFile.push(entryJS);
   }
   if (options.media === 'dev') {
     exports.copyWeexLiveLoadFile(options.root, 'weex', options.media);
@@ -478,7 +479,17 @@ exports.getWeexEntry = function (options) {
     entryFile.unshift(path.join(__dirname, 'default/miniappPolyfill.js'));
   }
   var entryName = exports.getEntryName();
-  entry[entryName] = entryFile;
+  const {routerConfig} = cmlUtils.getRouterConfig();
+  let mpa = routerConfig.mpa;
+  if (mpa && mpa.weexMpa && Array.isArray(mpa.weexMpa)) { // 配置了weex多页面
+    let weexMpa = mpa.weexMpa;
+    for (let i = 0; i < weexMpa.length ; i++) {
+      let newEntry = entryFile.map((item) => (item === entryJS) ? `${item}?query=${i}` : item)
+      entry[`${entryName}${i}`] = newEntry
+    }
+  } else { // 兼容原来的没有配置的情况
+    entry[`${entryName}`] = entryFile
+  }
   return entry;
 }