我正在尝试编写一个 Typescript 库，我希望能够在针对浏览器和 Node.js 时包含该库。我有两个问题：在代码主体中引用特定于平台的类型，以及将这些类型包含在.d.ts伴随转译的 JS 生成的声明中。

在第一种情况下，我想写一些类似的东西

  if (typeof window === "undefined") {
    // Do some Node-y fallback thing
  } else {
    // Do something with `window`
  }

如果我不包含"dom"在lib编译器选项中（也就是说，如果我只是说lib: ["es2016"]in ），则编译失败，因为未定义tsconfig全局。window（Usingwindow只是 out of 的一个示例lib.dom.d.ts，也可能是fetchor a ResponseorBlob等​​。）重点是，通过在使用全局对象之前检查全局对象是否存在，代码在运行时应该是安全的，它是类型我无法弄清楚的一面。

在第二种情况下，我在构建库后尝试包含该库时遇到错误。"dom"我可以使用in选项构建库lib，并且生成的输出包括带有例如的键入declare export function foo(x: string | Blob): void。问题是，如果使用的代码不包含Blob（无"dom"库）的定义，则它无法编译，即使它实际上只是使用fooa进行调用string（或 …

我正在使用最新的（2017年12月）依赖项堆栈。当我尝试使用Jest进行同构反应测试时，测试服不断失败并显示以下错误：

* Test suite failed to run
[BABEL] /__tests__/router.test.js: Plugin/Preset files are not allowed to
export objects, only functions.

这是我的依赖项：

"dependencies": {
    "axios": "^0.17.1",
    "babel-polyfill": "^6.26.0",
    "cors": "^2.8.4",
    "express": "^4.16.2",
    "react": "^16.1.1",
    "react-dom": "^16.1.1",
    "react-router-dom": "^4.2.2"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-beta.35",
    "babel-cli": "^6.26.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^8.0.2",
    "babel-jest": "^22.0.1",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "enzyme": "^3.2.0",
    "enzyme-adapter-react-16": "^1.1.0",
    "enzyme-to-json": "^3.2.2",
    "eslint": "^4.11.0",
    "eslint-plugin-react": "^7.5.1",
    "html-webpack-plugin": "^2.30.1",
    "jest": "^21.2.1",
    "nodemon": "^1.11.0",
    "parallelshell": "^3.0.2",
    "react-test-renderer": "^16.2.0",
    "regenerator-runtime": "^0.11.1",
    "supertest": …

我在webApp中使用localStorage在客户端存储数据.但是,当我试图使应用程序同构时,这会导致一个问题.由于节点不是浏览器环境,因此无法定义"window","localStorage"等对象.如何解决此问题？

我有一个使用ReactJS构建的响应式Web应用程序,我希望有一天能够支持服务器端呈现.

根据视口大小,应用程序布局/行为会发生变化.但所有这些变化不仅可以通过简单的CSS mediaquery来完成:JS行为,而且底层HTML结构也必须根据宽度进行更改.

例如,我可以:

宽度在800px以下:

<div class="app">
  <div class="menu-mobile">...</div>
  <div class="content">...</div>
  <div class="mobile-left-menu">...</div>
  <div class="footer-mobile">...</div>
</div>

宽度超过800像素:

<div class="app">
  <div class="menu">...</div>
  <div class="main">
    <div class="left-menu">...</div>
    <div class="content">...</div>
    <div class="right-menu">...</div>
  </div>
  <div class="footer">...</div>
</div>

现在,我想为该应用程序使用服务器端呈现.但是在服务器上我没有宽度,所以我不知道返回客户端的HTML结构.

请注意,我不是在寻找使用静态默认服务器端断点的解决方案,而是在客户端上更正应用程序.我正在寻找一种解决方案,根据其设备返回给客户端正确的html结构.因此,如果他在浏览器上禁用javascript,它应该可以正常工作.

有人可能会说我可以渲染两者所需的html,并使用普通的CSS媒体查询隐藏/显示所需的部分display: none,但它会使应用程序变得复杂并使其呈现大量未使用的html元素,因为通常用户不太可能移动断点上方/下方(我的意思是如果他有移动设备,桌面的html元素永远不会被使用)

此外,如果我想使用内联样式,它会变得复杂,因为我必须在服务器上呈现这些内联样式以获得正确的宽度.

我看到有些人正在考虑嗅探浏览器UA来估计他们的视口大小.但即使有一些不安全的屏幕尺寸检测,我也不确定我们是否可以知道服务器端的设备屏幕方向.

我可以做任何事来解决这个问题吗？

如何react-router在通用应用程序中正确处理动态内容的404页面？

假设我要显示一个包含类似路径的用户页面'/user/:userId'.我会有这样的配置:

<Route path="/">
    <Route path="user/:userId" component={UserPage} />
    <Route path="*" component={NotFound}  status={404} />
</Route>

如果我要求/user/valid-user-id,我会收到用户页面.

如果我要求/foo,我会得到一个合适的404.

但如果我要求怎么办/user/invalid-user-id？当为用户获取数据时,我将意识到该用户不存在.所以,做接缝的正确方法是:

• 显示404页面
• 返回404 http代码(用于服务器端呈现)
• 保持网址不变(我不想重定向)

我怎么做？？它接缝像一个非常标准的行为.我很惊讶没有找到任何例子......

编辑:
像我这样的接缝不是唯一一个与之斗争的人.这样的事情会有很大的帮助:https://github.com/ReactTraining/react-router/pull/3098
由于我的应用程序不会很快上线,我决定等待下一步的反应路由器版本必须提供......

我正在查看底部的代码示例,这是一个反应ssr示例:

在configureProduction函数中,它有这一行:

const clientStats = require('./assets/stats.json');

这个stats.json文件是什么？

import express from 'express';
import { join } from 'path';
import { log } from 'winston';

/**
 * Configures hot reloading and assets paths for local development environment.
 * Use the `npm start` command to start the local development server.
 *
 * @param app Express app
 */
const configureDevelopment = app => {
    const clientConfig = require('../webpack/client');
    const serverConfig = require('../webpack/server');
    const publicPath = clientConfig.output.publicPath;
    const outputPath = clientConfig.output.path;

    const multiCompiler …

我想知道使用paypal的React Engine(https://github.com/paypal/react-engine),但我有些疑惑:

与Handlebars等其他模板引擎相比有什么好处？

为什么要上传.jsx文件,而不是(jsx预编译/转换).js文件？(这个应该更快,因为不必处理服务器上的转换).

我一直在研究,但我感到困惑.

谢谢

我有一个使用 next.js 和 Apollo/Graphql 的应用程序，我正在尝试完全了解getInitialProps生命周期挂钩的工作原理。

getInitialProps在我的理解中，生命周期用于设置一些初始道具，这些道具将在应用程序首次加载时呈现服务器端，可以使用从数据库中预取数据以帮助 SEO 或只是为了提高页面加载时间。

我的问题是这样的：

每次我有一个query组件在我的应用程序中获取组件中的一些数据时，我是否必须使用getInitialProps以确保数据将在服务器端呈现？

我的理解也是getInitialProps它只适用于页面索引组件（以及在 中_app.js），这意味着组件树中较低的任何组件都无法访问此生命周期，并且需要从上往下获取一些初始道具在页面级别，然后让它们向下传递组件树。（如果有人能证实这个假设，那就太好了）

这是我的代码：

_app.js（在/pages文件夹中）

import App, { Container } from 'next/app';
import { ApolloProvider } from 'react-apollo';

class AppComponent extends App {
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {};
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }
    // this exposes the query to the user
    pageProps.query = ctx.query;
    return { pageProps }; …

据我所知,Aurelia不支持这里提到的服务器端渲染.

但问题是:是否有可能通过一些黑客/解决方法来做到这一点？

最明显的想法是使用Phantom,Nightmare.js或其他任何东西来简单地在服务器上的Chrome中呈现该页面并将其提供给客户端,但这很可能会导致很大的生产力问题.

谢谢!

UPD

根据Rob Eisenberg今天(2016年4月16日)对FDConf的回应,服务器端渲染将在2016年实施,有一个核心团队成员正在研究这个,并且这个功能有截止日期.

在getServerSideProps我的索引页的功能中，我想使用一个foo从另一个本地文件导入的功能，该功能依赖于某个节点库。所述库不能在浏览器中运行，因为它依赖于“仅限服务器”模块，例如fs或request。

我一直在使用以下模式，但想对其进行优化。定义foo为可变以使其在范围内是笨拙的并且似乎可以避免。

let foo;
if (typeof window === "undefined") {
  foo =  require("../clients/foo");
}

export default function Index({data}) {
  ...
}

export async function getServerSideProps() {
  return {
    props: {data: await foo()},
  }
}

这里的最佳做法是什么？是否有可能以某种方式利用 ES6 的动态导入功能？动态导入什么范围内 getServerSideProps？

我正在使用 Next.js 版本9.3.6。

谢谢。

更新：

似乎 Next.js 自己的动态导入解决方案就是这个问题的答案。我仍在测试它，并会在完成后相应地更新这篇文章。这些文档对我来说似乎很混乱，因为他们提到禁用 SSR 的导入，但反之亦然。

https://nextjs.org/docs/advanced-features/dynamic-import