Tag: serverside rendering
使用webpack目标节点从node_modules导入css
我目前正在build立一个服务器端渲染反应的应用程序。 我正在使用一些与CSS文件来的库。 当我尝试像这样导入它们时： import 'leaflet/dist/leaflet.css'; 我在我的server.js得到以下错误： /my/app/path/node_modules/leaflet/dist/leaflet.css:3 .leaflet-pane, ^ SyntaxError: Unexpected token . at createScript (vm.js:74:10) at Object.runInThisContext (vm.js:116:10) at Module._compile (module.js:533:28) at Object.Module._extensions..js (module.js:580:10) at Module.load (module.js:503:32) at tryModuleLoad (module.js:466:12) at Function.Module._load (module.js:458:3) at Module.require (module.js:513:17) at require (internal/module.js:11:18) at Object.__webpack_exports__.a (/my/app/path/server.js:725:18) 导入 import '../../node_modules/leaflet/dist/leaflet.css'; 作品。 有没有办法configurationwebpack，我可以正常导入这些css文件？ 这里是server.js的webpackconfiguration： const nodeExternals = require('webpack-node-externals'); const postcssImport […]
Angular 4通用Node.js server.js错误
我正在构build一个Angular 4 CLI应用程序，并尝试使用新内置的Universal进行SSR。 所有似乎工作正常，直到我尝试运行节点server.js 下面的错误被返回： var crypto = require('crypto'); ^ TypeError: require is not a function at Object.webpackEmptyContext.keys (/dist-server/server.js:156480:14) at __webpack_require__ (/dist-server/server.js:20:30) at Object.<anonymous> (/dist-server/server.js:156469:20) at __webpack_require__ (/dist-server/server.js:20:30) at Object.module.exports.raw (/dist-server/server.js:42461:18) at __webpack_require__ (/dist-server/server.js:20:30) at Object.<anonymous> (/dist-server/server.js:42340:15) at __webpack_require__ (/dist-server/server.js:20:30) at Object.<anonymous> (/dist-server/server.js:77201:22) at __webpack_require__ (/dist-server/server.js:20:30) 任何angular4普遍专家在那里？
如何利用节点后端的浏览器库
我正在开发一个服务器端渲染的React应用程序。 在客户端中，我使用的是使用文档对象的库，所以当我尝试在服务器端节点上运行我的代码时，崩溃，因为文档没有在该环境中定义。 我目前正在通过手动检查文档对象是否存在来解决这个问题，并且只有在定义了文档的情况下才导入浏览器特定的库，但是这在我看来是一个非常草率和不方便的解决scheme。 有谁知道更好的方法来解决这个问题？
React v15.0.0：由于renderToString已被弃用，如何去服务器端渲染？
有一个新的React候选版本，v 15.0.0。 由于renderToString方法现在在库中已被废弃，并且显然将在未来的版本中停用，那么在新版本中如何使用React支持服务器端渲染？ 在文档页面上，除了不再支持这个特殊的方法之外，没有提供对renderToString或其他解释的replace。 谢谢
在响应服务器端渲染时使用process.env
我有一个反应的应用程序，工作得很好，客户端，现在试图让它在服务器端工作。 我正在使用create-react-app样板： https ： //github.com/facebookincubator/create-react-app 我遇到了一个问题，我在.env中存储了一些环境variables，但是在服务器上我无法访问这些variables。 所以像axios.get(process.env.API_URL + 'something')行将通过404，因为process.env.API_URL是undefined 。 这是我的理解.env是我应该使用这样的东西的文件。 我错了吗？ 我应该使用另一种方法来存储常见的环境variables？ 或者有什么方法让节点服务器识别这些值？
在Node.js中导入React throws SyntaxError：意外的令牌导出
我试图用Node.js和React实现SSR，按照这个例子https://github.com/babel/example-node-server的build议，在官方的Babel文档中这里http://babeljs.io/docs/usage / CLI /＃巴别节点 为了开发，我使用了babel-node ; 为了生产，我想用babel来传递我的服务器并运行它： 的package.json "scripts": { "start": "node ./dist/server/index.js", "dev:server": "nodemon ./src/server/index.js -x babel-node", "build:server": "babel ./src/server -d ./dist/server –copy-files -s inline" }, "babel": { "presets": [ "env", "react", "stage-2" ], "plugins": [ "transform-decorators-legacy" ] } 服务器使用ES6语法编写： SRC /服务器/ index.js import 'babel-polyfill' import './config' import Express from 'express' import bootstrap from […]
如何处理与webpack服务器端的静态资产？
我试图创build一个通用的反应应用程序（在服务器和客户端上使用webpack），并与图像导入斗争。 我想写这个： import someImage from './someImage.png' const SomeImage = () => <img src={someImage}/> 这是我的webpackconfiguration文件： var path = require('path'); var webpack = require('webpack'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: [ 'webpack-dev-server/client?http://127.0.0.1:8080/', 'webpack/hot/only-dev-server', './client', 'babel-polyfill' ], output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js' }, resolve: { modulesDirectories: ['node_modules', 'shared'], extensions: ['', '.js', '.jsx'] }, module: […]
React / Redux同构/服务器端渲染和媒体查询
我开始创build一个基于Node的同构React / Redux应用程序。 该项目的一个要求是基于“移动”和“桌面”视图的“adapative”渲染特定组件。 我已经实现了Redux动作和Reducer来存储有关用户视图的屏幕信息（基于媒体查询 – “小”，“中”，“大”）的状态。 在调整状态/商店得到更新。 默认状态是“小”。 const defaultState = { isMobile: true, isTablet: false, isDesktop: false, sizes: { small: true, medium: false, large: false, huge: false, }, }; 在需要根据屏幕尺寸在两个不同版本中呈现“自适应”的组件中，我简单地做一个： 如果（小）返回变化1 如果（中）返回变化2 所有的工作。 现在我面临两个问题： 我的应用程序是同构的，这意味着标记也呈现服务器端。 服务器不知道用户的浏览器和媒体查询。 所以，因为我的默认状态是“小”，服务器将始终呈现“variation1”。 节点服务器是该站点的入口点。 它看起来像渲染需要“延迟”（中间件？），服务器需要从React应用程序获取“传递”之前从客户端获取一些有关浏览器宽度的信息。 任何想法如何解决这个问题？ 因为渲染是基于状态的，所以即使在浏览器大小是“桌面”的情况下，在加载“变化1”之后几秒钟总是可以看到（闪烁）。 这是因为在使用当前屏幕宽度更新状态之前，JS检测需要几毫秒的时间。 我认为这与上面的问题和默认状态一起玩。 我找不到任何解决scheme1，但我想必须有一些同构和响应/自适应。
