代码之家 › 专栏 › 技术社区 › Pete Irfan TahirKheli

webpack js编译器与npm包中的扩展语法有关

spread-syntax babeljs webpack npm javascript

Pete Irfan TahirKheli · 技术社区 · 6 年前

我有以下课程:

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"

    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
      }
    },

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

为了不使用 ...

1 回复 | 直到 6 年前

Pete Irfan TahirKheli 6 年前

我知道了

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加载程序正常工作,那么我不会接受这个答案,也会接受他们的答案,因为最好使用速记