小编Mat*_*ick的帖子

我有一个用例,在使用Redux Observables发送另一个之前我需要等待一系列操作.我已经看到了一些类似的问题,但我无法理解如何在我给定的用例中使用这些方法.

本质上我想做这样的事情:

action$
  .ofType(PAGINATION_CLICKED) // This action occurred.
  .ofType(FETCH_SUCCESS) // Then this action occurred after.
  .map(() => analyticsAction()); // Dispatch analytics.

如果另一个类型的动作FETCH_ERROR触发,我还想取消并重新启动该序列.

使用Webpack和Babel编译React和Redux应用程序时,我得到:

Uncaught TypeError: Cannot assign to read only property '__esModule' of #<Object>

在某些旧版浏览器中(<= Chrome 1,Android 4,Safari 5).

这个问题似乎源于redux和react-reduxexports.__esModule = true;在lib构建中输出行但我的应用程序使用了Object.defineProperty(因为它们松散地构建而我没有).

两种解决方案是:

1. 在loose模式下构建我的应用程序.

2. 使用与应用程序相同的.babelrc 导入react-redux/src和redux/src构建它(一切都不松散).

只要它们是一致的并且两者都是:

Object.defineProperty(exports, "__esModule", {
  value: true
});

并且exports.__esModule = true;不共存于我输出,一切正常.

我的问题是,什么是正确的解决方案？为什么这只影响旧浏览器？为什么他们会发生冲突？

这是一个类似的问题.

我很确定我一定是错的但是在Node中,path.relative似乎输出了错误的目录,或者至少有一个我没想到的:

> path.relative('a/file.js', 'a/file.css')
> '../file.css'

但是我希望结果如下:

> './file.css'

本质上,我试图计算两个路径中的差异,以便将一个文件传递给另一个文件,require这../file.css显然对我的要求是错误的,因为这两个文件都在a目录中.输出表明它file.css位于父目录中.

我错过了什么？

我正在构建一个简单的sails.js项目并使用主干实现前端.

理想情况下,我想要一条路由到我的骨干应用程序所在的一个索引页面.

'/*': {
    view: 'home/index'
}

这很棒,所以现在任何URL都会转到主页.除了现在,任何资产(.js,.css,.html,.jpg)的所有路径都不再起作用.

我可以在下面看到这个评论config.routes.js:

// NOTE:
// You'll still want to allow requests through to the static assets,
// so we need to set up this route to ignore URLs that have a trailing ".":
// (e.g. your javascript, CSS, and image files)
'get /*(^.*)': 'UserController.profile'

但这对我没有任何意义.如何忽略带有文件扩展名的路由.

我还使用'api'为我的所有CRUD url添加了前缀,localhost:1337/api/controller/因此也需要一个排除转发的正则路由.我无法找到任何有关如何在任何地方执行此操作的信息.

我必须在这里遗漏一些基本的东西.

谢谢!

我遇到了一个问题,我需要在由Webpack构建的React应用程序上运行Jest测试.问题是处理requireWebpack通常用加载器处理的CSS文件和图像等.我需要知道正确测试组件的最佳方法是什么.

React组件:

import React from 'react';
// The CSS file is the problem as I want to actually test what it
// returns after webpack has built it.
import style from './boilerplate.css';

var Boilerplate = React.createClass({
    render: function() {
        return (
            <div>
                <h1 className={style.title}>react-boilerplate</h1>
                <p className={style.description}>
                    A React and Webpack boilerplate.
                </p>
            </div>
        );
    }
});

export default Boilerplate;

开玩笑测试:

jest.dontMock('./boilerplate.js');

var Boilerplate = require('./boilerplate.js');
var React = require('react/addons');
var TestUtils = React.addons.TestUtils;

describe('boilerplate', function() {

    var component; …

我有一个同构的React应用程序,它可以在浏览器和服务器上运行.我通过两个不同的入口点和不同的配置运行两个单独的Webpack构建,为两者构建相同的代码.

问题是,在服务器上的节点中运行时,浏览器窗口中存在的外部文件(在此实例中为Google Maps)显然不存在.除入口点文件外,代码完全相同.

index.html的:

// index.html
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=XXX"></script>

简化配置:

// 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 but doesn't run on the server.
var React = require('react'),
    css = require('./style.css'),
    google = require('google'); // Nope, not on the server obviously!

var Component = React.createClass({ …

使用Webpack我想让我的一个入口块根本没有哈希,并使用不同的命名约定到另一个入口文件.

使用以下Webpack配置:

entry: {
   app: path.join(__dirname, '../src/app'),
  'loader/loader': path.join(__dirname, '../src/loader/loader')
}.
output: {
    filename: '[name].[chunkhash].js',
    publicPath: '/'
}

不受欢迎的输出:

所需的输出:

这可能吗？

我有点不确定如何使用react-virtualized实现List的动态高度.

我有一个组件如下:

import { List } from 'react-virtualized';
<List
    height={400}
    rowCount={_.size(messages)}
    rowHeight={(index) => {
        return 100; // This needs to measure the dom.
    }}
    rowRenderer={({ key, index, style }) => <Message style={style} {...messages[index]} />}}
    width={300}
/>

我已经看过使用CellMeasurer按照文档说它可以与List组件一起使用但我不知道这个例子实际上是如何工作的......

我也试图弄清楚它是如何在演示代码中实现的,但也达到了死胡同.

有人可以帮助我如何测量DOM以动态获取每个项目的高度.

项目1:MVC应用程序:

所以我有一个常规的.Net Core MVC应用程序,当用户导航到托管在端口3000上的myDomain.com时,用户可以登陆.我在这里使用常规控制器和剃刀视图等.在此应用程序中,用户可以登录指向JWT令牌将被返回并存储在本地存储中.它们还将导航到用户门户(托管在端口3001上).此MVC应用程序还将包含用于我的用户门户的API控制器

项目2:SPA应用程序(用户门户):

用户门户基本上是一个单独的客户端SPA项目,使用react将托管在端口3001上,端口3001具有自己的单独节点js服务器并在端口3000上调用MVC项目API.

所以我的问题是如何在这两个端口上保留我的登录令牌？这甚至可能吗？这种架构是否有意义？您可以提供有关此主题的任何读物,我们将不胜感激.

所以我有一个在节点中运行的文件,它运行PhantomJS的本地副本,如下所示:

phantom.casperPath = 'node_modules/casperjs';
phantom.injectJs('node_modules/casperjs/bin/bootstrap.js');
var casper = require('casper').create({
    viewportSize: config.viewportSize
});

casper.test.begin('Runing tests here', 5, function suite(test) {
    // Tests here
});

没有casper.test.begin()我的测试功能很好.我有正确的版本1.1.0,可以使用此测试套件,但我在我的控制台中收到以下错误:

CasperError: casper.test property is only available using the `casperjs test` command

CasperJS文档也提到了这一点:http://docs.casperjs.org/en/latest/testing.html .我的问题是如何在上面的代码中使用此命令运行此Casper,以便我可以使用这些测试？

谢谢!