search

easy-team / egg-react-webpack-boilerplate

Egg React Server Side Render(SSR) / Client Sider Render(CSR)
https://easyjs.cn/egg-react
MIT License
671 stars 93 forks source link

或许是没了解清楚,还是先issues了....start多次/一个符号/500/版本更新 #31

Closed tent42 closed 5 years ago

tent42 commented 5 years ago

非常感谢easy-team开源的这个框架,很美妙,甚至在某些方面要比nxxxxx,bxxxx,的项目让人一眼看上去顺畅很多.但是或许是因为了解的不太清楚,或者太弱鸡的原因,遇到了些问题. 谨启. 1.不管是我从该地址上下载的框架还是通过easywebpack init -> egg+react+server side render->single page+mutile page->yarn 的选项. 不管是用cnpm run start 还是 yarn start,都会在命令行端多次重复输出关于Loaded middleware from ../node_modules/egg-session/app/middleware 以及app_worker#6:1651 started at 7001, remain 3 (1203ms) 3->2->1->0. 当我cancle掉start进程时,多次输出app_worker#8:1653 disconnect, suicide: false, state: disconnected, current workers: ["1","2","3","4","5","6","7","8"] 以及cfork:master:1644]worker:1648 exit (code: null, exitedAfterDisconnect: false, state: dead, isDead: true, isExpected: false, worker.disableRefork: true) 当然,当我使用npm run dev或者yarn dev的时候是就不会出现了. 我看框架内使用start时是用egg-script启动的,dev时用egg-bin.eggjs初始化也是这么做的,但是我看egg-script的readme里写的是用eggctl start?这就搞不懂了....学术不精不知道为什么是这样.. 2.前段时间我用axios遇到了点关于cookie的问题,转用egg-fetch就ok了,我记不清在mock的github还是在哪个github issues里提到,关于axios和mockjs是有点结合问题的,框架为了展示对于api的简单展示,专门配了这个环境确实是十分用心,但是如果将json的返回放在一个新建的controller里,直接给个ctx.body,yield或await->get或post,是不是会更贴切一点?[这是完全无恶意的鸡蛋里挑骨头给的无价值提议,希望不要生气:)] 3.在github以及脚手架中,都存在mock下的list.js 对{Egg + React 服务端渲染骨架}使用了`进行包裹而有eslint报错,用改成''[这也是鸡蛋里挑骨头.....] 4.如果使用start启动除了上面说的运行多次问题,还有就是包括 / /about /home 等都是500的错误的问题....我在发issues时候是mac环境,linux环境下也是如此.目前没有使用过windows系统,应该也不存在windows环境下某些文件出现鬼畜的情况 5.package.json下的部分内容版本并不是很新,是必须要是这个环境还是可以选择重新install或者add呢?例如"antd": "^3.0.3"`"react": "^16.0.0" 再次非常感激贵团队对像我这种看到webpack就头疼绕道周围也没人讨论学习的人提供的如此美妙的框架,谢谢你们.期待回复.

tent42 commented 5 years ago

另外.如何在dev环境下,读取到easywebpack打包在内存中的文件?我在asset images文件夹下放了新的图片,但是应该用什么路径来读呢?即使我设置了loders.urlimages,是能直接/xx.jpg获取到,但是如果build后,hash值之类的问题应该怎么办?顺序是什么?

hubcarl commented 5 years ago

请看部署流程： https://www.yuque.com/easy-team/egg-react/online

hubcarl commented 5 years ago

另外.如何在dev环境下,读取到easywebpack打包在内存中的文件?我在asset images文件夹下放了新的图片,但是应该用什么路径来读呢?即使我设置了loders.urlimages,是能直接/xx.jpg获取到,但是如果build后,hash值之类的问题应该怎么办?顺序是什么?

使用时, 使用 文件原始路径和文件名， webpack 构建时，会自动帮你替换为构建后的真实路径

hubcarl commented 5 years ago

"antd": "^3.0.3" "react": "^16.0.0" 这种 ^ 会安装 3.x.x 和 16.x.x 的最新版本，依赖你可以修改

hubcarl commented 5 years ago

@tent42 骨架项目只是一个基础完整的骨架项目方案，具体一些问题和功能自己可以根据需要进行修改

tent42 commented 5 years ago

@hubcarl 谢谢您的耐心解答,见笑了 经过一段时间的摸索,上面的内容基本上已经摸得算是清楚了,但是又有了新的疑惑,还望您能指正. 首先是,从我目前的能力上来理解,easywebpack在做的逻辑是不是这样的. 1....当时url访问时,如标签或者刷新,这个url会直接被egg router捕获,然后将url传给前端包含了layout_html的index.jsx->staticrouter->swtich->router->相应react页面,然后将这些代码全部在egg下进行render,返回出来html,是server render 2....当以如交互访问时,其实所有的页面都是通过react-router-dom捕获到链接,然后跳转,渲染dom,其实是一个client render?

例如在index中export default (EASY_ENV_IS_NODE ? serverRender : clientRender());

我在serverRender中进行组件传值,子组件class App接收不到,反而是在clientRender中进行props组件传值可以接收到.

或者我将export default (EASY_ENV_IS_NODE ? serverRender : clientRender());改成export default serverRender ;时,页面的state变化就不再mount了.

所以能不能这么说,首屏必然是ssr的,也就是egg收到了url请求,render出的首页,而其他首页都是在之下的client render?

例如,当我在serverRender中打印一句console.log,在clientRender中打印另外一句console.log,那么,我将看到的是,后台terminal中,egg控制台打印出,serverRender而在浏览器端我看到的是clientRender. 在其他的打印信息中,控制台和前端也是两套内容.

我应该如何界定,我接下来写的代码,到底是在不是要分清楚我是在什么环境下进行编译的?例如我用react-helmet,但是view source中从来没看到这块内容被服务端渲染成html,而在react-helmet的github说,服务端渲染的话需要另外配置.

所以,我在下的任何代码,我都无法影响到index.jsx中serverRender中import的layout.jsx,即html模板?

我想要对html模板进行修改的话,就必须要把Link改成a,然后从egg中获取到url,然后在render环节进行例如,title或者keywords的设置.

或者说,我又能用哪些方法,在其他组件中去影响html的title之类?

不知道我的理解是否正确.还请解惑,

hubcarl commented 5 years ago
tent42 commented 5 years ago

再次感谢,但是上文您提到的情况我并不是很想用,因为如果我想用props传title的话,所有的跳转都需要用a吧?如果这样的话,页面就要全局刷新一次吧?那一个全屏闪烁...觉得就有违这些前端框架的意图了(不知道理解的是否错误,希望您能解惑)...虽然next的link也是a....但是咱们的项目提供的两个router我觉得才是很好的解决办法.

我这次想问一下,关于Module build failed (from ./node_modules/thread-loader/dist/cjs.js):的报错问题

还有

at transpile (/xxx/xxx/project/node_project/xxx/xxx/node_modules/babel-loader/lib/index.js:65:13)
    at /xxx/xxx/project/node_project/xxx/xxx/node_modules/babel-loader/lib/fs-cache.js:118:18
    at ReadFileContext.callback (/xxx/xxx/project/node_project/xxx/xxx/node_modules/babel-loader/lib/fs-cache.js:31:21)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:420:13)

因为我加入了redux saga,所以,改了一点babelrc之类...应该没什么问题.

这个错误出现在,当我想声明一个如下函数的时候,编译不报错,即使不去调用,渲染后会错误.

  5 | export class EditorModel extends Component {
> 6 |   abc = () => {
    |       ^
  7 |     console.log('abc');
  8 |   };
  9 |   render() {
tent42 commented 5 years ago

再请教一下 :) 我在https://www.yuque.com/easy-team/easywebpack/cssmodule里看到,关于easywebpack4里,通过约定的方法就自动是css module了.

/\.module\.(css|less|scss|stylus)/

是不是我将css的文件命名为例如,test.module.css或less就可以了?

我在下面看easywebpack3里面是要吧css写在app/web/page/css/module里

那应该是哪一个才是对的?

hubcarl commented 5 years ago

两种都是支持的，4 里面建议用 将css的文件命名为例如,test.module.css或less就可以