来自 npm 包的扩展语法的 webpack js 编译器问题答案

【问题标题】：webpack js compiler issues with spread syntax from npm package来自 npm 包的扩展语法的 webpack js 编译器问题
【发布时间】：2019-03-09 17:32:51
【问题描述】：

我有以下课程：

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';

我得到一个扩展语法的编译错误：

./~/@jsrepo/analyticsservice/AnalyticsService.js 中的错误
模块解析失败：C:\Web\SiteFiles\src\node_modules\@jsrepo\analyticsservice\AnalyticsService.js 意外令牌 (30:6)
您可能需要适当的加载程序来处理此文件类型。
|
|常量数据 = {
| ...选项，
|推荐人：options.referrer || document.referrer,
|网址：options.url ||位置.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 config 中 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;

为了在不使用...的情况下为数据分配任何选项

【问题讨论】：

标签： javascript npm webpack babeljs spread-syntax

【解决方案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 加载器正常工作，那么我不会接受这个答案，会接受他们的，因为最好使用速记

【讨论】：