Articles of isomorphic javascript

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

在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理依赖列表?