Question

我有以下课程：

class AnalyticsService {
  /** Log an analytics event. */
  log(options) {
    return Promise.all(this.logGoogleAnalytics(options), this.logKenticoAnalytics(options));
  }

  /** Log an analytics event to GA. */
  logGoogleAnalytics(options) {
    if (!options || !window.ga) {
      console.warn('Analytics: Failed to log event:', options);
      return Promise.reject(false);
    }
    const { category, action, label, value } = options;
    ga('send', 'event', category, action, label, value);
    return Promise.resolve(true);
  }

  /** Log an analytics event to Kentico. */
  logKenticoAnalytics(options) {
    if (!options || !window.ga) {
      console.warn('Analytics: Failed to log activity:', options);
      return Promise.reject(false);
    }

    const data = {
      ...options,
      referrer: options.referrer || document.referrer,
      url: options.url || location.href,
    };

    return postJSON(`${URL_VIRTUAL_PATH}/activities`, data).then(
      response => {
        if (!response.ok) {
          console.warn('Analytics: Failed to log activity:', response, options);
          return Promise.reject(false);
        }
        return response.json();
      },
      error => {
        console.warn('Analytics: Failed to log activity:', error, options);
        return Promise.reject(false);
      },
    );
  }
}

如果我将另一个js文件包含在其中

import AnalyticsService from './AnalyticsService';

将编译并运行良好。但是，我们正在尝试通过将其导出到npm来使js不再使用，以便将npm导入不同的项目中。

一切正常，但现在如果我使用

import AnalyticsService from '@jsrepo/analyticsservice/AnalyticsService';

我得到了传播语法的编译错误：

ERROR in ./~/@jsrepo/analyticsservice/AnalyticsService.js
Module parse failed: C:\Web\SiteFiles\src\node_modules\@jsrepo\analyticsservice\AnalyticsService.js Unexpected token (30:6)
You may need an appropriate loader to handle this file type.
|
|     const data = {
|       ...options,
|       referrer: options.referrer || document.referrer,
|       url: options.url || location.href,
 @ ./js/components/init-analytics.js 7:24-79
 @ ./js/components/index.js
 @ ./js/main.js
 @ multi webpack/hot/dev-server webpack-hot-middleware/client?reload=true sass/main.scss js/main

我认为这可能是依赖性问题，所以我添加了

"babel-plugin-transform-object-rest-spread": "^6.23.0"

添加到npm软件包的依赖项，并将其添加到webpack配置中的babel加载器的选项中：

    use: {
      // Use the babel-loader to transpile the JS to browser-compatible syntax.
      loader: 'babel-loader',
      options: {
        plugins: [require('babel-plugin-transform-object-rest-spread')]
        // have also tried adding babel-plugin-transform-es2015-spread
      }
    },

但是我无法删除该错误。有谁知道在导入npm软件包时如何使传播语法起作用或如何对其进行编辑，因此我不需要它-主要是我不理解这一行：

const { category, action, label, value } = options;

以便不使用...

为数据分配任何选项

Answer 1

知道

const { category, action, label, value } = options;

被称为对象解构。由此，我能够确定选项中的内容，因此只需将它们分别添加到data var中即可摆脱...：

const data = {
  category: options.category,
  action: options.action,
  label: options.label,
  value: options.value,
  referrer: options.referrer || document.referrer,
  url: options.url || location.href,
};

如果任何人都可以回答如何使js加载程序正常工作，那么我将不接受此回答，而是接受他们的回答，因为使用速记会更好

从npm包传播语法的webpack js编译器问题

1 个答案: