Tag: isomorphic javascript

如何处理nodejs上的窗口对象，以供reactjs应用程序的服务器端呈现: 我正在尝试为我的reactjs应用程序实现服务器端呈现。我正在使用webpack构buildreactjs应用程序，增强解决scheme来处理nodejs中的jsx文件的导入。我的应用程序依赖于像enquire.js这样的第三方库。当应用程序尝试在nodejs上导入enquire.js时，它会失败，并显示错误ReferenceError: window is not defined 由于窗口对象不可用nodejs如何处理使用窗口进行服务器端呈现的库？

服务器渲染react-router v4 passthrough如果404: 在react-router v3中，我们可以知道服务器端渲染何时与当前url不匹配。这允许我将请求传递给我的express.static中间件，而不是发送呈现的应用程序。在反应路由器v4中，我们必须使用 const htmlData = renderToString( <StaticRouter location={req.url} context={context} > <App/> </StaticRouter> ); 以便在服务器端渲染。但是，它会自动将所有内容redirect到/ 。为什么这种行为甚至存在？难道我们不能像我们所期望的那样错误地失败吗？我怎么能知道没有匹配的东西，我可以打电话给next() ，让另一个快递的路线做这个工作？这是我想要使用的整个function： app.get('*', (req, res, next) => { const context = {}; const htmlData = renderToString( <StaticRouter location={req.url} context={context} > <App/> </StaticRouter> ); console.log(JSON.stringify(context, null, 4)); // empty object if (context.url) { // <———————— […]

我应该使用快递，客户端反应路由器还是服务器端反应路由器？: 我有一个简单的应用程序，显示用户的评论列表。当用户点击时，应用程序应该去/users/<id>并显示一个新的页面与用户的细节，将从MongoDB查询。我很难理解这个逻辑应该在哪里。我看到了在客户端使用反应路由器的例子，如： render(( <Router> <Route path="/" component={App}> <Route path="/user/:userId" component={User}/> </Route> </Router> ), document.body) 而且在服务器端也是这样的： <Route name="root" path="/" handler={require('./handlers/Root')}> 而且还使用快速路由： app.get('/', function home (req, res, next) { res.render('layout', { reactHtml: React.renderToString(<App />) }); }); app.get('/user', function home (req, res, next) { res.render('layout', { reactHtml: React.renderToString(<User />) }); }); 哪一条路要走？有什么区别？

包含package.json文件失败时使用webpack: 我正在尝试使用WebPack为使用commonJS模块的基于同构的JS代码创build浏览器的包。为了暴露package.json中的版本，我在我的index.js中执行以下操作： var pjson = require("../package.json"); module.exports = { version: pjson.version }; 但是，WebPack默认将package.json文件视为JavaScript，这会导致parsing器错误，因为它实际上是JSON： package.json Line 2: Unexpected token : 我读过JSON文件， json-loader插件是必需的，模块path必须调整为json!../package.json 。虽然这实际上适用于WebPack，但它会在本机运行Node.js时破坏代码。那么引用package.json （或任何其他JSON文件）的正确方法是什么，以便WebPack可以创build一个浏览器包，而不是用任何WebPack模块path污染代码？

wepack-isomorphic-tools vs process.env.BROWSER: 我已经读了关于同构的应用程序开发，我已经看到了在服务器端处理资源加载的方法。一个是webpack-isomorphic-tools 。另一个就是这个“hack”，你在webpack中定义了一个将process.env.BROWSER设置为true的插件，并根据这个variables加载资源。即： if(process.env.BROWSER){ require('./styles.scss'); } 我想知道，哪个更好，为什么？

Webpack和Nodejs同构需要绝对path: 目标：我正在尝试在nodejs和webpack中设置一个项目，使得require函数可以使用项目目录作为根目录，所以我可以在两个环境中都要求相对于项目根的绝对path （同构使用，即React server + client render ）。状态：在webpack中，你可以设置config.resolve.root来使其工作，但是在nodejs中，最好不要覆盖/修改global.require。 build议1 ：我可以发挥新的全球职能 global.p_require 所以它在节点中工作; 然而，我不能find一种方法让webpackparsing“p_require”到__webpack_require__中，而无需更改webpack源代码。 build议2 ：我可以创造一个新的全球variables global.ROOT_DIR = process.cwd() 所以它在节点工作 require(ROOT_DIR + <relative path to root>); 然而，webpack会认识到这是dynamic的要求。有没有办法让webpackparsingROOT_DIR？我已经尝试了定义插件，但似乎加载后的需求被webpackparsing。题任何人有解决scheme或面临同样的问题？

Webpack外部节点和浏览器: 我有一个在浏览器和服务器上运行的同构React应用程序。我通过两个不同的入口点和不同的configuration运行两个单独的Webpack构build，为两者构build相同的代码。问题是，在服务器的节点上运行时，通过外部脚本标记（本例中为Google Maps）存在于浏览器窗口上的外部文件显然不存在。除入口点文件外，代码是相同的。 index.html的： // index.html <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=XXX"></script> 简化configuration： // Server Webpack config { entry: 'server.js', target: 'node', externals: { google: google } } // Client Webpack config { entry: 'client.js', target: 'browser', externals: { google: google } } 组件： // The view which builds and runs fine in // the client […]

在同构React应用程序中呈现HTMLstring: 有一个非SPA的情况下消毒，但随机的HTMLstring作为input： <p>…</p> <p>…</p> <gallery image-ids=""/> <player video-id="…"/> <p>…</p> 该string来自WYSIWYG编辑器，包含嵌套的常规HTML标签和有限数量的应该呈现给小部件的自定义元素（组件）。目前，像这样的HTML代码片段应该分别在服务器端（Express）上呈现，但是最终也会在客户端呈现为同构应用程序的一部分。我打算使用React（或React-like框架）来实现组件，因为它可能适合这种情况 – 它是同构的，并且很好地呈现部分。问题是子字符像 <gallery image-ids="[1, 3]"/> 应该成为 <Gallery imageIds={[1, 3]}/> JSX / TSX组件在某些时候，我不知道什么是正确的方式来做到这一点，但我希望它是一个共同的任务。在React中如何解决这个问题？

从React（同构应用程序）进行API调用时出现“Access-Control-Allow-Origin”问题: 我遇到了使用React和Express的同构JavaScript应用程序的问题。我正在尝试使用axios.get在组件装入时发出HTTP请求 componentDidMount() { const url = 'http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders'; axios.get(url).then( res => { //use res to update current state }) } 我从API获取状态200 res，但我没有得到任何响应数据，并在我的控制台中得到一个错误 XMLHttpRequest cannot load http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. 但是，如果我在我的server.js中发出请求 const url = 'http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders'; axios.get(url).then(res => { //console.log(res); }); 它工作正常，我得到服务器启动时的响应数据。这是一个与实际的API问题，或者我做错了什么？如果这是一个CORS问题，我猜在server.js中的请求也不会工作吗？ […]

使用Webpackcaching索引源代码中的值，使用React.js: 我正在构build一个同构的应用程序。它是完全用反应build立起来的 – 也就是说，html基础也在起作用。我有我的根html作为一个应用程序组件。它看起来像这样： … var AppTemplate = React.createClass({ displayName: 'AppTemplate', render: function() { return ( <html> <head lang="en"> <title>hello</title> <link rel="stylesheet" href='/css/style.css' /> </head> <body> <RouteHandler {…this.props}/> <script type='text/javascript' src='/js/bundle.js' /> </body> </html> ); } }); … module.exports = AppTemplate; 当我使用webpack构build项目时，我需要replacejs / bundle.js来包含哈希。 Webpack在完成后提供stats.json。但是我需要在构build期间提供散列。我正在考虑使用function标志来做这样的事情： … var AppTemplate = React.createClass({ displayName: […]