Coder Social home page Coder Social logo

alibaba / beidou Goto Github PK

View Code? Open in Web Editor NEW
2.7K 97.0 276.0 25 MB

:milky_way: Isomorphic framework for server-rendered React apps

License: MIT License

JavaScript 98.21% Makefile 0.53% HTML 0.12% Shell 0.42% Less 0.72% SCSS 0.01%
isomorphic server-rendered react-server-render css-module react-performance universal ssr node-framework enterprise-framework es6

beidou's Introduction

Beidou

🌌 Isomorphic framework for server-rendered React apps

NPM version build status Test coverage NPM Downloads Gitter Node

Chinese Documentation - 中文文档

Features

  • ✔︎ High performance, 2-5 times speedup compares to client-side rendering
  • ✔︎ Search engine optimization(SEO)
  • ✔︎ ES6/ES7/ES8 supported
  • ✔︎ TypeScript supported
  • ✔︎ React renderToNodeStream supported
  • ✔︎ SCSS/Sass with autoprefixer supported
  • ✔︎ Auto router supported
  • ✔︎ Extends default webpack config supported
  • ✔︎ View rendering middleware supported
  • ✔︎ User-friendly CLI tool
  • ✔︎ Lots of plugins

Release 2.0

New Features

  • BREAKING CHANGE: Upgrade internal babel to 7

  • BREAKING CHANGE: Upgrade internal webpack to 4

  • Completely TypeScript Support, enable with one line config:

// package.json

{
  "config": {
    "typescript": true
  }
}

see typescript example for more detail.

Quick start

$ npm install beidou-cli -g
$ beidou init
$ npm run dev

Navigate to http://localhost:6001/

Boilerplate

Documentation

Articles

Performance

  • Isomorphic rendering performance VS client side rendering performance in 3G network

isomorphic vs performance

  • Performance comparison in different network environment

isomorphic vs performance

Need Help?

Please let us know how can we help. Do check out issues for bug reports or suggestions first.

DingTalk group supported

DingTalk Group Number: 23374510

License

MIT

beidou's People

Contributors

ahungrynoob avatar beidan avatar chenmingjia avatar davidnotes avatar dependabot[bot] avatar devrsi0n avatar fantasyroot avatar jacksontian avatar justquanyin avatar kittboy avatar lanqy avatar njugray avatar olivewind avatar weichunpeng avatar weihomechen avatar xdlrt avatar xiangxingchen 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  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

beidou's Issues

beidou部署以后打开报404

开发模式一切正常,构建部署到阿里云后,浏览器访问报404,直接访问静态资源可以打开,是否因为路由问题?

dev 分支兼容版本问题

会有这个警告:

📦 building modules(node:84499) DeprecationWarning: Chunk.modules is deprecated. Use Chunk.getNumberOfModules/mapModules/forEachModule/containsModule instead.

Can't find "\index.jsx" from "./client" (code: ERR_ASSERTION)

Hi, guys.
When I do a demo as your quick-start says just like (
$ npm install beidou-init -g $ beidou init $ npm install $ npm run start

), it show me a 500 error with these words (
Can't find \index.jsx from ....\beidou-demo/client (code: ERR_ASSERTION)
, but it has a index.jsx in client folder).
And I use Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0.
So why do it exist?
Do I need to learn sth more about eggjs ?

感谢阿里出的这套react服务端渲染框架,这里是一些关于文档的建议

首先贴出next框架的教程主页:https://learnnextjs.com/
我觉得next框架的2w颗星,这套教程功不可没。

  • 鄙人作为react同构的新手与爱好者,曾苦于寻找一个框架,来免去我自己配置webpack的痛苦,直到我找到了next框架,在花了几小时做完他们的教程之后,发现这套框架的**和同构非常贴切。教程教会了我路由切换,css的node兼容的解决方案等等。最大的便利之处就是,在阅读详细文档之前,这套教程几乎都对文档中的主要的点都点到了,但是并没有深入进去。

  • 它的意义在于:对于新手,或者不熟悉这套框架但是熟悉同构**的react爱好者,它带来的是广度上对于next的认识,而非深度上,有了广度的认识之后,爱好者可以快速上手使用它搭建hello world,或者带有fetch,简单路由功能的服务端渲染网站。
    在应用的过程中,爱好者可以从他们的github主页去获取详细的知识点,来解决需求。
    所以我的重点在于:先写出简单的教程,让爱好者迅速上车,理解框架思路,再后备详细的文档让他们查阅。比如cookie,session啊各自功能性文档。
    *个人想法:英文作为全球通用语言,对于国际化来说必不可少,但是作为**人的我们,如果做出了成绩,写文档的时候首选中文的话,应该会增加**互联网企业在世界的影响力吧,毕竟国内国外汉语开发者也不少。哈哈。
    最后的最后:谢谢阿里

运行beidou v1.0.4 dev和build后编译报错

环境:
npm install beidou-cli -g
beidou init后选择css-modules,

运行npm run dev和npm run build一直报如下错误:

ERROR in ./client/utils/service.js
94:11-19 "export 'nodePost' was not found in './fetch'
@ ./client/utils/service.js
@ ./client/myPerson/app.jsx
@ ./client/myPerson/index.jsx
@ multi (webpack)-dev-server/client?http://0.0.0.0:6002 (webpack)/hot/only-dev-server.js ./client/myPerson/index.jsx

fetch.js部分代码如下:
module.exports = {
fetch: function(method, url, params) {
return new Promise(function(resolve, reject) {
fetch(url, {
method: method,
// credentials: 'include',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify(params),
})
.then((response) => response.json())
.then((responseData) => {
if (responseData.code === 0) {
//请求成功
resolve(responseData);
} else {
//返回错误
reject(responseData);
}
})
.catch((error) => {
//捕获错误
reject(error);
});
});
},

./client/utils/service.js用 import { fetch } from './fetch';引入后即报错,过去使用beidou v0.3.5运行不会报错,使用beidou v1.0.4后报错。

Use `webpack-dev-server` to improve development and configuration experience

Replace koa-webpack-dev-middleware with webpack-dev-server.

This is a break change, contains differences as below:

  • Configurable fields for dev server such as noInfo quiet stats will be moved into webpackConfig.devServer, which keeps consistent with https://webpack.js.org/configuration/dev-server/

  • Configurable field hmr will be removed from config file. Hot module reload will take effect with devServer.hot and devServer.hotOnly.

  • devServer.contentBase is false in default. if not false value provided, express-static will take control every request as files and directories list

  • Default loaded entries will removed from app.webpackEntry. Instead, passed as a param when for custom usage.

Reference issue: #3

windows环境下ctrl+s使整个服务宕机,必须重新yarn dev才能继续

  • Node Version:V8.9.3
  • Beidou Version:1.0.4
  • Plugin Name And Version:
  • React/ReactDOM Versions:16.2
  • Platform:
  • Mini Showcase Repository:
  • Other Info:

Current behavior

2018-05-22 11:23:37,805 ERROR 1244 nodejs.WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

  • configuration.entry should be one of these:
    object { : non-empty string | [non-empty string] } | non-empty string | [non-empty string] | function
    -> The entry point(s) of the compilation.
    Details:
    • configuration.entry should not be empty.
      -> Multiple entry bundles are created. The key is the chunk name. The value can be a string or an array.
    • configuration.entry should be a string.
      -> An entry point without name. The string is resolved to a module which is loaded upon startup.
    • configuration.entry should be an array:
      [non-empty string]
    • configuration.entry should be an instance of function
      -> A Function returning an entry object, an entry string, an entry array or a promise to these things.
  • configuration.entry should be one of these:
    object { : non-empty string | [non-empty string] } | non-empty string | [non-empty string] | function
    -> The entry point(s) of the compilation.
    Details:
    • configuration.entry should not be empty.
      -> Multiple entry bundles are created. The key is the chunk name. The value can be a string or an array.
    • configuration.entry should be a string.
      -> An entry point without name. The string is resolved to a module which is loaded upon startup.
    • configuration.entry should be an array:
      [non-empty string]
    • configuration.entry should be an instance of function
      -> A Function returning an entry object, an entry string, an entry array or a promise to these things.
      at webpack (D:\Web-project\jpkj-wechat-app\node_modules\webpack\lib\webpack.js:19:9)
      at startServer (D:\Web-project\jpkj-wechat-app\node_modules\beidou-webpack\lib\utils\index.js:172:20)
      at Object.restartServer (D:\Web-project\jpkj-wechat-app\node_modules\beidou-webpack\lib\utils\index.js:226:3)
      at FSWatcher.watcher (D:\Web-project\jpkj-wechat-app\node_modules\beidou-webpack\agent.js:31:16)
      at emitTwo (events.js:126:13)
      at FSWatcher.emit (events.js:214:7)
      at FSWatcher. (D:\Web-project\jpkj-wechat-app\node_modules\chokidar\index.js:199:15)
      at FSWatcher._emit (D:\Web-project\jpkj-wechat-app\node_modules\chokidar\index.js:241:5)
      at FSWatcher.NodeFsHandler._handleFile (D:\Web-project\jpkj-wechat-app\node_modules\chokidar\lib\nodefs-handler.js:276:10)
      at FSWatcher. (D:\Web-project\jpkj-wechat-app\node_modules\chokidar\lib\nodefs-handler.js:474:21)
      name: 'WebpackOptionsValidationError'
      message: 'Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.\n - configuration.entry should be one of these:\n object { : non-empty string | [non-empty string] } | non-empty string | [non-empty string] | function\n -> The e
      ntry point(s) of the compilation.\n Details:\n * configuration.entry should not be empty.\n -> Multiple entry bundles are created. The key is the chunk name. The value can be a string or an array.\n * configuration.entry should be a string.\n -> An entry point without name. The string i
      s resolved to a module which is loaded upon startup.\n * configuration.entry should be an array:\n [non-empty string]\n * configuration.entry should be an instance of function\n -> A Function returning an entry object, an entry string, an entry array or a promise to these things.'
      validationErrors: [ { keyword: 'anyOf', dataPath: '.entry', schemaPath: '#/properties/entry/anyOf', params: {}, message: 'should match some schema in anyOf', schema: [ [Object] ], parentSchema: { description: 'The entry point(s) of the compilation.', anyOf: [Array] }, data: {}, children: [ [Object], [Obj
      ect], [Object], [Object], [Object], [Object] ] } ]
      pid: 1244
      hostname: PC-201805181637

Expected behavior

antd加载问题

在使用antd的时候会有这样的提醒

You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.

我安装了babel-plugin-import
config.default.js增加了配置

'use strict';

const path = require('path');

module.exports = {
  keys: 'key',
  webpack: {
    custom: {
      configPath: path.join(__dirname, './webpack.config.js'),
    },
  },
  router: {
    root: '/pages',
    entry: 'page',
  },
  react: {
    static: true,
  },
 // ------------ 加了以下内容 ------------
  isomorphic: {
    babel: {
      plugins: [
        [
          require.resolve('babel-plugin-import'),
          { libraryName: 'antd', libraryDirectory: 'es', style: 'css' },
        ],
      ],
    },
  },
};

不过运行后报错:

2018-08-09 18:16:09,304 ERROR 33391 [-/127.0.0.1/-/55ms GET /] nodejs.SyntaxError: Unexpected identifier
(function (exports, require, module, __filename, __dirname) { import Button from './button';
                                                                     ^^^^^^

SyntaxError: Unexpected identifier
    at new Script (vm.js:74:7)
    at createScript (vm.js:246:10)
    at Object.runInThisContext (vm.js:298:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/zhangzuhong/Code/MyWork/beidou-boilerplate/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)

是不是babel-plugin-import配置的方法不对,我尝试了其它方式也没成功。

基于 advanced 版本。

新手问题(初视数据加载问题)

redux的demo

刚进来的时候

在入口文件 page.jsx
有一个初始值 
 const store = configureStore({
      greeting: 'beidou',
    });
页面加载完以后还是一个请求
在/contains/index.jsx里面
componentDidMount() {
    this.props.dispatch(actions.greet());
  }

然后造成的结果是

传过来是源代码

  |

Redux Example

  |

Hello, beidou

  |

然后JS的请求
改变了“beidou” 变成"everyone"(yield put(actions.success('everyone')); )

这个现象是正常吗?

如果我想要 设了初始值 就不请求 可以吗?(有人是这样弄的吗?)

不能热更新

步骤
npm install beidou-init -g
beidou init 选择 简单的
npm run start

然后修改 一点 点东西

webpack显示更新完成

但是i浏览器的东西不变

启动正式服务器后,无法访问静态文件

通过通过beidou init 生成的Simple项目。在beidou build后,通过beidou start启动服务,打开浏览器查看页面,发现静态资源的请求都返回404。通过beidou dev启动服务器时没有这个问题。

Current behavior

beidou build后,通过beidou start启动服务,打开浏览器查看页面,发现静态资源的请求都返回404。

Expected behavior

beidou build后,通过beidou start启动服务,打开浏览器查看页面,可以成功返回静态资源文件。

client 二级目录下的文件不会被 webpack 打包

  • Node Version: 8.9
  • Beidou Version: 1.0.2
  • Plugin Name And Version: beidou-webpack
  • React/ReactDOM Versions: 16.2
  • Platform: mac
  • Mini Showcase Repository:
  • Other Info:

Current behavior

  • client 二级目录下 的文件可以被自动路由,但是没有被 webpack 打包,entry 应该遍历一下二级目录。
  • 例如:

http://localhost:6001/mobile/home/indexhttp://localhost:6001/home/index 都可以访问,但是 http://localhost:6001/mobile/home/index 是没有 js 和 css 的,因为没有进入 webpack entry:

Expected behavior

二级目录也能被 webpack 写入 entry 自动打包。例如上面的 /mobile/home/index。 chunk name 规范可以例如 mobile-home

beidou-cli error

PS D:\react-xps\beidou-test> npm install beidou-cli -g
npm WARN deprecated [email protected]: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
npm ERR! Unexpected end of input at 1:957044
npm ERR! lp":"latest","@types/gulp-newer":"latest","@types/gulp-sourcemaps":"l
npm ERR! ^

npm ERR! A complete log of this run can be found in:

网络代理

请框架有没有 代理的插件 像http-proxy-middleware 可以配置 proxy

客户端的 i18n 解决方法?

看到文档中讲“多语言”,应该只是服务端的 i18n 解决方案。而北斗框架是结合 React.js 的,不知道在 React.js 这边怎么使用呢?比如说 *.jsx 文件中怎么实现 i18n 呢? 还是说要自己添加相应的第三方库?

代码分割

请问 有没有 react-router4 的代码分割的例子

fetch 请求

我要如何在项目中调用fetch
componentWillMount() {
fetch('xxxx',{
method:"GET"
})
}
服务端一直出错
018-04-11 15:45:54,740 ERROR 16244 nodejs.unhandledRejectionError: only absolute urls are supported
at D:\beidou-master\examples\with-react-router\node_modules_node-fetch@1.7.3@node-fetch\index.js:54:10
at Promise ()
at new Fetch (D:\beidou-master\examples\with-react-router\node_modules_node-fetch@1.7.3@node-fetch\index.js:49:9)
at Fetch (D:\beidou-master\examples\with-react-router\node_modules_node-fetch@1.7.3@node-fetch\index.js:37:10)
at module.exports (D:\beidou-master\examples\with-react-router\node_modules_isomorphic-fetch@2.2.1@isomorphic-fetch\fetch-npm-node.js:8:19)
at Home.componentWillMount (D:/beidou-master/examples/with-react-router/client/containers/Home/index.jsx:15:9)
at processChild (D:\beidou-master\examples\with-react-router\node_modules_react-dom@16.3.1@react-dom\cjs\react-dom-server.node.development.js:2158:16)
at resolve (D:\beidou-master\examples\with-react-router\node_modules_react-dom@16.3.1@react-dom\cjs\react-dom-server.node.development.js:2052:5)
at ReactDOMServerRenderer.render (D:\beidou-master\examples\with-react-router\node_modules_react-dom@16.3.1@react-dom\cjs\react-dom-server.node.development.js:2337:22)
at ReactDOMServerRenderer.read (D:\beidou-master\examples\with-react-router\node_modules_react-dom@16.3.1@react-dom\cjs\react-dom-server.node.development.js:2311:19)
name: 'unhandledRejectionError'
pid: 16244
hostname: PC-201709041130

init error , timeout.

I just run the commands according to the steps:

$ npm install beidou-init -g
$ mkdir beidou && cd beidou
$ beidou init

request timeout, Why use npm registry not decide by user ?

image

Warning: Text content did not match. Server Client

  • Node Version: v8.11.3
  • Beidou Version: 1.0.7
  • Plugin Name And Version:
  • React/ReactDOM Versions: 16.2.0
  • Platform: win10
  • Mini Showcase Repository:
  • Other Info:

Current behavior

用 beidou-cli 的 simple 建的项目,跟着从零开始的教程在做,beidou dev 后,到编写 controller 这一步。访问 http://localhost:6001/news ,只要修改了 client/news.jsx 的内容,控制台就会报:

Warning: Text content did not match. Server: "News" Client: "News123" 这种错误,必须重新beidou dev 一下

Expected behavior

希望不要重新编译

beidou init 报错

image

您好,我在进行脚手架初始化时报错,这里是具体错误:
downloading: http://registry.npm.taobao.org/beidou-example-redux/download/beidou-example-redux-0.3.5.tgz
/Users/tiwenleo/.nvm/versions/node/v8.5.0/lib/node_modules/beidou-cli/lib/commands/init.js:315
const extracter = tar.Extract({ path: saveDir, strip: 1 });
^
TypeError: tar.Extract is not a function
at urllib.request (/Users/tiwenleo/.nvm/versions/node/v8.5.0/lib/node_modules/beidou-cli/lib/commands/init.js:315:33)
at done (/Users/tiwenleo/.nvm/versions/node/v8.5.0/lib/node_modules/beidou-cli/node_modules/urllib/lib/urllib.js:478:5)
at ClientRequest.onResponse (/Users/tiwenleo/.nvm/versions/node/v8.5.0/lib/node_modules/beidou-cli/node_modules/urllib/lib/urllib.js:584:14)
at Object.onceWrapper (events.js:316:30)
at emitOne (events.js:115:13)
at ClientRequest.emit (events.js:210:7)
at HTTPParser.parserOnIncomingClient [as onIncoming] (_http_client.js:565:21)
at HTTPParser.parserOnHeadersComplete (_http_common.js:116:23)
at TLSSocket.socketOnData (_http_client.js:454:20)
at emitOne (events.js:115:13)

webpack 打包文件名加 hash

Current behavior

目前 webpack 打包出来的文件名都是不带 hash 的,类似 bundle.css, bundle.js

Expected behavior

期待打包出来的文件名默认带 hash (例如 bundle.8da6c.js),并且 helper.asset 能自动引用带 hash 的文件,解决打包文件更新了但浏览器缓存没更新问题

打包大小问题

build 后 虽然用到代码分割,但是index.js 包很大,发下index.js 里面包含了router.js 文件。请问怎么样才能让index.js 减小

feature request: config : router.root 支持数组

Current behavior

目前 router.root 只支持单个路径,例如

router: {
      root: '/pages',
},

Expected behavior

希望 router.root 支持数组,例如

router: {
      root: ['/pages', '/mobile']
},

这样两个目录都可以被 beidou-webapck 自动加入 entry 打包。 尤其页面比较多 业务复杂的情况,页面是一定要分目录维护的。

一个页面局部服务端渲染,局部浏览器渲染

一个页面局部服务端渲染,局部浏览器渲染

下面是ssr的 这样就可以实现浏览器渲染

const DynamicComponentWithNoSSR = dynamic(import('../components/hello3'), {
  ssr: false
})

北斗有提供这样的吗?

从零开始搭建应用 失败了

然后通过 app/router.js 来配置路由映射,相关 API 可以参考 koa-router 模块。

// app/router.js
module.exports = app => {
app.get('/', app.controller.home);
};
好,现在可以启动应用来体验下。

$ node bin/server.js
$ open http://localhost:6001
然后运行 提示 react 与 react-dom没有安装
然后就开始安装
接下就是这个错误了

image

webpack 打包问题

我在config.default.js 里面配置打包less px->rem 为什么没有效果
'use strict';
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');
const cssnano = require('cssnano');
const postcssOpts = {
ident: 'postcss',
plugins: () => [
autoprefixer({
browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 8', 'iOS >= 8', 'Android >= 4'],
}),
pxtorem({rootValue: 100, propWhiteList: []})
],
cssnano
};
const alias = {
assets: path.join(__dirname, '../client/src/assets'),
components: path.join(__dirname, '../client/src/components'),
containers: path.join(__dirname, '../client/src/containers')
};

module.exports = app => {
const exports = {};
exports.keys = 'secret';
exports.webpack = {
resolve: {
alias
},
module:{
rules: [
{
test: /.(less|css)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{
loader: 'postcss-loader',
options: postcssOpts
},
{
loader: 'less-loader'
}]
})
}

  ]
}

}
//关闭scrf安全策略
exports.security = {
csrf: false
};
return exports;
};

部署问题

我用Xshell 在链接linux 服务器build 后 start 一旦我关掉链接 服务也就关掉了,请问要怎么做

可以默认支持 css modules ?

css modulescss in js 的方案在实际开发过程中是必备的。可否不需要自定义 webpack 的配置,默认支持呢?

比如 next.js 默认支持的,dva 也是默认支持的

内网穿透访问貌似会被拒绝

使用ngrok内网穿透,域名访问
看着快速增加的conn,一会儿就报下面的错了。
127.0.0.1:6001正常

egg deprecated please use app.config.proxy instead node_modules/koa/lib/request.js:357:26
2018-03-16 15:04:39,581 ERROR 16516 nodejs.ECONNRESETError: socket hang up (uncaughtException throw 1 times on pid:16516)
at createHangUpError (_http_client.js:330:15)
at Socket.socketOnEnd (_http_client.js:423:23)
at Socket.emit (events.js:164:20)
at endReadableNT (_stream_readable.js:1054:12)
at _combinedTickCallback (internal/process/next_tick.js:138:11)
at process._tickCallback (internal/process/next_tick.js:180:9)
code: 'ECONNRESET'
name: 'ECONNRESETError'
pid: 16516
hostname: DISIRE

[Fri Mar 16 2018 15:04:39 GMT+0800 (CST)] [graceful:worker:16516:uncaughtException] throw error 1 times
{ ECONNRESETError: socket hang up (uncaughtException throw 1 times on pid:16516)
at createHangUpError (_http_client.js:330:15)
at Socket.socketOnEnd (_http_client.js:423:23)
at Socket.emit (events.js:164:20)
at endReadableNT (_stream_readable.js:1054:12)
at _combinedTickCallback (internal/process/next_tick.js:138:11)
at process._tickCallback (internal/process/next_tick.js:180:9) code: 'ECONNRESET', name: 'ECONNRESETError' }
ECONNRESETError: socket hang up (uncaughtException throw 1 times on pid:16516)
at createHangUpError (_http_client.js:330:15)
at Socket.socketOnEnd (_http_client.js:423:23)
at Socket.emit (events.js:164:20)
at endReadableNT (_stream_readable.js:1054:12)
at _combinedTickCallback (internal/process/next_tick.js:138:11)
at process._tickCallback (internal/process/next_tick.js:180:9)
[Fri Mar 16 2018 15:04:39 GMT+0800 (CST)] [graceful:worker:16516] will exit after 30000ms
[Fri Mar 16 2018 15:04:39 GMT+0800 (CST)] [graceful:worker:16516] close server#0, _connections: 336
[Fri Mar 16 2018 15:04:39 GMT+0800 (CST)] [graceful:worker:16516] close 1 servers!
[Fri Mar 16 2018 15:04:39 GMT+0800 (CST)] [graceful:worker:16516] worker disconnect!
[2018-03-16 15:04:39.583] [cfork:master:16514] worker:16516 disconnect (exitedAfterDisconnect: true, state: disconnected, isDead: false, worker.disableRefork: false)
[2018-03-16 15:04:39.583] [cfork:master:16514] don't fork new work (refork: false)
2018-03-16 15:04:39,584 INFO 16514 [master] app_worker#1:16516 disconnect, suicide: true, state: disconnected, current workers: ["1"]
^C2018-03-16 15:04:44,565 INFO 16514 [master] receive signal SIGINT, closing

[2018-03-16 15:04:44.584] [cfork:master:16514] worker:16516 exit (code: null, exitedAfterDisconnect: true, state: dead, isDead: true, isExpected: true, worker.disableRefork: true)

beidou 性能问题

通过 wrk 压测,发现QPS很低, 超时很多,发送请求数很少。
数据如下:

➜ beidou-1 wrk -t4 -c250 -d60s http://127.0.0.1:6001
Running 1m test @ http://127.0.0.1:6001
4 threads and 250 connections
Thread Stats Avg Stdev Max +/- Stdev
Latency 1.25s 316.27ms 2.00s 74.73%
Req/Sec 42.63 22.23 120.00 58.81%
10001 requests in 1.00m, 3.70MB read
Socket errors: connect 0, read 79, write 0, timeout 188
Requests/sec: 166.44
Transfer/sec: 62.98KB

错误信息如下:
image

升级到Egg V2.3.0后beidou有BUG

如果我单纯升级Egg 的版本 会导致有BUG!
升级原因: Egg2比Egg1性能提升30%!

错误信息如下:
{
message: ""string" must be a string, Buffer, or ArrayBuffer",
stack: "TypeError: "string" must be a string, Buffer, or ArrayBuffer at Function.byteLength (buffer.js:481:11) at respond (/Users/dinglei/Documents/work/Code/ald/node_modules/koa/lib/application.js:246:25) at handleResponse (/Users/dinglei/Documents/work/Code/ald/node_modules/koa/lib/application.js:148:34) at ",
name: "TypeError",
status: 500
}

windows环境下yarn build报错

  • Node Version: V8.9.3
  • Beidou Version: 1.0.4
  • Plugin Name And Version:
  • React/ReactDOM Versions: 16.2
  • Platform:
  • Mini Showcase Repository:
  • Other Info:

Current behavior

yarn run v1.6.0
$ beidou build
[beidou-cli] v1.0.4
C:\Users\Administrator\web_project\node_modules.bin\beidou-build:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\,/,g')")
^^^^^^^

SyntaxError: missing ) after argument list
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:599:28)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
at Function.Module.runMain (module.js:676:10)
at startup (bootstrap_node.js:187:16)
at bootstrap_node.js:608:3
⚠️ Error: C:\Users\Administrator\web_project\node_modules.bin\beidou-build --framework=beidou-core exit with code 1
⚠️ Command Error, enable DEBUG=common-bin for detail
error Command failed with exit code 1.

Expected behavior

antm-viewport.min.js 引用出错

在服务端返回的html 里面加入 antm-viewport.min.js 报错
export default class Index extends Component {

static getPartial({ store,ctx}) {

const html = (
  <Provider store={store}>
    <App location={ctx.req.url} context={{}}/>
  </Provider>
);
return { html };

}
render() {

const { html, helper ,state} = this.props;

return (
  <html>
    <head>
      <meta charSet="utf-8" />
      <script>
        !function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=a/2*s*n+"px"},e.exports=t["default"]}]);

flex(100, 1);
</script>
<link rel="stylesheet" href={helper.asset('index.css')} />


<div id="container" dangerouslySetInnerHTML={{ __html: html }} />

      <script
        dangerouslySetInnerHTML={{
          __html: `window.__INITIAL_STATE__ = ${state}`,
        }}
      />
      <script  src={helper.asset('manifest.js')} />
      <script  src={helper.asset('index.js')} />
    </body>
  </html>
);

}
}

fastclick polyfill 问题

example 中的with-scss
引入了 yo3 框架报错


/Users/qitmac000068/Documents/yodemo2/assets-with-roadhog/node_modules/yo3/component/common/tapEventPluginInit.js:23
        _fastclick2.default.attach(document.body);
                            ^
TypeError: [egg-core] load file: /Users/qitmac000068/Documents/yodemo2/assets-with-roadhog/app/middleware/clientRoute.js, error: _fastclick2.default.attach is not a function
    at Object.<anonymous> (/Users/qitmac000068/Documents/yodemo2/assets-with-roadhog/node_modules/yo3/component/common/tapEventPluginInit.js:23:29)
    at Module._compile (module.js:652:30)
    at Module._extensions..js (module.js:663:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/qitmac000068/Documents/yodemo2/assets-with-roadhog/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)

静态资源浏览器缓存问题

项目部署到线上,pc端刷新一下,页面就更新了,但移动端,刷新N多次有时候也没能更新出来。此时项目没做redis缓存或者其他cdn。请问这个问题怎么解决。是否压缩的时候文件名应该加上hash

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.