小编Ran*_*iev的帖子

为什么我们需要使用import'babel-polyfill'; 反应成分?

我想知道我们是否使用babel装载机+所有预设,为什么我们需要将babel-polyfill包含在我们的组件中呢?我只是认为babel-loader应该自己完成所有工作.

这里的例子是https://github.com/reactjs/redux/tree/master/examples

我要问的是:

import 'babel-polyfill';
import React from 'react';
import { render } from 'react-dom';
import App from './containers/App';
Run Code Online (Sandbox Code Playgroud)

这是包示例:

{
  "name": "redux-shopping-cart-example",
  "version": "0.0.0",
  "description": "Redux shopping-cart example",
  "scripts": {
    "start": "node server.js",
    "test": "cross-env NODE_ENV=test mocha --recursive --compilers js:babel-register",
    "test:watch": "npm test -- --watch"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/reactjs/redux.git"
  },
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/reactjs/redux/issues"
  },
  "homepage": "http://redux.js.org",
  "dependencies": {
    "babel-polyfill": "^6.3.14",
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "react-redux": "^4.2.1",
    "redux": "^3.2.1",
    "redux-thunk": "^1.0.3"
  },
  "devDependencies": …
Run Code Online (Sandbox Code Playgroud)

reactjs webpack redux

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

从不调用护照deserializeUser方法

我有200个响应登录请求,但401有任何进一步的auth检查请求,因为deserializeUser从未调用过.我潜入护照来源并注意到护照检查req._passport.session.user是否存在,如果不存在则不调用deserializeUser.

我已经在stackoverflow上搜索了其他问题,看来我有具体的案例.

有单一的本地策略auth类型,我使用Ajax请求进行登录请求,配置CORS设置,http:// localhost:8080 - frontend,http:// localhost:3000后端)

我使用bodyParse,cookieParser,快速会话,护照初始化和护照会话.Express session secure:false配置为我通过http运行auth请求.

你可以在这里找到我的项目(backend package.json很好用,所以你可以使用它,它没有遗漏的依赖关系,因为前端不确定),至少你可以检查那里的代码.

后端https://github.com/rantiev/template-api 前端https://github.com/rantiev/template-angular

快速会话配置和CORS在这里https://github.com/rantiev/template-api/blob/master/modules/appConfigure.js

var path = require('path');
var bodyParser = require('body-parser');
var session = require('express-session');
var cookieParser = require('cookie-parser');
var MongoStore = require('connect-mongo')(session);

module.exports = function (app, express, config, mongoose) {

    app.use(cookieParser());
    app.use(bodyParser.urlencoded({
        extended: true
    }));
    app.use(bodyParser.json());

    app.use(function (req, res, next) {

        // Website you wish to allow to connect
        res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080');

        // Request methods you wish to allow
        res.setHeader('Access-Control-Allow-Methods', 'GET, POST, …
Run Code Online (Sandbox Code Playgroud)

express passport.js

12
推荐指数
1
解决办法
1889
查看次数

Chrome位置:固定和transformZ错误

FFChrome中查看此演示,然后删除:

-webkit-transform:translateZ(0px);

Fom css,再看看Chrome.

它还使Chrome机身容器具有min-width:100%切割内容(并非总是如此).

我需要-webkit-transform:translateZ(0px);防止Chrome中出现奇怪的怪异黑盒子导致同时使用transformX + Y过多的元素.

css google-chrome css3 browser-bugs css-transforms

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

你今天如何在前端使用es6承诺?

我正在尝试使用babel来编译包含es6 promises的文件.我已经安装了babel-cli,babel-preset-es2015,babel-plugin-es6-promise.

我的.babelrc配置是:

{
  "presets": ["es2015"],
  "plugins": ["es6-promise"]
}
Run Code Online (Sandbox Code Playgroud)

我在里面用require()编译了js文件,但我根本不想使用require.

今天是否有可能在前端使用es6承诺而不需要js?

请提供任何链接到es6 promises实施样本与babel(或甚至与babel + require,因为我不能得到js也工作)

ps:不要使用webpack.

javascript ecmascript-6 es6-promise

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

带有底部和顶部阴影的无限行

我需要为行实现阴影.那行没有边距.因此,第1行的底部阴影覆盖第2行的顶部.

我已经创建了一个我需要jsFiddle示例.

HTML

<div class="row-with-shadow" style="z-index:10"></div>
<div class="row-with-shadow" style="z-index:9"></div>
<div class="row-with-shadow" style="z-index:8"></div>
<div class="row-with-shadow" style="z-index:7"></div>
<div class="row-with-shadow" style="z-index:6"></div>
<div class="row-with-shadow" style="z-index:5"></div>
<div class="row-with-shadow" style="z-index:4"></div>
<div class="row-with-shadow" style="z-index:3"></div>
<div class="row-with-shadow" style="z-index:2"></div>
<div class="row-with-shadow" style="z-index:1"></div>
Run Code Online (Sandbox Code Playgroud)

CSS

.row-with-shadow {
    height:100px;
    margin:0;
    padding:0;    
    border:1px solid #aaa;
    background:#eee;
    box-shadow:0 3px 8px rgba(0,0,0,0.3);
    position:relative;
}
Run Code Online (Sandbox Code Playgroud)

对于没有底部和顶部边距的行,似乎不起作用.?似乎我们必须z-index为每一行添加这种情况.

1行 - z-index 10

2行 - z-idndex 9

...

10行 - z-index 1

但是如果我们有无限的行呢?我们需要js来做吗?如果我们有1000个人怎么办?它可能是z-index 1000将涵盖任何UI元素,如灯箱.

考试http://jsfiddle.net/qh68V/

HTML

<div class="row-with-shadow"></div>
<div class="row-with-shadow"></div>
<div class="row-with-shadow"></div>
<div …
Run Code Online (Sandbox Code Playgroud)

html css

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

如何在React.createClass中使用箭头函数

我想尽可能地为我的小项目使用ES6(ES2015).现在我想使用React的箭头函数.

// What I want
let Text = React.createClass({
    componentDidMount: () => {
        setInterval(this.updateCurrentTime, 1000);
    }
}

// What I have
let Paragraph = React.createClass({
    render: () => (<div className="MySuperTable"><Text name="Dodo" startDate={(new Date()).toString()} /></div>)
});

let Text = React.createClass({
    getInitialState: function () {
        return {
            currentTime: (new Date()).toString()
        }
    },
    componentDidMount: function () {
        setInterval(this.updateCurrentTime, 1000);
    },
    updateCurrentTime: function () {
        this.setState({
            currentTime: (new Date()).toString()
        });
    },
    render: function () {
        return (
            <div>
                <span>Hello my name is {this.props.name}</span>
                <span>And …
Run Code Online (Sandbox Code Playgroud)

javascript ecmascript-6 reactjs

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

如何实现Mapbox GL地图的平滑地图宽度过渡?

我有 CSS3 过渡来减少地图元素的宽度。当更改地图块宽度以以编程方式更新地图宽度时,我必须触发 map.resize() 。它跳到新的宽度,没有过渡(这是预期的)

有没有办法实现地图块宽度过渡的动画?除了通过 JS 更改地图块宽度并在每帧上触发调整大小之外。

另一种方法是创建将在其中渲染地图覆盖整个宽度的块,然后使用溢出缩小该块:隐藏并使用偏移量稍微平移地图中心点。但在这种情况下,我们会得到宽地图,并且图块将在后台加载(即使块的那部分是隐藏的)我想。

mapbox-gl-js

5
推荐指数
0
解决办法
466
查看次数

如何考虑俯仰和方位来获取mapbox-gl地图视口边缘坐标?

我无法理解如何获取用户更改俯仰和方位后的地图视口坐标

这是我的代码的示例 - https://jsfiddle.net/5uwdfhdp/6/ 我使用.getBounds()方法,但它似乎工作错误。

在用户旋转地图之前单击地图后,我得到一个正确的矩形,之后 - 一些荒谬的事情。

我可能使用了错误的坐标,但在我看来,mapbox 方法无法按预期工作。

javascript mapbox-gl-js

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

如何使用husky npm模块预先运行几个命令?

在提交之前我使用husky来检查JS.在我的package.json我有

"scripts": {
    "lintStyles": "stylelint app/**/*.scss",
    "fixStylesLinting": "stylelint app/**/*.scss --fix",
    "lintJS": "eslint app/**/*.js",
    "fixJSLinting": "eslint --fix app/**/*.js",
    "precommit": "npm run lintJS"
  }
Run Code Online (Sandbox Code Playgroud)

它的工作原理,我不明白的是我如何运行lintJS,lintStyles命令.

javascript npm eslint stylelint husky

4
推荐指数
1
解决办法
3198
查看次数

如何根据给定点的距离获取边界框?

我需要将地图区域限制在给定点周围5公里半径内。如何使用mapbox-gl-js或草皮获得合适的边界框?

javascript mapbox turfjs mapbox-gl-js

4
推荐指数
1
解决办法
1171
查看次数

如何配置 amazon cloudfront 以阻止某些 S3 存储桶文件访问?

在 S3 上,我们将所有文件设为私有。用户无法通过 S3 链接加载任何文件。但它们都是通过cloudfront链接公开的。

如何限制对 ./restricted.txt 的访问?(只有使用签名 URL 链接的用户才能通过 cloudfront 链接看到该文件),./not_restricted.txt 必须同时公开。

我是怎么做到的。

我在 s3 上创建了 /public 和 /private 文件夹,分隔了我的私有/公共文件,创建了指向 /public 的 cloudfront 源。因此,/public 文件夹中的所有 S3 文件都是公共的,我可以使用不带公共前缀 /img1.jpg 的链接加载它们,而不是 /public/img1.jpg,因为 cloudfront 将 /public 视为根文件夹。

现在,我位于 /private 或 /public 文件夹上方任何其他位置的所有文件通过 S3 和 cloudfront 链接都是私有的。

但我不知道如何为具有 cloudfront 路径的 /private/restricted.txt 文件创建签名 URL。我可以创建使用 S3 路径的签名 url,但我需要有 cloudfront 链接。

提前致谢。

amazon-s3 amazon-web-services amazon-cloudfront

2
推荐指数
1
解决办法
3972
查看次数

mapbox-gl 是否支持 MultiLineString geoJSON 要素类型?

当我尝试将带有 MultiLineString 的源添加到“线”层时,没有呈现任何内容。没有错误,没有线条。

在我将 MultiLineString 功能转换为 LineString 功能成功渲染的线条之后。

javascript geojson mapbox-gl-js

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