Articles of 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: […]