Giter Club home page Giter Club logo

egg-react-webpack-boilerplate's People

Contributors

hubcarl avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

egg-react-webpack-boilerplate's Issues

Docker 环境 build 失败,由于 imagemin-webpack-plugin 安装引起

目前问题

Docker 环境缺少相关依赖,导致 imagemin-webpack-plugin 图片压缩失败,Docker File 无法正常执行,需要手动操作

目前解法 ,Docker 环境安装 imagemin-webpack-plugin 相关依赖

RUN apk --no-cache --virtual build-dependencies add
python
make
g++
autoconf
libpng-dev
libtool
automake
nasm \

gifsicle

&& curl -O https://www.lcdf.org/gifsicle/gifsicle-$GIFSICLE_VERSION.tar.gz
&& tar zxf gifsicle-$GIFSICLE_VERSION.tar.gz
&& cd gifsicle-$GIFSICLE_VERSION
&& cnpm install

How to custom Ant Design theme?

I want to custom ant design theme by its document(https://ant.design/docs/react/customize-theme), here is:

If you import styles by specifying the style option of babel-plugin-import, change it from css to true, which will import the less version of antd.

so I change the .babelrc
["import", { libraryName: "antd", style: true }]],

then I modify the less-loader of webpack.config.js, so I can use modifyVars to custome my theme

loaders: {
    less: {
      enable: true,
      test: /\.less/,
      loader: 'less-loader',
      options: {
        javascriptEnabled: true,
        modifyVars: {'primary-color': '#1DA57A'}
      }
    }
  },

however, it doesn't work, here is error messages:

2018-04-22 10:09:57,802 ERROR 57327 [-/10.183.76.232/-/232ms GET /] nodejs.SyntaxError: Invalid or unexpected token
(function (exports, require, module, __filename, __dirname) { @import "./themes/default";
                                                              ^

SyntaxError: Invalid or unexpected token
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:607:28)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/anonymous/projects/egg-react/node_modules/antd/lib/layout/style/index.js:3:1)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Module.require (module.js:587:17)

Any help would be appreciated!

没有找到配置实时watch代码的命令

package.json里没有看到有启动实时watch代码的脚本。目前执行npm start后,修改了controller和web下面的代码后,不能实时热更新加载。每次修改后,需要重新执行下npm run build:test,再执行下npm start,


有看到一条log,[egg-watcher:app] watcher start success。但实际上好像没有效果没有在watch.

对TS的支持

请问typescript 分支删掉了吗?
是否会增加TS 的 Demo.

Inject js/css时,提供relative path的选项?

我发现页面render时inject到html里的css/js文件都是绝对路径, 比如/public/xxx.

但有时候我们可能在一个domain下有多个项目,比如xxx.com/projectA/,这时我们在deploy时需要设置<base href="/projectA/" >, 然后css/js的reference需要是相对路径。

我看了下,当前的code是读config/manifest.json里的deps然后inject.
所以我现在是添加了下面的code到webpack.config.js里来work around这个问题:

  done() {
    // replace `/public` to `public` for relative path
    let file = './config/manifest.json';
    let manifest = require(file);
    manifest.deps = JSON.parse(JSON.stringify(manifest.deps).replace(/"\//gm, '"'));
    fs.writeFileSync(file, JSON.stringify(manifest, null, 2), 'utf8');

    console.log('---webpack compile finish---');
  }

不过,是不是能添加一个option来选择是否inject相对路径?

怎么配置css的sourceMap?

feature: 需要配置生成css的sourceMap,定位到源码

loaders: {
    css: {
      options:{
        sourceMap: true
      }
    },
    less:{
      options:{
        javascriptEnabled: true,
        sourceMap: true
      }
    }
  }

这样不生效,不知道是不是在mini-css插件中配置?

package.json的scripts建议增加debug

项目目前缺少调试模式,是不是可以在package.json的scripts增加"debug": "egg-bin debug",同时devDependencies增加egg-bin,方便调试

[提问]已经拥有egg框架,如何实现?

背景是这样,我用eggjs的脚手架做了一个纯后端api服务。现在需要添加一些前端页面展示数据和业务。
1.请问如何在eggjs框架下一步步添加react的ssr支持?
2.请问eggjs官方的egg-react-view,与egg-view-react-ssr有什么区别?
3.项目脚手架服务端渲染思路是不是web目录下编译react,然后放到view目录下?
我看官方文档和官方插件都指向这个项目,但是看到的都是技术名次只言片语,很懵逼啊。感谢解答疑惑。

按照流程走完npm run dev 报错

2019-01-31 15:21:22,111 ERROR 808 [-/172.16.1.54/-/65ms GET /] nodejs.TypeError: leaveModule is not a function
at eval (webpack:///./app/web/framework/layout/layout.jsx?:88:3)
at Module.eval (webpack:///./app/web/framework/layout/layout.jsx?:89:3)
at eval (webpack:///./app/web/framework/layout/layout.jsx?:90:30)
at Module../app/web/framework/layout/layout.jsx (evalmachine.:120:1)
at webpack_require (evalmachine.:20:30)
at Module.eval (webpack:///./app/web/page/home/home.jsx?./node_modules/babel-loader/lib!./app/web/framework/entry/server-loader.js:4:85)
at eval (webpack:///./app/web/page/home/home.jsx?./node_modules/babel-loader/lib!./app/web/framework/entry/server-loader.js:74:30)
at Module../node_modules/babel-loader/lib/index.js!./app/web/framework/entry/server-loader.js!./app/web/page/home/home.jsx (evalmachine.:167:1)
at webpack_require (evalmachine.:20:30)
at evalmachine.:84:18
at evalmachine.:87:10
at /Users/project/others/egg/egg-test-h/node_modules/egg-webpack-react/app.js:23:37
at Generator.next ()
at onFulfilled (/Users/project/others/egg/egg-test-h/node_modules/co/index.js:65:19)
at
at process._tickCallback (internal/process/next_tick.js:188:7)

pid: 808
hostname: hewenkedeMacBook-Pro.local

重新走了几次都是这样

怎样提取公共css?

你好,我用的是服务端渲染,想问下现在有三个页面A,B,C,都会引用app/web/asset/common.css,该如何提取这个公共样式文件?因为现在用的是easywebpack4,提取插件是mini-css-extract-plugin,没找到相应的配置方法,谢谢

纯前端项目改造ssr,遇到combineReducers的问题

在创建store的过程中,传入的reducers做了改造。使用combineReducers来生成rootReducers。项目会警告:

Unexpected keys "ctx", "request", "helper", "gettext", "__", "csrf", "url" found in preloadedState argument passed to createStore. Expected to find one of the known reducer keys instead: "userInfo", "loading", "exam", "list", "landingInfo". Unexpected keys will be ignored.

打包后,npm start访问,会报500错误。

请问这个问题应该怎么解决呢?或者reducer应该怎么组织呢

window7 项目npm run dev时报manifest.json找不到,实际是存在的

错误内容:
ENOENTError: ENOENT: no such file or directory, lstat 'E:\Workspaces\egg-react-webpack-boilerplate\config\manifest.json'
errno: -4058
code: 'ENOENT'
syscall: 'lstat'
path: 'E:\Workspaces\egg-react-webpack-boilerplate\config\manifest.json'
dir: 'E:\Workspaces\egg-react-webpack-boilerplate\config'
name: 'ENOENTError'
pid: 8272

你好,请问如何把antd 替换为 @alifd/next

我引入了@alifd/next以后,然后显示一个button,但是这个button没有css样式.所以我应该怎么解决一下,谢谢了~
import '@alifd/next/lib/button/style';
<Button type="primary" size="large"><Icon type="atm" />Large</Button>

how can I import antd?

想要引入antd这个库,install i antd --save-dev后,在组件页面使用import { Button, Icon } from 'antd';,没有效果,该怎么样集成第三方库呢?谢谢

antd的List组件在框架里异常的表现

如图。使用antd的List组件,渲染出N个<List.Item>,但第一个<List.Item>总是被一个不明容器嵌套着,这个不明容器的样式随着<List.Item>样式的改变而改变,也就是等同于第一个<List.Item>嵌套了自己。

已知:
采用的是服务端渲染的多页面,ctx.render()渲染
asset里的css文件全删,header组件的css也重新设置。
项目是昨天git clone下来的。antd的版本是3.15.2,电脑系统是win10.

info

egg-react-webpack-boilerplate 按照配置流程走下去,发现serviceworker配置不起作用

{
"name": "egg-react-webpack-boilerplate",
"version": "4.3.1",
"description": "基于 easywebpack-react 和 egg-view-react-ssr 插件服务端渲染工程骨架项目",
"scripts": {
"clean": "easy clean",
"build": "EGG_SERVER_ENV=prod NODE_ENV=production easy build",
"debug": "egg-bin debug",
"dev": "egg-bin dev",
"start": "EGG_SERVER_ENV=prod NODE_ENV=production egg-scripts start",
"lint": "eslint .",
"fix": "eslint --fix .",
"ii": "npm install --registry https://registry.npm.taobao.org",
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
},
"dependencies": {
"antd": "^3.0.3",
"egg": "^2.1.0",
"egg-cors": "^2.0.0",
"egg-logger": "^1.5.0",
"egg-scripts": "^2.8.1",
"egg-serviceworker": "^1.0.0",
"egg-validate": "^1.0.0",
"egg-view-react-ssr": "^2.2.6",
"extend": "~3.0.0",
"history": "^4.7.2",
"lodash": "^4.17.4",
"mockjs": "^1.0.1-beta3",
"moment": "^2.17.1",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-router-config": "^1.0.0-beta.4",
"react-router-dom": "^4.2.2",
"react-router-redux": "^4.0.8",
"redux": "^3.7.2",
"service-worker-register": "^1.2.6"
},
"devDependencies": {
"conventional-changelog-cli": "^1.3.5",
"easywebpack-cli": "^4.0.0",
"easywebpack-react": "^4.3.0",
"egg-bin": "^4.5.0",
"egg-webpack": "^4.4.1",
"egg-webpack-react": "^2.0.2",
"eslint-config-egg": "^5.1.1",
"eslint-plugin-react": "^7.1.0",
"imagemin-webpack-plugin": "^2.3.0",
"ip": "^1.1.5"
},
"engines": {
"node": ">=8.0.0"
},
"ci": {
"version": "8, 9"
},
"repository": {
"type": "git",
"url": "git+https://github.com/easy-team/egg-react-webpack-boilerplate.git"
},
"author": "[email protected]",
"license": "MIT",
"homepage": "https://github.com/easy-team/egg-react-webpack-boilerplate"
}

ES7的方式定义React组件报错

该工程骨架目前使用都正常,但是发现拷antd pro的示例模块过来报错,例如:

class LoginDemo extends React.Component {
  state = {
    notice: '',
    type: 'tab2',
    autoLogin: true,
  }

  onTabChange = (key) => {
    this.setState({
      type: key,
    });
  }

  render() {
    return (
      <Login
        defaultActiveKey={this.state.type}
        onTabChange={this.onTabChange}
      >
          <a style={{ float: 'right' }} href="">注册账户</a>
      </Login>
    );
  }
}

image

image

问题:

  1. 这种定义state的方式报错;
  2. class里使用箭头函数报错;
    可能是目前不支持ES7的方式写React;

尝试了安装babel-preset-stage-0babel-preset-es2017,然后在.babelrc 里的presets 添加stage-0es2017,这样也不行,重启webpack进行编译依然报错。

本地windows下编译不会报错,在容器中编译 报错

本地windows下编译不会报错,在容器中编译 报错,错误信息如下
/home/jenkins/workspace/StartRead99ServerBuild/node_modules/mini-css-extract-plugin/dist/index.js:81 \ 14:58:13 const resource = this._identifier.split('!').pop(); \ 14:58:13 ^ 14:58:13 \ 14:58:13 TypeError: Cannot read property 'split' of undefined \ 14:58:13 at CssModule.nameForCondition (/home/jenkins/workspace/StartRead99ServerBuild/node_modules/mini-css-extract-plugin/dist/index.js:81:39) \ 14:58:13 at Function.checkTest (/home/jenkins/workspace/StartRead99ServerBuild/node_modules/webpack/lib/optimize/SplitChunksPlugin.js:307:52) \ 14:58:13 at Object.fn [as getCacheGroups] (/home/jenkins/workspace/StartRead99ServerBuild/node_modules/webpack/lib/optimize/SplitChunksPlugin.js:247:35) \ 14:58:13 at compilation.hooks.optimizeChunksAdvanced.tap.chunks (/home/jenkins/workspace/StartRead99ServerBuild/node_modules/webpack/lib/optimize/SplitChunksPlugin.js:513:38) \ 14:58:13 at SyncBailHook.eval [as call] (eval at create (/home/jenkins/workspace/StartRead99ServerBuild/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:17:12), <anonymous>:7:16) \ 14:58:13 at SyncBailHook.lazyCompileHook [as _call] (/home/jenkins/workspace/StartRead99ServerBuild/node_modules/webpack/node_modules/tapable/lib/Hook.js:35:21) \ 14:58:13 at Compilation.seal (/home/jenkins/workspace/StartRead99ServerBuild/node_modules/webpack/lib/Compilation.js:1207:38) \ 14:58:13 at hooks.make.callAsync.err (/home/jenkins/workspace/StartRead99ServerBuild/node_modules/webpack/lib/Compiler.js:547:17) \ 14:58:13 at _done (eval at create (/home/jenkins/workspace/StartRead99ServerBuild/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:9:1) \ 14:58:13 at _err3 (eval at create (/home/jenkins/workspace/StartRead99ServerBuild/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:56:22) \ 14:58:13 at _addModuleChain (/home/jenkins/workspace/StartRead99ServerBuild/node_modules/webpack/lib/Compilation.js:1064:12) \ 14:58:13 at processModuleDependencies.err (/home/jenkins/workspace/StartRead99ServerBuild/node_modules/webpack/lib/Compilation.js:980:9) \ 14:58:13 at _combinedTickCallback (internal/process/next_tick.js:131:7) \ 14:58:13 at process._tickCallback (internal/process/next_tick.js:180:9) \ 14:58:13 npm ERR! code ELIFECYCLE \ 14:58:13 npm ERR! errno 1 \ 14:58:13 npm ERR! [email protected] build:cross-env easywebpack build prod\ 14:58:13 npm ERR! Exit status 1 \ 14:58:13 npm ERR! \ 14:58:13 npm ERR! Failed at the [email protected] build script. \ 14:58:13 npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

发送多个请求获取数据

获取数据可以在 asyncData 中发送请求,但它只能返回一个request。如何发多个请求获取数据?目前想到的办法是在controller 的node 层请求多个数据,然后通过render( ) 传给react 组件。请问有什么更好的办法

怎样调试ssr

webstorm怎么调试这里的serverRender的jsx,始终没有找到好的解决方案

Mac上直接安装完依赖 npm start 直接报错 start with env: isProduction: false, EGG_SERVER_ENV: undefined, NODE_ENV: undefined

[email protected] start /Users/chaominglu/mycenter/coding/egg-react-webpack-boilerplate-feature-green-multi 2
node index.js

2018-04-08 22:39:13,594 INFO 17854 [master] =================== egg start =====================
2018-04-08 22:39:13,595 INFO 17854 [master] node version v8.10.0
2018-04-08 22:39:13,595 INFO 17854 [master] egg version 2.6.0
2018-04-08 22:39:13,596 INFO 17854 [master] start with options: {"framework":"/Users/chaominglu/mycenter/coding/egg-react-webpack-boilerplate-feature-green-multi 2/node_modules/egg","baseDir":"/Users/chaominglu/mycenter/coding/egg-react-webpack-boilerplate-feature-green-multi 2","workers":8,"plugins":null,"https":false,"key":"","cert":"","typescript":false}
2018-04-08 22:39:13,596 INFO 17854 [master] start with env: isProduction: false, EGG_SERVER_ENV: undefined, NODE_ENV: undefined
2018-04-08 22:39:13,603 INFO 17854 [master] agent_worker#1:17855 start with clusterPort:55584
2018-04-08 22:39:14,690 INFO 17854 [master] agent_worker#1:17855 started (1091ms)
2018-04-08 22:39:14,691 INFO 17854 [master] start appWorker with args ["{"framework":"/Users/chaominglu/mycenter/coding/egg-react-webpack-boilerplate-feature-green-multi 2/node_modules/egg","baseDir":"/Users/chaominglu/mycenter/coding/egg-react-webpack-boilerplate-feature-green-multi 2","workers":8,"plugins":null,"https":false,"key":"","cert":"","typescript":false,"clusterPort":55584}"]
2018-04-08 22:39:14,720 INFO 17854 [master] app_worker#1:17856 start, state: none, current workers: ["1","2","3","4","5","6","7","8"]
2018-04-08 22:39:14,720 INFO 17854 [master] app_worker#2:17857 start, state: none, current workers: ["1","2","3","4","5","6","7","8"]
2018-04-08 22:39:14,720 INFO 17854 [master] app_worker#3:17858 start, state: none, current workers: ["1","2","3","4","5","6","7","8"]
2018-04-08 22:39:14,720 INFO 17854 [master] app_worker#4:17859 start, state: none, current workers: ["1","2","3","4","5","6","7","8"]
2018-04-08 22:39:14,720 INFO 17854 [master] app_worker#5:17860 start, state: none, current workers: ["1","2","3","4","5","6","7","8"]
2018-04-08 22:39:14,720 INFO 17854 [master] app_worker#6:17861 start, state: none, current workers: ["1","2","3","4","5","6","7","8"]
2018-04-08 22:39:14,727 INFO 17854 [master] app_worker#7:17862 start, state: none, current workers: ["1","2","3","4","5","6","7","8"]
2018-04-08 22:39:14,728 INFO 17854 [master] app_worker#8:17863 start, state: none, current workers: ["1","2","3","4","5","6","7","8"]
2018-04-08 22:39:16,794 ERROR 17861 [app_worker] server got error: bind EADDRINUSE null:7001, code: EADDRINUSE
2018-04-08 22:39:16,794 ERROR 17861 [app_worker] exit with code:1
2018-04-08 22:39:16,800 ERROR 17856 [app_worker] server got error: bind EADDRINUSE null:7001, code: EADDRINUSE
2018-04-08 22:39:16,801 ERROR 17856 [app_worker] exit with code:1
[2018-04-08 22:39:16.807] [cfork:master:17854] worker:17861 disconnect (exitedAfterDisconnect: false,state: disconnected, isDead: false, worker.disableRefork: true)
[2018-04-08 22:39:16.808] [cfork:master:17854] don't fork, because worker:17861 will be kill soon
2018-04-08 22:39:16,808 INFO 17854 [master] app_worker#6:17861 disconnect, suicide: false, state: disconnected, current workers: ["1","2","3","4","5","6","7","8"]
2018-04-08 22:39:16,808 ERROR 17859 [app_worker] server got error: bind EADDRINUSE null:7001, code: EADDRINUSE
2018-04-08 22:39:16,809 ERROR 17859 [app_worker] exit with code:1
[2018-04-08 22:39:16.809] [cfork:master:17854] worker:17861 exit (code: 1, exitedAfterDisconnect: false, state: dead, isDead: true, isExpected: false, worker.disableRefork: true)
2018-04-08 22:39:16,812 ERROR 17854 nodejs.AppWorkerDiedError: [master] app_worker#6:17861 died (code: 1, signal: null, suicide: false, state: dead), current workers: ["1","2","3","4","5","7","8"]
at Master.onAppExit (/Users/chaominglu/mycenter/coding/egg-react-webpack-boilerplate-feature-green-multi 2/node_modules/egg-cluster/lib/master.js:387:21)
at emitOne (events.js:116:13)
at Master.emit (events.js:211:7)
at Messenger.sendToMaster (/Users/chaominglu/mycenter/coding/egg-react-webpack-boilerplate-feature-green-multi 2/node_modules/egg-cluster/lib/utils/messenger.js:122:17)
at Messenger.send (/Users/chaominglu/mycenter/coding/egg-react-webpack-boilerplate-feature-green-multi 2/node_modules/egg-cluster/lib/utils/messenger.js:87:12)
at EventEmitter.cluster.on (/Users/chaominglu/mycenter/coding/egg-react-webpack-boilerplate-feature-green-multi 2/node_modules/egg-cluster/lib/master.js:264:22)
at emitThree (events.js:141:20)
at EventEmitter.emit (events.js:217:7)
at ChildProcess.worker.process.once (internal/cluster/master.js:186:13)
at Object.onceWrapper (events.js:317:30)
name: 'AppWorkerDiedError'
pid: 17854
hostname: ChaomingdeMacBook-Pro.local

2018-04-08 22:39:16,813 ERROR 17854 [master] app_worker#6:17861 start fail, exiting with code:1
2018-04-08 22:39:16,813 ERROR 17854 [master] exit with code:1
2018-04-08 22:39:16,821 ERROR 17855 [agent_worker] receive disconnect event on child_process fork mode, exiting with code:110
npm 2018-04-08 22:39:16,824 ERROR 17855 [agent_worker] exit with code:110
ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: node index.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2018-04-08 22:39:16,830 ERROR 17863 [app_worker] receive disconnect event in cluster fork mode, exitedAfterDisconnect:false

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/chaominglu/.npm/_logs/2018-04-08T14_39_16_829Z-debug.log
ChaomingdeMacBook-Pro:egg-react-webpack-boilerplate-feature-green-multi 2 chaominglu$ 2018-04-08 22:39:16,855 ERROR 17860 [app_worker] receive disconnect event in cluster fork mode, exitedAfterDisconnect:false
2018-04-08 22:39:16,875 ERROR 17862 [app_worker] receive disconnect event in cluster fork mode, exitedAfterDisconnect:false
2018-04-08 22:39:16,888 ERROR 17857 [app_worker] receive disconnect event in cluster fork mode, exitedAfterDisconnect:false
2018-04-08 22:39:16,925 ERROR 17858 [app_worker] receive disconnect event in cluster fork mode, exitedAfterDisconnect:false

你好,我在研究这个骨架,引入 react-router, redux, mobx, 是个什么思路。

首先,很高兴有egg,react的骨架,感谢作者。
如题

  1. redux或者mobx,我可以直接引入。
  2. react-router,怎么办。因为我看现在的骨架用的是后端路由。如果没有前端路由,路由信息就无法获取,跳转的时候。现在没有this.props对应的路由信息。
  3. 如果用了react-router + redux,前后端路由,怎么共用的问题,或者有什么比较好的解决方案。

dev 模式无法找到 home.js

npm run dev 后,报错如下

image

使用 cli 或者直接 clone 项目都会出现这个错误。
Node v8.11.2
Window10, Chrome。

阿里云服务器上编译构建报错

执行easy build每次都报错,webpack构建到90%多就直接异常退出了。

服务端构建的文件已生成到 app/view 目录,config目录下的manifest.json文件也生成了,但是public目录却没生成

下图为easy build的执行结果和npm错误日志

20191205110353

How to hot reload with SPA?

`Ignored an update to unaccepted module ./app/web/component/spa/redux/app.js -> ./app/web/page/spa/redux.jsx -> 6

[HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See https://webpack.js.org/concepts/hot-module-replacement/ for more details.

[HMR] - ./app/web/component/spa/redux/app.js`

冲突

我从master 分支,切换到 feature/green/spa 有冲突

feature/green/spa分支不修改代码直接打的生产包启动访问,页面显示为空

feature/green/spa分支拉到本地,不修改代码直接打的生产包启动访问,页面显示为空。操作步骤如下

  1. git clone XXX
  2. git checkout feature/green/spa
  3. npm i
  4. easy clean all
  5. easy build prod
  6. easy zip
    image
    如上图所示,打包没有报错
  7. 拷贝,解压zip包
  8. npm install --production
  9. npm start
    页面访问http://127.0.0.1:7001/ssr,显示一片空白,且只有一个请求
    image
    目前对这套框架还处于学习阶段,望多多指教,万分感谢!

启动就报错了

ERROR in ./~/_babel-loader@7.1.2@babel-loader/lib!./app/web/framework/entry/loader.js!./app/web/page/hello/hello.jsx
Module build failed: SyntaxError: C:/Users/xiaobin/Desktop/egg/egg-react-webpack-boilerplate/app/web/page/hello/hello.jsx: Bad character escape sequence (4:33)

  2 |     import React from 'react';
  3 |     import ReactDom from 'react-dom';
> 4 |     import Hello from '\egg\egg-react-webpack-boilerplate\app\web\page\hello\hello.jsx';
    |                                  ^
  5 |     const state = window.__INITIAL_STATE__;
  6 |     ReactDom.render(<Hello {...state} />, document.getElementById('app'));
  7 |   

 @ multi ./~/[email protected]@webpack-hot-middleware/client?path=http://127.0.0.1:9000/__webpack_hmr&noInfo=false&reload=false&quiet=false babel-loader!./app/web/framework/entry/loader.js!./app/web/page/hello/hello.jsx

window.__INITIAL_STATE__ 会在response中输出

抱歉,我没能在语雀专栏里或者在github上找到.才想着再问点东西..
window.INITIAL_STATE 这个属性在每一个页面中,我都可以在chrome 开发工具 network response中看到完整的信息,包括csrf的信息,即使csrf已经设了httponly,还有包括这个页面被egg传入的信息.

想这些信息我如何能不让他在显式输出呢?毕竟如果页面需要数据,好像都是要走response的?

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

非常感谢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就头疼绕道周围也没人讨论学习的人提供的如此美妙的框架,谢谢你们.期待回复.

.babelrc 配置浏览器兼容问题

环境:基于本仓库
.babelrc 文件内容如下:

{
  "env":{
    "node": {
      "presets": [
        "react",
        ["env", {
          "modules": false,
          "targets": {
            "node": "current"
          }
        }]
      ],
      "plugins": [
        "react-hot-loader/babel",
        "transform-object-assign",
        "syntax-dynamic-import",
        "transform-class-properties",
        "transform-decorators-legacy",
        "transform-object-rest-spread",
        ["transform-runtime", {
          "helpers": false,
          "polyfill": false,
          "regenerator": true,
          "moduleName": "babel-runtime"
        }],
        ["import", { "libraryName": "antd", "style": "css" }]]
    },
    "web": {
      "presets": [
        "react",
        ["env", {
          "modules": false,
          "targets": {
            "browsers": ["last 2 versions", "not ie <= 7"]
          }
        }]
      ],
      "plugins": [
        "react-hot-loader/babel",
        "transform-object-assign",
        "syntax-dynamic-import",
        "transform-class-properties",
        "transform-decorators-legacy",
        "transform-object-rest-spread",
        ["transform-runtime", {
          "helpers": false,
          "polyfill": true,
          "regenerator": true,
          "moduleName": "babel-runtime"
        }],
        ["import", { "libraryName": "antd", "style": "css" }]]
    }
  },

  "comments": false
}

打包命令为:
easy build && easy zip --target ./dist --filename app --deps

打包后有一部分代码没有从es6语法转译:
打包目录 /disp/app/dist/app/public/js/chunk//.js
下面是我打包后查看到的未转译代码:
image
结果:无法兼容
期望:targets配制后能够兼容ie9

补充::每个打包后的js文件都有上述截图代码,是否react-hot-load相关代码没转译

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.