Проблемы с компилятором js в webpack с синтаксисом распространения из пакета npm - PullRequest
Новая
       36

Проблемы с компилятором js в webpack с синтаксисом распространения из пакета npm

0 голосов
/ 04 октября 2018

У меня есть следующий класс: 

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

, будет компилироваться и работать хорошо.Однако мы пытаемся повторно использовать наши js, экспортируя их в npm, чтобы мы могли 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, а такжедобавил его в настройки загрузчика babel в конфигурации webpack: 

    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;

, чтобыприсваивать любые параметры данным без использования ...

1 Ответ

0 голосов
/ 04 октября 2018

Понял, что 

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

Назывался деконструкцией объекта.После этого я смог определить, что было в опциях, поэтому просто добавил их в data отдельно, чтобы избавиться от ...: 

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 будет работать правильно, тогда я не приму этот ответ и приму их, так как было бы лучше использовать стенографию

...