我想知道我们是否使用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) 我有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) 在FF和Chrome中查看此演示,然后删除:
-webkit-transform:translateZ(0px);
Fom css,再看看Chrome.
它还使Chrome机身容器具有min-width:100%
切割内容(并非总是如此).
我需要-webkit-transform:translateZ(0px);
防止Chrome中出现奇怪的怪异黑盒子导致同时使用transformX + Y过多的元素.
我正在尝试使用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.
我需要为行实现阴影.那行没有边距.因此,第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元素,如灯箱.
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) 我想尽可能地为我的小项目使用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) 我有 CSS3 过渡来减少地图元素的宽度。当更改地图块宽度以以编程方式更新地图宽度时,我必须触发 map.resize() 。它跳到新的宽度,没有过渡(这是预期的)
有没有办法实现地图块宽度过渡的动画?除了通过 JS 更改地图块宽度并在每帧上触发调整大小之外。
另一种方法是创建将在其中渲染地图覆盖整个宽度的块,然后使用溢出缩小该块:隐藏并使用偏移量稍微平移地图中心点。但在这种情况下,我们会得到宽地图,并且图块将在后台加载(即使块的那部分是隐藏的)我想。
我无法理解如何获取用户更改俯仰和方位后的地图视口坐标
这是我的代码的示例 - https://jsfiddle.net/5uwdfhdp/6/
我使用.getBounds()
方法,但它似乎工作错误。
在用户旋转地图之前单击地图后,我得到一个正确的矩形,之后 - 一些荒谬的事情。
我可能使用了错误的坐标,但在我看来,mapbox 方法无法按预期工作。
在提交之前我使用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命令.
我需要将地图区域限制在给定点周围5公里半径内。如何使用mapbox-gl-js或草皮获得合适的边界框?
在 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 链接。
提前致谢。
当我尝试将带有 MultiLineString 的源添加到“线”层时,没有呈现任何内容。没有错误,没有线条。
在我将 MultiLineString 功能转换为 LineString 功能成功渲染的线条之后。
javascript ×6
mapbox-gl-js ×4
css ×2
ecmascript-6 ×2
reactjs ×2
amazon-s3 ×1
browser-bugs ×1
css3 ×1
es6-promise ×1
eslint ×1
express ×1
geojson ×1
html ×1
husky ×1
mapbox ×1
npm ×1
passport.js ×1
redux ×1
stylelint ×1
turfjs ×1
webpack ×1