小编Ali*_*ich的帖子

React和Grunt - Envify NODE_ENV ='production'和UglifyJS

我正在使用Grunt构建一个React项目,我想要'dev'和'prod'的味道.正如反应文档所说:

要在生产模式下使用React,请将环境变量NODE_ENV设置为production.建议使用UglifyJS执行死代码消除的minifier,以完全删除开发模式中存在的额外代码.

我是非常新的使用grunt,browserify和东西,但让我们看看.我遇到的第一个问题是envify,我用它作为变换:

browserify: {
  options: {
    transform: ['reactify'],
    extensions: ['.jsx']
  },
  dev:{
    options: {
      watch: true //Uses watchify (faster)
    },
    src: ['js/app.js'],
    dest: 'js/bundle.js'
  },
  /**
   * To use React in production mode, set the environment variable NODE_ENV to production.
   * A minifier that performs dead-code elimination such as UglifyJS is
   * recommended to completely remove the extra code present in development mode.
   **/
  prod: {
    options: {
     transform: ['envify'] //How to set up NOD_ENV='production' ?
    }, …
Run Code Online (Sandbox Code Playgroud)

javascript node.js browserify gruntjs reactjs

8
推荐指数
2
解决办法
7199
查看次数

CSS - 使页面居中 - 然后使页面高度为100%

我试图将页面居中,然后将其设置100%为高度.我有一个名为"content"的div作为HTML页面中所有元素的父元素.接下来我需要做什么?我想远离任何CSS黑客.这目前在IE7中有效,但在Firefox 3中没有.

编辑:我增加了高度:100%; 对#content,这就是使得它在IE浏览器.Firefox还没有解决.

到目前为止我的样式表是:

html, body
{
    width: 100%;
    height: 100%;
}

body
{
    background-color: #000;
    text-align: center; 
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto; 
} 

#content
{
    position: relative; 
    text-align: left;
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    width: 840px;
    height: 100%;
    padding: 0px 5px 5px 5px;
}
Run Code Online (Sandbox Code Playgroud)

css

7
推荐指数
1
解决办法
1万
查看次数

在ASP.NET中将HTML转换为PDF时保持CSS样式

我正在使用ITextSharp将HTML页面转换为PDF.

然而,iTextSharp的打印在样式声明的CSS直出,编程方式添加即使忽略样式表和只听一些内联样式(如font-sizecolor,但不会background-color).

ITextSharp是否缺少某些东西,或者有更好(免费)的方式进行此转换?

提前致谢,

css asp.net pdf-generation itext

7
推荐指数
2
解决办法
4万
查看次数

用于RESTful后端的前端框架

我正在使用Spring框架开发RESTful后端.所有的服务都是通过HTTP请求方法(可GET,POST,PUT,DELETE).

能告诉我前端框架的最佳组合是什么?

是否最好使用SpringMVC或其他一些像Backbone这样的框架是否足够好?

如果我使用SpringMVC作为REST后端,还使用SpringMVC作为前端,那么对于后端然后再为前端再次做同样的事情是不是额外的工作?

最重要的是我对如何使用前端进行会话管理感到困惑?

任何帮助将不胜感激!

session frontend session-state

7
推荐指数
1
解决办法
7424
查看次数

如何在IE和Firefox中使textarea具有相同的宽度?

我想要一个textarea 500px,这是我用于textarea的CSS:

width: 498px;
padding: 0px;
margin: 0px;
Run Code Online (Sandbox Code Playgroud)

我注意到IE和Chrome 1px默认有边框,另一方面FF有一个2px边框导致textarea 502px代替500px,任何变通方法?

只是一个注释,我可以明确指定texarea边框宽度,即.border-width : 1px,但这里的问题是它与IE不能很好地工作(当边框设置为IE时,IE中的默认textarea边框在视觉上看起来不正常1px),我可以改变边框颜色但我不喜欢我想这样做,我更喜欢保留默认浏览器样式,我只想在所有浏览器中宽度相同而不更改默认样式或将颜色设置为边框,这可能吗?

css cross-browser

6
推荐指数
1
解决办法
1万
查看次数

Reactjs:不变违规:ReactMount:具有相同`data-reactid`的两个有效但不相等的节点:.0.5

现在,当我使用Reactjs和html5的"contentEditable"或"edit"模式时,我遇到了这个问题.

<div contenteditable="true">
<p data-reactid=".0.5">Reactjs</p>
</div>
Run Code Online (Sandbox Code Playgroud)

当我输入Enter或Shift Enter到新行时 - >使用前一个元素创建新的相同元素

<div contenteditable="true">
<p data-reactid=".0.5">Reactjs</p>
<p data-reactid=".0.5"></p>
</div>
Run Code Online (Sandbox Code Playgroud)

当我点击这些元素时 - >会出现此错误.

我知道这是一个问题.有人可以给我解决方案吗?也许在"contenteditable"模式下创建新的另一个元素,或者在Reactjs中阻止处理隐式事件.

谢谢.

javascript html5 reactjs

6
推荐指数
1
解决办法
3822
查看次数

如何重新加载javascript文件

我有一个关于重新加载JavaScript文件的问题.我开发网页前端并在JS中进行大量编码.每当我想检查应用程序的流程是否正确(或进行一些调试)时,我必须F5按键来重新加载整个页面和它的脚本,我必须等待.等待时间取决于页面的重量,有时我会不耐烦.因此我想知道是否有任何方法只重新加载更改的脚本文件*.js?或者可能有一些Chrome重新加载所选脚本的插件?这可能是一种非常方便的发展方式.谢谢你的回复.

这个使用jQuery,例如:

var scs=$('script[type*=javascript]');
var scsl = scs.length;
var scsi = 0;
var o = [];
var oi = 0;
var ol = 0;
var s = '';
var fws = 0;
var sws = 0;
var v = {};

function i1(){
fws = window.setInterval(function(){
        v = $(scs[scsi]);
        
        s = v.attr('src');
        if(typeof s!='undefined' && s.indexOf('http')==-1 && s.indexOf('index')==-1){
                console.log([scsl,scsi,s]);
                o.push({src:s});
                v.remove();
        }

        if(scsi==scsl){
                console.log(o);
                window.clearInterval(fws);
                ol = o.length;
i2();
        }
        else{
                scsi++;
        }
},800);
}

function i2(){ …
Run Code Online (Sandbox Code Playgroud)

javascript jquery frontend

5
推荐指数
1
解决办法
4677
查看次数

我的简单的react.js应用程序是我手机上的空白页面(但可以在我的台式机和平板电脑上运行)。为什么?

我正在玩弄react.js。我创建了一个简单的应用程序, 它可以在我的桌面和 Android 平板电脑上运行,但我在手机上看到一个空白页面,没有其他内容,无论是在 Android 浏览器中还是在 Firefox 中。

是的,我确实添加了所需的

React.initializeTouchEvents(true);
Run Code Online (Sandbox Code Playgroud)

有任何想法吗?谢谢。

reactjs

5
推荐指数
1
解决办法
3071
查看次数

/ path上的ReactJS路由/浏览器同步重新加载产生无法获取/路径错误

我正在构建一个基本的React/Flux应用程序,并使用react-router-component进行路由,使用browser-sync进行构建更改的实时重新加载,并使用browserify进行依赖注入.

我的问题是,当现场重装或重装这不是一个路径上发生/(即/profile,/gallery等...),我得到的不能得到一个错误信息/path(或与此有关的任何途径).

我怀疑这与它是单页应用程序并且所有路由都在客户端上完成这一事实有关.

这是我的浏览器同步设置(这是非常基本的).我认为我可能需要添加一些中间件,但我不确定实际放入中间件的内容.

gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: './client'
        },
        notify: false
    });
});
Run Code Online (Sandbox Code Playgroud)

url-routing single-page-application reactjs browser-sync

5
推荐指数
2
解决办法
4071
查看次数

react-stripe-elements CardElement 抛出跨域错误

我正在尝试使用 react-stripe-elements 在我的 React JS 应用程序中创建一个 Stripe 支付表单。当我使用该组件时,我收到以下消息。

错误:引发了跨域错误。React 无权访问开发中的实际错误对象。

如果我使用单个元素组件(即CardExpiryElement, CardCVCElement, PostalCodeElement),我就不会出错。

有人有什么想法吗?谢谢。

reactjs react-stripe-elements

5
推荐指数
1
解决办法
372
查看次数