小编dun*_*all的帖子

在Isomorphic React组件中导入CSS文件

我有一个使用ES6编写的组件的React应用程序 - 通过Babel和Webpack进行编译.

在某些地方,我想包含特定组件的特定CSS文件,如反应webpack cookbook中所建议的那样

但是,如果在任何组件文件中我需要静态CSS资产,例如:

import '../assets/css/style.css';

然后编译失败并出现错误:

SyntaxError: <PROJECT>/assets/css/style.css: Unexpected character '#' (3:0)
    at Parser.pp.raise (<PROJECT>\node_modules\babel-core\lib\acorn\src\location.js:73:13)
    at Parser.pp.getTokenFromCode (<PROJECT>\node_modules\babel-core\lib\acorn\src\tokenize.js:423:8)
    at Parser.pp.readToken (<PROJECT>\node_modules\babel-core\lib\acorn\src\tokenize.js:106:15)
    at Parser.<anonymous> (<PROJECT>\node_modules\babel-core\node_modules\acorn-jsx\inject.js:650:22)
    at Parser.readToken (<PROJECT>\node_modules\babel-core\lib\acorn\plugins\flow.js:694:22)
    at Parser.pp.nextToken (<PROJECT>\node_modules\babel-core\lib\acorn\src\tokenize.js:98:71)
    at Object.parse (<PROJECT>\node_modules\babel-core\lib\acorn\src\index.js:105:5)
    at exports.default (<PROJECT>\node_modules\babel-core\lib\babel\helpers\parse.js:47:19)
    at File.parse (<PROJECT>\node_modules\babel-core\lib\babel\transformation\file\index.js:529:46)
    at File.addCode (<PROJECT>\node_modules\babel-core\lib\babel\transformation\file\index.js:611:24)
Run Code Online (Sandbox Code Playgroud)

似乎如果我尝试在组件文件中需要一个CSS文件,那么Babel加载器会将其解释为另一个源并尝试将CS​​S转换为Javascript.

这是预期的吗?有没有办法实现这一点 - 允许转换文件显式引用不被转换的静态资产?

我已经为.js/jsx和CSS资产指定了加载器,如下所示:

  module: {
    loaders: [
      { test: /\.css$/, loader: "style-loader!css-loader" },
      { test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel'}
    ]
  }
Run Code Online (Sandbox Code Playgroud)

查看完整的webpack配置文件

详细信息如下:

webpack.common.js - 我使用的基本webpack配置,因此我可以在开发和生产之间共享属性.

Gruntfile.js - …

javascript reactjs webpack babeljs

42
推荐指数
4
解决办法
5万
查看次数

使用UglifyJS插件进行Webpack优化会导致运行时错误

我有一个通过webpack捆绑的同构React应用程序.

我有2个入口点对应2个捆绑文件输出:vendors.jsapp.js.

当运行webpack-dev-server或没有任何优化标志进行编译时,一切正常.但是,只要我尝试使用Uglify插件,编译后的输出就会包含错误.

我试过了:

vendors.js
app.js

或者在配置中:

vendors.js

但都会导致相同的运行时错误(未定义的变量).

有什么明显可能导致这种情况吗?Uglify是否过度热心并且删除了不应该的东西?

javascript uglifyjs reactjs webpack

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

Typescript和Jest:避免模拟函数的类型错误

当想要使用Jest模拟外部模块时,我们可以使用该jest.mock()方法自动模拟模块上的函数.

然后,我们可以按照我们的意愿操纵和查询模拟模块上的模拟函数.

例如,考虑以下用于模拟axios模块的设计示例:

import myModuleThatCallsAxios from '../myModule';
import axios from 'axios';

jest.mock('axios');

it('Calls the GET method as expected', async () => {
  const expectedResult: string = 'result';

  axios.get.mockReturnValueOnce({ data: expectedResult });
  const result = await myModuleThatCallsAxios.makeGetRequest();

  expect(axios.get).toHaveBeenCalled();
  expect(result).toBe(expectedResult);
});
Run Code Online (Sandbox Code Playgroud)

以上将在Jest中正常运行,但会抛出一个Typescript错误:

属性'mockReturnValueOnce'在类型'(url:string,config?:AxiosRequestConfig | undefined)=> AxiosPromise'上不存在.

typedef axios.get正确不包含mockReturnValueOnce属性.我们可以强制将Typescript axios.get包装为Object文字Object(axios.get),但是:

在保持类型安全的同时模拟功能的惯用方法是什么?

mocking node.js typescript reactjs jestjs

15
推荐指数
6
解决办法
9939
查看次数

将整个班级存入Sinon进行测试

序言:我已经阅读了很多SO和博客文章,但没有看到任何回答这个特定问题的内容.也许我只是在寻找错误的东西......

假设我正在开发一个WidgetManager可以操作Widget对象的类.

如何使用sinon测试WidgetManager是否Widget正确使用API而不需要拉入整个Widget库?

基本原理:WidgetManager的测试应该与Widget类分离.也许我还没有编写Widget,或者Widget可能是一个外部库.无论哪种方式,我应该能够测试WidgetManager正确使用Widget的API而无需创建真实的Widgets.

我知道sinon模拟只能在现有的类上工作,据我所知,sinon存根也需要该类存在才能被存根.

为了使它具体化,我将如何测试Widget.create()在下面的代码中使用单个参数'name'调用一次?

正在测试的代码

// file: widget-manager.js

function WidgetManager() {
   this.widgets = []
}

WidgetManager.prototype.addWidget = function(name) {
    this.widgets.push(Widget.create(name));
}
Run Code Online (Sandbox Code Playgroud)

测试代码

// file: widget-manager-test.js

var WidgetManager = require('../lib/widget-manager.js')
var sinon = require('sinon');

describe('WidgetManager', function() {
  describe('#addWidget', function() {
    it('should call Widget.create with the correct name', function() {
      var widget_manager = new WidgetManager();
      // what goes here?
    });

    it('should push one widget onto the widgets list', function() { …
Run Code Online (Sandbox Code Playgroud)

javascript unit-testing node.js sinon

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

React Apollo:从Component状态动态更新GraphQL查询

我有一个组件,使用react-apollo装饰器语法显示GraphQL查询的结果.查询接受一个参数,我想根据组件状态动态设置该参数.

请考虑以下简化示例:

import * as React from ‘react’;
import { graphql } from ‘react-apollo’;
import gql from ‘graphql-tag’;

const myQuery = gql`
    query($active: boolean!) {
        items(active: $active) {

        }
    }
`;

@graphql(myQuery)
class MyQueryResultComponent extends React.Component {
    public render() {
        return <div>
            <input type=“checkbox” /* other attributes and bindings */ />
            {this.props.data.items}
        <div>;
    }
}
Run Code Online (Sandbox Code Playgroud)

单击复选框时,我想重新提交查询,根据复选框的状态动态设置active属性myQuery.为简洁起见,我省略了复选框的处理程序和绑定,但是如何在状态更改时重新提交查询?

javascript reactjs graphql react-apollo

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

升级到NodeJS 6后密钥长度无效

以下用于加密和解密对我们的支付网关服务的请求的代码可以与Node Js 5.7.0一起正常工作

function Encrypt(plainText, workingKey) {
    var m = crypto.createHash('md5');
    m.update(workingKey);
    var key = m.digest('binary');
    var iv = '\x00\x01\x02\x03\x04\x05\x06\x07\x08\x09\x0a\x0b\x0c\x0d\x0e\x0f';    
    var cipher = crypto.createCipheriv('aes-128-cbc', key, iv);    
    var encoded = cipher.update(plainText, 'utf8', 'hex');
    encoded += cipher.final('hex');
    return encoded;
};


function Decrypt(encText, workingKey) {
    var m = crypto.createHash('md5');
    m.update(workingKey)
    var key = m.digest('binary');
    var iv = '\x00\x01\x02\x03\x04\x05\x06\x07\x08\x09\x0a\x0b\x0c\x0d\x0e\x0f';
    var decipher = crypto.createDecipheriv('aes-128-cbc', key, iv);
    var decoded = decipher.update(encText, 'hex', 'utf8');
    decoded += decipher.final('utf8');
    return decoded;
};
Run Code Online (Sandbox Code Playgroud)

但是在升级到NodeJS 6.0(也尝试过6.1)后,我们收到以下错误.

Debug: internal, implementation, error
Error: …
Run Code Online (Sandbox Code Playgroud)

encryption cryptography node.js

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

在 Ubuntu 中配置 vs-code 来调试电子

我是 nodejs 的新手,并尝试使用电子制作桌面应用程序。我尝试在 Ubuntu 中的 vs-code 中调试来自https://github.com/szwacz/electron-boilerplate的样板代码

这是我的launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Electron",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/app/app.js",
            "stopOnEntry": false,
            "args": [],
            "cwd": "${workspaceRoot}",
            "preLaunchTask": null,
            "runtimeExecutable": "${workspaceRoot}/node_modules/electron-prebuilt/dist/electron",
            "runtimeArgs": [
                ".",
                "--enable-logging"
            ],
            "env": {
                "NODE_ENV": "development"
            },
            "console": "internalConsole",
            "sourceMaps": false,
            "outDir": null
        },
        {
            "name": "Attach",
            "type": "node",
            "request": "attach",
            "port": 5858,
            "address": "localhost",
            "restart": false,
            "sourceMaps": false,
            "outDir": null,
            "localRoot": "${workspaceRoot}",
            "remoteRoot": null
        },
        {
            "name": "Attach to …
Run Code Online (Sandbox Code Playgroud)

debugging node.js electron visual-studio-code

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

Kubernetes Cronjob:在集群恢复后重置错过的启动时间

我有一个集群,其中包含一个计划每 5 分钟运行一次的 Cronjob。

我们最近遇到了一个导致停机并需要手动恢复集群的问题。虽然现在恢复正常,但这个特定的 cronjob 无法运行,并出现以下错误:

Cannot determine if job needs to be started: Too many missed start time (> 100). Set or decrease .spec.startingDeadlineSeconds or check clock skew.
Run Code Online (Sandbox Code Playgroud)

我知道 Cronjob 在集群关闭时“错过”了一些预定的作业,并且这已经超过了一个阈值,在这个阈值下不会再安排更多的作业。

如何重置错过的开始时间数量并重新安排这些作业(不安排所有错过的作业突然运行?)

cron kubernetes kubernetes-cronjob k8s-cronjobber

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

每天在给定时间触发 lambda 函数

我有一个 lambda 函数设置并通过手动触发器进行测试。我希望这个函数每天中午运行一次。

为了实现这一目标,我创建了一个新的CloudWatch Events - Schedule触发器,其 Schedule 表达式为cron(0 12 ? * * *)

启用函数和触发器后,不会调用该函数。正确的 Schedule 表达式应该是什么?

cron amazon-web-services cronexpression aws-lambda

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

获取格式化的通用日期/时间

在PowerShell中,您可以格式化日期以返回当前小时,如下所示:

Get-Date -UFormat %H
Run Code Online (Sandbox Code Playgroud)

你可以像这样得到UTC的日期字符串:

$dateNow = Get-Date
$dateNow.ToUniversalTime()
Run Code Online (Sandbox Code Playgroud)

但是,如何才能在世界时间内获得当前时间?

powershell datetime utc

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