小编eta*_*han的帖子

通过具有依赖性的jspm安装npm软件包

我知道我可以通过运行来安装npmjspm:jspm install npm:<pkg-name>这将允许我在开发中使用它(例如在我的JS文件中:) import myPackage from 'myPackage';.

如果包的package.json文件npm包含依赖项,我希望它也能在包中安装它们.所以在那个包文件夹中,我希望有一个包含的node_modules文件夹.但是,当我运行命令来安装npm软件包时,它不会安装node_modules,我将不得不手动转到该文件夹​​并运行npm install以显示这些文件夹.这意味着我无法在不手动运行此命令的情况下引用程序包本身中的其他文件/依赖项.有什么我可以通过运行jspm来确保这些安装吗?

javascript npm jspm

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

使用 CSS 嵌套情感

我有以下 JSX 结构。

<div css={content} style={{ minHeight: props.minHeight }}>
  <p css={description}>{props.description}</p>
</div>
Run Code Online (Sandbox Code Playgroud)

现在我需要编写一种样式,该样式将更改悬停description时的背景。content如何使用 css 对象在情感中编写它。

我尝试过这样做。但这没有用。

const description = css({
  background: 'yellow'
})

const content = css({
  '&:hover': {
     [description]: {
        background: 'red',
     },
   },
})
Run Code Online (Sandbox Code Playgroud)

提前致谢!

javascript css emotion reactjs

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

如何通过代理发送 fetch() 请求?

我有一个 HTTP 代理,我想代理来自浏览器客户端应用程序的所有 HTTP 请求。

在命令行上,我可以通过以下方式代理请求:

curl https://code.sgo.to --proxy localhost:5555
Run Code Online (Sandbox Code Playgroud)

或这个:

var http = require("http");

var options = {
  host: "proxy",
  port: 8080,
  path: "http://www.google.com",
  headers: {
    Host: "www.google.com"
  }
};
http.get(options, function(res) {
  console.log(res);
  res.pipe(process.stdout);
});
Run Code Online (Sandbox Code Playgroud)

但是,在客户端上,path似乎并不是真正有效的path. 例如

fetch("http://localhost:5555http://code.sgo.to")
Run Code Online (Sandbox Code Playgroud)

看起来不太对劲。但

fetch("http://localhost:5555/http://code.sgo.to")
Run Code Online (Sandbox Code Playgroud)

破坏了我的标准代理,因为路径中有一个额外的内容/,它期望传递一个 URL。

有人知道浏览器中的等效项是什么(例如 throughfetch()或 through XMLHttpRequest)吗?

javascript web

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

在 Express 路由器和中间件之间传递数据

我正在尝试编写快速中间件来检查授权标头中 JWT 的有效性。这看起来很简单,但我不希望它在所有路由上运行(例如不在登录/注册路由器上运行)。

因此,我想在路由器声明中指定路由应该需要有效的令牌。例如这样的东西

const controllers = require('../controllers');

module.exports = (app) => {

    app.post('/auth/signup', controllers.auth.signup.post);
    app.post('/auth/login', controllers.auth.login.post);

    app.get('/teams', controllers.teams.get, {requiresToken:true});

};
Run Code Online (Sandbox Code Playgroud)

除此之外, .post 和 .get 不采用第三个参数,并且控制器仅采用 (req,res,next) 参数,因此我无法真正看到为每个路线传递起始数据的方法。我确信我错过了一些简单的东西

javascript node.js express

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

CSS 文件导致 React/webpack 配置错误

我有一个全栈项目,它是用 Django-REST 和 React 作为前端。

每次我尝试将 css 文件加载到我的 React 应用程序中时,我都会收到错误

import './Dashboard.css'
Run Code Online (Sandbox Code Playgroud)

导出默认类仪表板扩展组件{

render() {
...
Run Code Online (Sandbox Code Playgroud)

仪表板.css

body {
margin:0;
}
Run Code Online (Sandbox Code Playgroud)

错误图片 这是我的 webpack.config.js

module.exports = {
module: {
       rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            }
        ]
    }
}
Run Code Online (Sandbox Code Playgroud)

对我来说奇怪的是,内联CSS工作得很好,只有当我尝试加载外部表时,我才会遇到问题。有谁知道问题的原因可能是什么?

javascript css reactjs webpack babeljs

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

如何通过在 beforeEach 钩子中浅层安装 vue 组件来干燥代码?

我第一次使用 vue-test-utils 在 Vue 应用程序中实现一堆单元测试。测试确实有效,但是,我想干燥代码。

目前我正在将以下代码添加到每个测试中:

const wrapper = shallowMount(ConceptForm, {
    localVue,
    router,
    propsData: { conceptProp: editingConcept }
});
Run Code Online (Sandbox Code Playgroud)

使测试看起来像这样

it('shows the ctas if the state is equal to editing', () => {
    const wrapper = shallowMount(ConceptForm, {
        localVue,
        router,
        propsData: { conceptProp: editingConcept }
    });

    expect(wrapper.find('#ctas').exists()).toBe(true)
});
Run Code Online (Sandbox Code Playgroud)

我这样做是因为我需要将这个特定的 propsData 传递给包装器。有什么方法可以让我在 beforeEach 中浅层安装组件,然后传递 prop 吗?

谢谢!

javascript vue.js jestjs vue-test-utils

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

Vue + Jest 全局配置转移到规范文件中

我正在使用 VueJS 和 Jest 对我的组件进行单元测试。

我还使用 Bootstrap Vue 库进行样式设置。我需要在 Jest 测试中使用此插件,以删除一些有关未知插件的控制台警告。

我已经创建了一个安装文件,如下所示:

import { createLocalVue } from '@vue/test-utils'
import BootstrapVue from 'bootstrap-vue'

const localVue = createLocalVue()

localVue.use(BootstrapVue)
Run Code Online (Sandbox Code Playgroud)

并将 Jest 配置为在每次测试之前使用它。

setupFiles: ['<rootDir>/tests/unit/setup']
Run Code Online (Sandbox Code Playgroud)

但是,要从控制台中删除警告,我需要localVue在安装组件时使用该实例:

const wrapper = shallowMount(MyComponent, {
      localVue,
      propsData: { value: 'someVal }
    })
Run Code Online (Sandbox Code Playgroud)

但是,我无法看到将localVue创建的实例放入setup.js测试规范文件中。

如果我这样做:

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue)
Run Code Online (Sandbox Code Playgroud)

它工作正常,但这很糟糕,因为我们不应该在 Jest 测试中使用 Global Vue 实例。

有没有办法做我想做的事情,或者我是否必须在每个测试文件中构建 Bootstrap Vue 插件(以及其他插件......)?

javascript unit-testing vue.js jestjs vue-test-utils

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

对从索引文件导入的 React 组件进行样式化时出错,但直接从组件文件导入时不会出错

这里是新手,所以如果我忽略了一些明显的东西或错过了重复的帖子(并且也没有直接在样式组件上发布,显然我需要一个代表......),请提前道歉。

\n\n

我发现最接近我的问题的是这个已解决的问题,位于线程的底部:\n https://github.com/styled-components/styled-components/issues/213

\n\n

这个人有一个非常相似的问题,但解决方案很简短并且特定于 Typescript。

\n\n

背景:我有一个索引文件,它从各地导入我的组件,并以 webpack 别名导出它们。每当我需要在其他地方导入时,我只需声明:

\n\n
import { MyComponentA, MyComponentB, MyComponentC } from \'components\';\n
Run Code Online (Sandbox Code Playgroud)\n\n

我最近开始将样式化组件合并到我的项目中,当我尝试对以这种方式导入的组件进行样式化时,出现了如下错误:

\n\n
Error: Cannot create styled-component for component: undefined._____________styled-components.browser.esm.js:233\n   at new StyledComponentsError (/home/jhillert/Dropbox/Projects/TimeLockr/node_modules/styled-components/dist/styled-components.browser.esm.js:233:59)\n   at constructWithOptions (/home/jhillert/Dropbox/Projects/TimeLockr/node_modules/styled-components/dist/styled-components.browser.esm.js:1355:12)\n   at styled (/home/jhillert/Dropbox/Projects/TimeLockr/node_modules/styled-components/dist/styled-components.browser.esm.js:2293:11)\n   at Module.eval (/home/jhillert/Dropbox/Projects/TimeLockr/src/components/card-area/CardArea.jsx:111:91)\n   at eval (/home/jhillert/Dropbox/Projects/TimeLockr/src/components/card-area/CardArea.jsx:133:31)\n   at Module../src/components/card-area/CardArea.jsx (http://localhost:8080/bundle.js:9343:1)\n   at __webpack_require__ (http://localhost:8080/bundle.js:724:30)\n   at fn (http://localhost:8080/bundle.js:101:20)\n   at eval (/home/jhillert/Dropbox/Projects/TimeLockr/src/indexes/components.jsx:17:89)\n   at Module../src/indexes/components.jsx (http://localhost:8080/bundle.js:9619:1)\n
Run Code Online (Sandbox Code Playgroud)\n\n

如果我直接从源文件导入组件,则不会收到错误。仅当我尝试将从索引文件导入的组件传递到 styled() 方法中,以及当我尝试使用 CSS prop 添加内联样式时,才会发生这种情况。

\n\n

由于某种原因,以这种方式导入的所有组件都不会发生错误,而且我对代码进行了更改,突然导致索引导入触发错误。我真的很喜欢有一个中央索引文件,所以修复将不胜感激。

\n\n

css prop 导致错误的示例:

\n\n

*项目配置如下。\n索引文件如下所示 (components.jsx):

\n\n
export { …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs webpack styled-components

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

实现ngx-gallery时无法读取未定义的属性“替换”

我只是ngx-gallery在尝试使用Google图片中的一些网址进行项目,但是每次在控制台中遇到以下错误时:

ERROR TypeError: Cannot read property 'replace' of undefined at NgxGalleryHelperService.push../node_modules/ngx-gallery/bundles/ngx-gallery.umd.js.NgxGalleryHelperService.validateUrl (ngx-gallery.umd.js:121) at NgxGalleryHelperService.push../node_modules/ngx-gallery/bundles/ngx-gallery.umd.js.NgxGalleryHelperService.getBackgroundUrl (ngx-gallery.umd.js:133) at NgxGalleryImageComponent.push../node_modules/ngx-gallery/bundles/ngx-gallery.umd.js.NgxGalleryImageComponent.getSafeUrl (ngx-gallery.umd.js:367) at Object.eval [as updateRenderer] (NgxGalleryImageComponent.html:3) at Object.debugUpdateRenderer [as updateRenderer] (core.js:10872) at checkAndUpdateView (core.js:10248) at callViewAction (core.js:10484) at execEmbeddedViewsAction (core.js:10447) at checkAndUpdateView (core.js:10244) at callViewAction (core.js:10484)

这是我的component.ts

export class FefileComponent implements OnInit {
  galleryOptions: NgxGalleryOptions[];
  galleryImages: NgxGalleryImage[];

  ngOnInit(): void {
  this.galleryOptions = [
    {
      'imageArrows': true,
      'imageSwipe': false,
      'thumbnailsArrows': true,
      'thumbnailsSwipe': false,
      'previewSwipe': true,
      'thumbnailsMargin': 0,
      'thumbnailMargin': 0,
      'thumbnailsColumns': 6,
      'width': …
Run Code Online (Sandbox Code Playgroud)

angular angular6

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

this.props 上的属性不存在

我可以在 this.props 上安慰我的财产。但是 ts 显示错误 ts(2339)。

我试图定义 this.props 的类型。但是 'this.props' 已经是只读的。

import React from 'react';
import {Avatar} from 'antd';
import router from 'umi/router';
import styles from './index.css';
import { connect } from 'dva';
import LeftBar from '../leftbar';

const mapStateToProps = (state: any) => {
  return {
    username: state.global.username,
    login: state.global.login
  }
}
class Header extends React.Component {

  componentWillMount(){
    if(!this.props.login){
      router.push('/');
    }
  }
  handleClick = () => {
    console.log('this state:'+this.state);
    console.log('this props:'+this.props);
    // router.push('/');
  }
  public render () {
    return ( …
Run Code Online (Sandbox Code Playgroud)

javascript typescript reactjs

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

为什么这个画布绘图会导致内存泄漏?

以下代码导致内存/CPU 泄漏 - CPU 使用率迅速增加并在几分钟内达到 100%,这对性能不利。我想了解为什么会发生这种情况,这样我以后就不会犯类似的错误了。

function drawBoard(w, h, p, context) {

  for (var x = 0; x <= w; x += 40) {
    context.moveTo(0.5 + x + p, p);
    context.lineTo(0.5 + x + p, h + p);
  }


  for (var x = 0; x <= h; x += 40) {
    context.moveTo(p, 0.5 + x + p);
    context.lineTo(w + p, 0.5 + x + p);
  }

  context.strokeStyle = "black";
  context.stroke();

}
let cancel
var canvas = document.getElementById('canvas');
var ctx = …
Run Code Online (Sandbox Code Playgroud)

javascript memory-leaks html5-canvas

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

for循环中的“await仅在异步函数中有效”

我被告知“await 仅在异步函数中有效”,即使它在异步函数中。这是我的代码:

async function uploadMultipleFiles (storageFilePaths,packFilePaths,packRoot) {
    return new Promise((resolve,reject) => {
        try {
            for (i in storageFilePaths) {
                await uploadFile(storageFilePaths[i],packFilePaths[i],packRoot) // error throws on this line
            }
            resolve("files uploaded")
        } catch {
            console.log(err)
            reject("fail")
        }
    })
}
Run Code Online (Sandbox Code Playgroud)

为什么在我将其设为异步函数时会发生这种情况?是因为我使用了 for 循环吗?如果是这样,如何在没有此错误的情况下获得预期结果?

javascript node.js promise async-await

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