在 ECMAScript 6 模块中导入的非 ECMAScript 6 模块答案

【问题标题】：Non ECMAScript 6 module to import in a ECMAScript 6 module在 ECMAScript 6 模块中导入的非 ECMAScript 6 模块
【发布时间】：2016-11-15 09:55:59
【问题描述】：

我在旧版应用中有一个 javascript 模块。

var auth = function ($) {
  this.getAccessToken = function () {
    $.get("Secured/Token")
    .done(function (data) {
        return data;
    })
    .fail(function (e) {
        // assumes the user's session has expired
        if (e.status = 401) location.reload();
    })
  }
};

然后，在我的新应用中使用中继/反应。

import Relay from 'react-relay';
import auth from './auth.js'

export function injectGraphQLServer() {
  var token = auth.getAccessToken();
  Relay.injectNetworkLayer(
    new Relay.DefaultNetworkLayer('http://localhost:3000/graphql', {
      credentials: 'omit',
      headers: {
          Authorization: 'Bearer '
      },
    })
  );
 };

但 auth 变量未定义。我该怎么做？这是允许的吗？

【问题讨论】：

您可能忘记导出授权功能。
@MRCODER，详细说明@Anson 的评论，你有没有像export default auth; 那样在auth.js 中导出auth？
@elektronik 我没有，因为我的旧版应用程序已经使用了该模块。我不想修改它。我们只是在部分代码中加入了 es6。
@MRCODER，如果你使用 webpack，你可以使用exports-loaderconst auth = require('exports?auth!./auth.js');。如果您不使用 webpack 或希望保持规范兼容，则可以通过全局变量或全局命名空间中的某些属性来实现。
SystemJS 和 Webpack 都有“导出”全局变量的解决方案。

标签： reactjs ecmascript-6 relay

【解决方案1】：

所以，使用exports-loader，现在应该可以工作了。

import Relay from 'react-relay';
var auth = require('exports?auth!./auth.js');

export function injectGraphQLServer() {
  var token = auth.getAccessToken();
  Relay.injectNetworkLayer(
    new Relay.DefaultNetworkLayer('http://localhost:3000/graphql', {
      credentials: 'omit',
      headers: {
          Authorization: 'Bearer ' + auth().getAccessToken();
      },
    })
  );
 };

【讨论】：