object 字面量中的重复数据 属性 在严格模式 grunt-connect-proxy 中不允许

Question

我正在学习 Tutsplus 的教程，标题为 "Hands on Angularjs"，在教程中，讲师使用 grunt-connect-proxy 包将 ajax 请求重定向到 rails 服务器 运行 在 localhost:3000 上，但我认为该教程是旧的并且在那个特定版本 grunt-contrib-connect 包的 livereload 插件没有使用中间件功能，现在在当前版本上 livereload 使用中间件这导致我错误：

>> SyntaxError: /Applications/MAMP/htdocs/savage-worlds/Gruntfile.js:113
>>           middleware: function (connect) {
>>           ^^^^^^^^^^
>> Duplicate data property in object literal not allowed in strict mode

这是 grunt 文件任务

// The actual grunt server settings
connect: {
  options: {
    port: 9000,
    // Change this to '0.0.0.0' to access the server from outside.
    hostname: 'localhost',
    livereload: 35729
  },
  proxies: [
    {
      context: '/api',
      host: 'localhost',
      port: 3000
    }
  ],
  livereload: {
    options: {
        middleware: function (connect, options) {
          if (!Array.isArray(options.base)) {
              options.base = [options.base];
          }

          // Setup the proxy
          var middlewares = [require('grunt-connect-proxy/lib/utils').proxyRequest];

          // Serve static files.
          options.base.forEach(function(base) {
              middlewares.push(connect.static(base));
          });

          // Make directory browse-able.
          var directory = options.directory || options.base[options.base.length - 1];
          middlewares.push(connect.directory(directory));

          return middlewares;
      },
      open: true,
      middleware: function (connect) {
        return [
          connect.static('.tmp'),
          connect().use(
            '/bower_components',
            connect.static('./bower_components')
          ),
          connect().use(
            '/app/styles',
            connect.static('./app/styles')
          ),
          connect.static(appConfig.app)
        ];
      }
    }
  },
  test: {
    options: {
      port: 9001,
      middleware: function (connect) {
        return [
          connect.static('.tmp'),
          connect.static('test'),
          connect().use(
            '/bower_components',
            connect.static('./bower_components')
          ),
          connect.static(appConfig.app)
        ];
      }
    }
  },
  dist: {
    options: {
      open: true,
      base: '<%= yeoman.dist %>'
    }
  }
},

如有任何帮助，我们将不胜感激！

Answer 1

您遇到的错误是 jslint 错误。它说明了问题所在——您不能在对象文字中使用重复的数据属性。

在您的 gruntfile 中，您有一个任务在 livereload 选项中具有名为 middleware 的重复属性。因此，您需要在 属性.

中包含任何中间件代码

我对 livereload 不是很熟悉，但您应该能够将 livereload 的所有中间件代码放入一个方法中。看起来 middlewares.push(connect.static(base)); 完成了第二个重复中间件方法所做的一切。

livereload: {
    options: {
        middleware: function (connect, options) {
          if (!Array.isArray(options.base)) {
              options.base = [options.base];
          }

          // Setup the proxy
          var middlewares = [require('grunt-connect-proxy/lib/utils').proxyRequest];

          // Serve static files.
          options.base.forEach(function(base) {
              middlewares.push(connect.static(base));
          });

          // Make directory browse-able.
          var directory = options.directory || options.base[options.base.length - 1];
          middlewares.push(connect.directory(directory));

          return middlewares;
      },
    }
  }

如果您发现缺少某些静态资产，您可以将它们推送到 middlewares 数组：

middlewares.push((connect.static('./bower_components'))