小编Cas*_*aJS的帖子

Webpack输出错误的图像路径

我正在使用react和webpack构建一个站点.当我使用webpack构建应用程序并尝试包含图像时,图像将与其他资源一起写入构建文件夹,但是webpack输出的图像链接不正确.我可以进入构建文件夹并查看图像,因此正确复制它是错误的链接.

我的react组件看起来像这样:

'use strict';

var React = require('react');
var newsFeedIcon = require('../../img/news-feed-icon.png');

//create story component
module.exports = React.createClass({
  render: function () {
    return (
        <div className="col_12 footer-right mobile-foot">
        <img src={newsFeedIcon} />
        <p><a href="/about">About Us</a> | <a href="/contact">Contact Us</a> | <a href="/faq">FAQ</a> | <a href="/media">Media</a> | <a href="#">Privacy Statement</a> | <a href="#">Terms of Service</a></p>
      </div>
      );
  }
})

Run Code Online (Sandbox Code Playgroud)

我的Webpack配置如下所示:

    webpack: {
      client: {
        entry: __dirname + '/app/js/client.jsx',
        output: {
          path: 'build/',
          file: 'bundle.js'
        },
        module: {
          loaders: [
          {
            test: /\.jsx$/, …

Run Code Online (Sandbox Code Playgroud)

javascript image reactjs webpack

Cas*_*aJS

lucky-day

21
推荐指数

1
解决办法

2万
查看次数

无法使用sequelize连接到SQL Azure数据库,但localhost上的SQL Server工作正常

我已经使用MongoDB为Heroku部署了一些站点,但这是我第一次使用SQL创建一个站点并尝试部署到Azure,所以我可能会遗漏一些明显的东西.

我一直在使用Node.js,一个SQL Server数据库和Sequelize作为ORM在我的开发机器上开发一个网站.一切正常,但当我尝试使用连接字符串部署到Azure时,我无法连接SQL Azure数据库.我可以使用SQL Server Management Studio连接Azure上的空数据库,所以我确定我的连接信息是正确的.

当我尝试部署到Azure时,我尝试使用Azure提供的连接字符串:

var Sql = require('sequelize');
var sql = new Sql('Driver={SQL Server Native Client 11.0};Server=tcp:server.database.windows.net,1433;Database=databasename;Uid=UserName@server;Pwd={password};Encrypt=yes;TrustServerCertificate=no;Connection Timeout=30;');

Run Code Online (Sandbox Code Playgroud)

当我尝试连接此字符串时,我得到的错误是:

C:\Users\username\Documents\GitHub\event-site\node_modules\sequelize\lib\sequelize.js:110
    options.dialect = urlParts.protocol.replace(/:$/, '');
                                       ^

TypeError: Cannot read property 'replace' of null
    at new Sequelize (C:\Users\v-mibowe\Documents\GitHub\event-site\node_modules\sequelize\lib\sequelize.js:110:40)
    at Object.<anonymous> (C:\Users\v-mibowe\Documents\GitHub\event-site\routes\db-routes.js:68:11)
    at Module._compile (module.js:435:26)
    at Object.Module._extensions..js (module.js:442:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.<anonymous> (C:\Users\v-mibowe\Documents\GitHub\event-site\server.js:16:1)
    at Module._compile (module.js:435:26)
    at Object.Module._extensions..js (module.js:442:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Function.Module.runMain (module.js:467:10)
    at …

Run Code Online (Sandbox Code Playgroud)

sql-server azure node.js sequelize.js azure-sql-database

Cas*_*aJS

2015 12-24

8
推荐指数

1
解决办法

3054
查看次数

Jasmine测试通过了Chrome和Firefox,但是没有使用PhantomJS

我正在用React构建一个基本的博客应用程序.我正在使用Jasmine和Karma来进行我的前端测试.我开始运行第一个测试并通过Chrome(Chromium)和Firefox,但是当它在PhantomJS中运行时,我收到以下错误:

PhantomJS 1.9.8 (Linux 0.0.0) ERROR
  TypeError: 'undefined' is not a function (evaluating 'ReactElementValidator.createElement.bind(
          null,
          type
        )')
  at /home/michael/repository/short-stories/test/karma_tests/story_test.js:1742

Run Code Online (Sandbox Code Playgroud)

我的测试文件如下所示:

var React = require('react/addons');
var Story = require('../../app/js/components/story.jsx');
var TestUtils = React.addons.TestUtils;
var testUtilsAdditions = require('react-testutils-additions');

  describe('Story component', function () {
    var component;

    beforeEach(function () {
      component = TestUtils.renderIntoDocument(React.createElement('story'));
      component.props.storyTitle = 'front end test title';
      component.props.author = 'front end author';
      component.props.storyText = 'front end story text';
    });

    it('should display a story', function () {
      expect(component.props).toBeDefined();
      expect(component.props.storyTitle).toBeDefined();
      expect(component.props.storyTitle).toBe('front end test title'); …

Run Code Online (Sandbox Code Playgroud)

javascript unit-testing jasmine karma-jasmine

Cas*_*aJS

lucky-day

6
推荐指数

1
解决办法

2128
查看次数

Karma/Jasmine测试失败并显示错误:'未捕获错误:模块名称"simple_test.js"尚未加载上下文:_.使用require([])'

我正在使用Karma和Jasmine对我使用React构建的项目进行测试.当我尝试运行我的Karma测试时,我在控制台中收到此错误:

Running "karma:test" (karma) task
WARN `start` method is deprecated since 0.13. It will be removed in 0.14. Please use 
  server = new Server(config, [done])
  server.start()
instead.
07 09 2015 14:46:56.552:WARN [plugin]: Error during loading "karma-opera-launcher" plugin:
  ENOENT, no such file or directory './config/prefs.ini'
Hash: 8344a6c0a9b3c44a5636
Version: webpack 1.12.1
Time: 6ms
webpack: bundle is now VALID.
07 09 2015 14:46:56.685:INFO [karma]: Karma v0.13.9 server started at http://localhost:9876/
07 09 2015 14:46:56.689:INFO [launcher]: Starting browser Chrome
07 09 2015 14:46:56.700:INFO [launcher]: …

Run Code Online (Sandbox Code Playgroud)

require requirejs jasmine reactjs karma-jasmine

Cas*_*aJS

lucky-day

5
推荐指数

1
解决办法

942
查看次数

我正在尝试以高对比度模式访问我的网站。为了检测何时启用高对比度模式，我创建了一个JavaScript方法来检测是否禁用了背景图像，因为高对比度模式会禁用背景图像。然后，如果浏览器处于高对比度模式，我将附加一个CSS文件来修复高对比度显示的问题。这在Firefox，Edge和IE中可以正常工作，但是Chrome使用其自己的扩展名来创建高对比度，并且它不会禁用背景图像，因此在Chrome中不附加用于高对比度的CSS。

通过搜索，我发现Chrome在网站上添加了过滤器，而不是启用/禁用/更改网站颜色或图像本身。我进行了搜索，但找不到任何可测试的内容以检查Chrome是否使用高对比度模式。如果有一种方法可以检测到正在使用的扩展名，那也可以解决问题，但是我也没有找到一种方法来做到这一点。

我的代码实际上运行良好，我所需要的只是能够检测Chrome中的高对比度模式。这是我用来检查高对比度模式的方法。

let highContrast = (options) => {

  let hcDetect = jQuery(`<div id="jQHighContrastDetect"></div>`).css('background', 'url(../uploads/c-wht-small.png)');
  hcDetect.appendTo(document.body);

  if (hcDetect.css('background-image') === 'none') {
    $('head').append('<link rel="stylesheet" href="../css/highcontrast.min.css" type="text/css" media="all">');

  }
}

Run Code Online (Sandbox Code Playgroud)

javascript css accessibility google-chrome high-contrast

Cas*_*aJS

2019 08-21

5
推荐指数

1
解决办法

2510
查看次数

grunt-babel挂起并且不会返回错误消息

我试图用grunt-babel将我的es6编译成es5.当我进入grunt babel命令行时,它会挂起并且永远不会运行babel.它不会返回错误或崩溃它只是挂起.我在Gruntfile.js中有其他任务,它们运行得很好,因此Gruntfile.js的结构是正确的.

这是我的Gruntfile:

'use strict';

module.exports = function(grunt) {
  require('load-grunt-tasks')(grunt);

  // initialize Grunt
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    'babel': {
      options: {
        sourceMap: true,
        presets: ['babel-preset-es2015']
      },
      dist: {
        files: {
          'js/survey.js': 'build/survey.js'
        }
      }
    },
    // create jshint task
    jshint: {
      dev: {
        // tell jshint what check
        src: ['Gruntfile.js', 'server.js', 'js/**/*.js', 'models/**/*.js', 'routes/**/*.js', '!build/**', '!tests/client/bundle.js', '!tests/karma_tests/bundle.js', '!js/imageMapResizer.min.js', '!js/kickstart.js', '!js/form-validator.js', '!js/imageMapResizer.js', '!js/jquery-ui.min.js', '!js/jquery.base64.js', '!js/kickstart.js'],
        options: {
          node: true,
          globals: {
            describe: true,
            it: true,
            before: true,
            after: true,
            beforeEach: …

Run Code Online (Sandbox Code Playgroud)

javascript gruntjs ecmascript-6 babeljs grunt-babel

Cas*_*aJS

lucky-day

1
推荐指数

1
解决办法

567
查看次数