小编Dan*_*Dan的帖子

我有一个相对简单的 React 15 网站。它只有几个不同的页面，主要是文字和一些图片。但是，当我用于react-scripts build构建用于生产部署的项目时，我发现节点进程最高使用了大约1.25 GB的 RAM。在我的工作站上构建时这不是问题，但在我的生产服务器上是一个问题，我目前只有1 GB的可用 RAM。大多数情况下，服务器会因为内存不足而终止我的构建。

所以看起来我的选择是花更多的钱升级到服务器上的2GB内存，或者找到一些方法来减少内存使用。我想避免支付更多费用，因为通常我不会使用超过200 MB的 RAM 来运行我的应用程序，而且它只是构建使用大量 RAM 的应用程序。

我似乎有些人建议--max-old-space-size=在构建中添加一个标志，但这似乎没有任何作用。也就是说，我已经在我的 package.json 中尝试过这个：

"build": "react-scripts --max-old-space-size=512 build"

但它仍然使用了1+ GB的 RAM。我通过 开始构建npm run build，并将--max-old-space-size标志添加到该npm命令似乎没有任何作用。

我能做些什么来防止react-scripts构建过程使用这么多内存？

TLDR:如何从我的React应用程序中的页面启动Facebook Auth进程？

我发现很多帖子都涉及我在这篇文章标题中列出的大多数但不是全部的项目.而且我非常接近于让这个工作,但必须有一些我缺少的东西.

我的应用程序包含一个使用react-router进行路由的create-react-app前端.我在开发环境中运行端口51000.在package.json中,我使用"proxy"将其他路由重定向到我的快速服务器,在端口51001上运行.这通常用于在我的React组件中发出命中服务器的请求.例如:

axios.get('/api/some-stuff')

在我的React组件中调用时,这将成功命中我的Express服务器.

我想确保我的后端路由经过身份验证,并且我选择通过passport-facebook使用Facebook身份验证.我设置它就像我见过的许多在线教程一样.例如,我在我的快速服务器上有一个名为'/ auth/facebook'的路由.如果我去localhost:51001/auth/facebook,它会将我重定向到facebook登录,然后将我重定向回我给它的路线.所以流程按预期工作.

我遇到的具体问题是让React成功启动并完成触发auth的api调用.我试过两种方法.

方法1:通过ajax调用路由

我在componentDidMount中调用了以下内容:

axios.get('/auth/facebook')

这成功点击我的快速服务器,但随后立即在浏览器控制台中生成以下错误:

XMLHttpRequest无法加载 https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http% ... 2Flocalhost%3A51000%2Fauth%2Ffacebook%2Fcallback&client_id = XYZ.从' https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http% ... 2Flocalhost%3A51000%2Fauth%2Ffacebook%2Fcallback&client_id = XYZ' 重定向到' https://www.facebook.com/login. php？skip_api_login = 1&api_key = XYZ ... _&display = page&locale = en_US&logger_id = 7f30b5a1-2ad1-dc31-f08b-70d3cfdd55fa'已被CORS策略阻止:请求的资源上没有"Access-Control-Allow-Origin"标头.因此不允许来源' http:// localhost:51000 '访问.

**方法2:在浏览器中转到路线**

我尝试过的另一件事,就是我在所有教程中看到的,是添加一个链接到我的一个页面,它只是导航到身份验证路径.例如:

<a href="/auth/facebook">Login with Facebook</a>

但是,当我点击这个时,我最终只能访问http:// localhost:51000/auth/facebook,或者只是我的React应用程序中的空白页面.我没有启动代理,当我在浏览器中访问此路由时,我在Express服务器上看不到任何活动,即使它不是我在react-router中定义的路由.

所以我有点卡在这里.单击该标记是否已触发针对我的Express服务器触发的路由？有没有办法让react-router忽略某些路由,以便将它们重定向到我的快速服务器？这似乎在进行AJAX调用时工作正常,但如果我转到localhost:51000/not/a/route,这不会导致请求被重定向到Express.它只加载没有内容的反应页面.

任何帮助表示赞赏.

谢谢,

-担

编辑

所以我现在有点工作,虽然我完全不相信这是"正确"的做事方式.

在我的反应应用程序(召回在端口51000上运行),我有以下链接:

<a href="http://localhost:51001/auth/facebook">Facebook Login</a>

请注意,这直接指向我的API服务器,而不是指向反应路由.导航到此链接会点击快速服务器,并立即重定向到Facebook.登录重定向回我的Express facebook回调,它本身重定向到http:// localhost:51000/somePage,现在回到我的反应应用程序.

理想情况下,该标记将转到/ api/auth/facebook,而不是硬编码转到不同的URL /端口.如果/当我弄清楚如何让react-router通过它而不是像处理它需要加载的页面那样处理时,我会更新这个问题.

编辑2

我对另一个告诉我的人开放,但我认为我目前的做法实际上非常好.我考虑了生产过程中的表现.我将在www.example.com上找到我的反应网站,我的快速服务器可通过api.example.com访问.我登录Facebook的链接将是"api.example.com/auth/facebook".假设成功验证,回调将重定向到"www.example.com/some/route".我认为跳转到"api"URL来执行登录是合理的.最终,试图让react-router忽略某些路由是没有意义的,因为我所有的api调用都将是一条明确的路由.

我意识到我没有为他人提供完整有用的解决方案.一旦我将它们放在一起,我将包含一个包含此登录流程的回购链接,以防其他人发现它有用.

**编辑3**

这是我的项目的链接.让整个项目运行并不是一件轻而易举的事,但只有少数与auth流相关的文件.

您可以在此处查看回购:https://github.com/dan-goyette/Portfolio

Express服务器路由器的位置如下: …

我目前正在使用"react-scripts build"构建和部署我的create-react-app站点,然后将构建目录的内容复制到apache web目录.web目录包含一个index.html文件,它通过脚本标记指向编译的React js文件,如下所示:

<script type="text/javascript" src="/static/js/main.dd92ea42.js"></script>

这就是"react-script build"的所有内置行为.我发现即使创建了一个新的index.html文件,并且它有内容更改(该.js文件的路径随每次部署而改变),浏览器仍然会缓存整个应用程序.即使对网站进行"硬"刷新也不会加载新内容.我必须完全删除缓存,然后重新加载任何要刷新的东西.

是否有一些技巧来缓存create-react-app并通过react-scripts构建？我假设浏览器只查看index.html文件,如果它没有缓存应用程序,并且再也不会查看它？否则我不明白为什么在重新部署时它没有看到对index.html文件的更改.

那么,部署create-react-app应用程序的诀窍是什么,这样每个部署都会使浏览器的缓存失效,而用户不需要通过环节来获得新版本？

我试图解决的问题对我来说似乎很简单:我的应用程序有一个站点范围的菜单,用户可以从中导航到各个区域.菜单项只是ActionResult方法的链接.我在操作上使用自定义AuthorizeAttribute来强制执行用户的授权角色.这样可以正常工作,因为它阻止用户在没有相应角色的情况下执行操作.但是,如果他们没有被授权执行该操作,我甚至不会显示导航到该操作的菜单选项.

所以,在最简单的层面上,我希望能够做到这样的事情:

var isAuthorized = IsAuthorized("ControllerName", "ActionName", currentUser);

然后,IsAuthorized方法将查看操作上的任何AuthorizeAttributes,并评估给定用户是否能够执行它.

这种方法是否存在？假设我们在进行此评估时没有控制器的实例.

我有一个要求在IE8中支持合理漂亮的打印.我今天遇到了一个问题,一个页面正在使用一些HTMl5功能(部分)和CSS.问题仅在打印时发生.查看下面的示例,它应该生成一些带下划线的文本.这很好.但是在打印时,它没有下划线.这可以通过将"部分"更改为"div"来"修复",但出于各种原因,我宁愿不这样做.

有人有建议吗？这似乎不是在打印预览期间执行javascript的问题,因为我可以向页面添加"window.onload"事件以使其填充包含内容的div,并且在打印预览中工作正常.普通的CSS在打印预览中工作正常; 如果我没有".SigLine"嵌套在".Signature"中,它在打印预览中可以正常工作.但似乎"Section"标签的CSS类以某种方式被忽略,因此嵌套的"SigLine"div不认为自己是"Signature"元素的子元素.

这是一个完整的工作示例

<html>
<head>
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <style type="text/css" media="screen,print">
        .Signature .SigLine{border-bottom:solid 1px #000} 
    </style>
</head>
<body>

<section class="Signature"> <!-- Make this a <div> and everything's fine... -->
<div class="SigLine" style="width: 400px;">I should be underlined...</div>
</section>

</body>
</html>

摘要：我的全局“ContextMenu”样式未应用于文本框和其他控件上的默认上下文菜单。

具体说明：我的应用程序中有一些没有显式上下文菜单的文本框。因此，当您右键单击它们时，您会看到标准的上下文菜单选项“剪切”、“复制”和“粘贴”。但是，该上下文菜单最终并未使用我在 Generic.xaml 中设置的全局“ContextMenu”样式。TextBox 上的默认上下文菜单实际上不是上下文菜单吗？

如果我显式设置文本框的 ContextMenu，则菜单将使用我的全局 ContextMenu 样式。例如，这工作正常：

<Style TargetType="{x:Type TextBox}">
    <Setter Property="ContextMenu" Value="{StaticResource StandardContextMenu}"/>
</Style>

<ContextMenu x:Key="StandardContextMenu">
    <MenuItem Header="Cut" Command="ApplicationCommands.Cut"/>
    <MenuItem Header="Copy" Command="ApplicationCommands.Copy"/>
    <MenuItem Header="Paste" Command="ApplicationCommands.Paste"/>
</ContextMenu>

但我真的不想为了让 WPF 应用正确的样式而创建这个完全冗余的 ContextMenu。另外，除了 TextBox 之外，还有其他控件在单击时显示 ContextMenus，并且这些控件也不会采用全局 ContextMenu 样式。

那么，当我右键单击未定义显式 ContectMenu 的 TextBox 时，实际上会显示什么？那东西不是ContextMenu吗？为什么它不使用全局ContextMenu样式？

编辑：使用 Snoop 进一步研究这一点，我发现当我显式添加 ContextMenu 时，它在可视化树中显示为 ContextMenu。但显示的默认 ContextMenu 在可视化树中显示为 EditorContextMenu。那么，下一个问题是如何全局设置 EditorContextMenu 的样式。

当我想引用其类名称恰好与当前类的名称空间的一部分相同的类时，我发现C＃处理名称空间的方式有些沮丧。这将产生一个编译器错误，“'Class'是一个命名空间，但像类型一样使用”。

请考虑以下代码示例，该示例演示了该问题：

namespace A.B.C
{
    public class Y
    {      
    }
}

namespace X.Y.Z
{
    public class Class1
    {
        public Y MyProp;
    }
}

在这种情况下，我想使用名称空间“ ABC”中的类“ Y”。但是因为“ Y”也是名称空间的一部分，所以C＃将“ Y”视为名称空间，而不是类型。

我可以通过完全限定类名“ ABCY”或使用别名来解决此问题，但我的一般偏好是C＃在这种情况下不将“ Y”视为命名空间。我经常有一些代码，例如测试代码，其中包含与测试的类相似的名称空间，而这种类/命名空间的冲突意味着在设置时必须更加冗长。

我不确定该过程称为什么，但是似乎在解析类和名称空间时，C＃将遍历名称空间，直到找到匹配的名称空间的一部分。在这种情况下，它向上走并找到Y。是否有一种方法告诉C＃不要向上走，不允许这种部分名称空间匹配？

我是 SceneKit 的新手，所以我尝试做的事情完全有可能/很可能不是正确的方法。所以这是我的总体意图：

我正在建造一个玩家穿越的“隧道”。这是一个程序生成的隧道。我正在确定代表隧道网格的点的位置，然后将点与三角形连接在一起以对其进行蒙皮。我使用以下方法来生成我的三角形：

func addTriangleFromPositions(scene: SCNScene, point1: SCNVector3, point2: SCNVector3, point3: SCNVector3)
{   
    let vector12 = GLKVector3Make(point1.x - point2.x, point1.y - point2.y, point1.z - point2.z)
    let vector32 = GLKVector3Make(point3.x - point2.x, point3.y - point2.y, point3.z - point2.z)
    let normalVector = SCNVector3FromGLKVector3(GLKVector3CrossProduct(vector12, vector32))


    let positions: [SCNVector3] = [point1, point2, point3]
    let normals: [SCNVector3] = [normalVector, normalVector, normalVector]
    let indices: [Int32] = [0, 2, 1]
    let vertexSource = SCNGeometrySource(vertices: positions, count: positions.count)
    let normalSource = SCNGeometrySource(normals: normals, count: normals.count)
    let indexData …