server/middlewares/clientRoute.js中路由匹配match()函数问题前是否要加await操作符?

[sivkun]

match({routes,location:ctx.url},(error,redirectLocation,renderProps)=>{ _renderProps=renderProps }) 改为： await match({routes,location:ctx.url},(error,redirectLocation,renderProps)=>{ _renderProps=renderProps }) 我使用你个这脚手架，学习开发一个小项目，运行npm run dev ，浏览器可以正常访问。 但是构建后，执行npm start，页面提示Not found！ 经过调试发现，在match函数回调中为_renderProps赋值。在match返回前继续往下运行，提示not found。 奇怪的是开发模式下正常，这是为什么呢？

[chikara-chan]

await关键字后面跟的只能是一个Promise对象

[sivkun]

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/await，如果这个值不是一个 promise，那么会把它转换成一个已经 resolved 的 promise，并且等待它。这里match确实是异步的，_renderProps在回调中被赋值，在赋值前，程序如果继续往下执行，会出问题啊。这个项目，没有出现问题，但是我用这个框架做一个demo时，确实出了问题。

[chikara-chan]

match本身是一个同步方法，不涉及网络请求与文件操作，可以在代码match函数内外console.log查看执行顺序

[chikara-chan]

方便上传项目源码吗

[sivkun]

我就是用console.log发现的这个问题。很奇怪的是，在dev模式没有这个问题。源码在这https://github.com/sivkun/myplayer-isomorphic。

[chikara-chan]

https://github.com/ReactTraining/react-router/issues/4677 产生原因：webpack2与webpack1对require.ensure的打包机制处理方式不同

[sivkun]

谢谢，我看一下

[chikara-chan]

审查webpack打包后的代码，可以看到 webpack1中require.ensure原型是

/******/    __webpack_require__.e = function requireEnsure(chunkId, callback) {
/******/        // "1" is the signal for "already loaded"
/******/        if(!installedChunks[chunkId]) {
/******/            var chunk = require("./chunk." + ({"1":"home","2":"explore","3":"about"}[chunkId]||chunkId) + ".js");
/******/            var moreModules = chunk.modules, chunkIds = chunk.ids;
/******/            for(var moduleId in moreModules) {
/******/                var _m = moreModules[moduleId];

/******/                // Check if module is deduplicated
/******/                switch(typeof _m) {
/******/                case "object":
/******/                    // Module can be created from a template
/******/                    modules[moduleId] = (function(_m) {
/******/                        var args = _m.slice(1), templateId = _m[0];
/******/                        return function (a,b,c) {
/******/                            modules[templateId].apply(this, [a,b,c].concat(args));
/******/                        };
/******/                    }(_m));
/******/                    break;
/******/                case "function":
/******/                    // Normal module
/******/                    modules[moduleId] = _m;
/******/                    break;
/******/                default:
/******/                    // Module is a copy of another module
/******/                    modules[moduleId] = modules[_m];
/******/                    break;
/******/                }
/******/            }
/******/            for(var i = 0; i < chunkIds.length; i++)
/******/                installedChunks[chunkIds[i]] = 1;
/******/        }
/******/        callback.call(null, __webpack_require__);
/******/    };

webpack2的require.ensure原型是

/******/    __webpack_require__.e = function requireEnsure(chunkId) {
/******/        // "0" is the signal for "already loaded"
/******/        if(installedChunks[chunkId] !== 0) {
/******/            var chunk = require("./" + chunkId + ".bundle.js");
/******/            var moreModules = chunk.modules, chunkIds = chunk.ids;
/******/            for(var moduleId in moreModules) {
/******/                modules[moduleId] = moreModules[moduleId];
/******/            }
/******/            for(var i = 0; i < chunkIds.length; i++)
/******/                installedChunks[chunkIds[i]] = 0;
/******/        }
/******/        return Promise.resolve();
/******/    };

webpack1直接调用回调函数，webpack2返回的是个promise

[kevin-love]

我也遇到了上面的问题，但我改为一下： if(typeof require.ensure !=='function'){ require.ensure = function(dependencies,callback){ setTimeout(function() { callback(require) });
} }

还是无法解决，match的回调还是后执行，不知道有没有其他方法呢~谢谢