webpack js 编译器问题与来自 npm 包的传播语法

Question

我有以下 class:

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 loader的选项中：

    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 加载器正常工作，那么我不会接受这个答案，而是会接受他们的答案，因为使用 shorthand

会更好

webpack js 编译器问题与来自 npm 包的传播语法

webpack js compiler issues with spread syntax from npm package

javascript

npm

webpack

babeljs

spread-syntax