Articles of isomorphic javascript

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

在React.js,node.js,webpack,babel,express中使用fs模块

我有一个要求,我正在呈现视图,其中我显示一个表单。 在提交表单时,我需要收集表单数据并创build一个文件,并将表单数据保存为该文件中的JSON。 我正在使用React.js,node.js,babel和webpack。 挣扎了一下,实现了这一点,我想到了,我必须使用同构或通用JavaScript即使用反应和渲染在服务器端,因为我们不能在客户端使用FS模块。 推荐这个服务器端 。 我运行它使用: npm run start 在这之后,我可以在控制台中看到[Object Object]从下面的反应组件(HomePage.js)的第1行打印在控制台上。 但是稍后当我访问这个页面时,会出现一个错误: 'bundle.js:18未捕获错误:找不到模块“fs”“ 我如何使用FS模块的反应? 以下是代码片段: webpack.config.js "use strict"; const debug = process.env.NODE_ENV !== "production"; const webpack = require('webpack'); const path = require('path'); module.exports = { devtool: debug ? 'inline-sourcemap' : null, entry: path.join(__dirname, 'src', 'app-client.js'), devServer: { inline: true, port: 3333, contentBase: "src/static/", historyApiFallback: […]

同构JS – 只有httpRequest客户端

关于同构stream量应用中商店数据总量的问题。 (我正在使用的反应,ALT,ISO和节点,但理论适用于其他的例子) 我有一个stream量'商店'( http://alt.js.org/docs/stores/ ),需要从api获取数据: getState() { return { data : makeHttpRequest(url) } } 当用户在SPA中导航时,更多的数据将通过http请求加载。 我希望这个应用程序是同构的,以便我可以呈现应用程序完整的HTML包括最新的数据服务器端,并返回给用户的快速初始页面加载。 react.renderToString()允许我将应用程序呈现为html,并且可以使用alt&iso来播种数据: storeData = { "MyStore" : {"key" : "value"}}; // set data for store alt.bootstrap(JSON.stringify(storeData || {})); // seed store with data var content = React.renderToString(React.createElement(myApp)); // render react app to html 问题是,当运行js服务器端时,我会看到错误,因为商店将要发出一个http请求,这是不可能的(因为xmlhttprequest不会存在于节点中) 什么是解决这个问题的最好方法? 我能想到的唯一解决scheme是将商店中的httprequest包装在: var ExecutionEnvironment = require('react/lib/ExecutionEnvironment'); […]

在通用/同构应用程序中组织package.json依赖项

有了React和其他框架,现在通常使用npm和package.json来安装你将在前端使用的库。 如果您正在开发通用/同构应用程序,则会引入前端和后端的依赖项存储在同一个文件中的问题,从而创build大量的依赖项列表。 如果你使用npm –save / save-dev这两种types的依赖关系(前端,后端)变得混杂,很难知道,而不是一个接一个,哪一个在哪里使用。 除了手动sorting和pipe理依赖列表之外,有没有办法保持列表整洁? 你有什么策略来pipe理依赖列表?

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,但我想必须有一些同构和响应/自适应。

同构反应与Webpack的resolve.root选项

我的React应用程序使用需要相对于我的JS文件的根,使用Webpack的resolve.root。 即我的文件结构包含以下内容: components App.react.js containers AppContainer.react.js 在AppContainer.react.js中,我有: import App from 'components/App.react'; 这在客户端工作。 现在我试图使它是同构的。 如果我在我的server.js需要AppContainer.react.js,它说components/App.react没有find。 节点正试图要求containers/components/App.react.js ,它不存在。 我怎样才能使Node相对于给定的目录? 编辑:我的目录结构如下所示: css/ html/ js/ components/ App.react.js containers/ AppContainer.react.js main.js <- requires AppContainer public/ server/ server.js <- requires AppContainer