将代码从 ES5 转换为 ES6 并导出未按预期工作

Posted

技术标签:

【中文标题】将代码从 ES5 转换为 ES6 并导出未按预期工作【英文标题】:Converting code from ES5 to ES6 and export is not working as expected 【发布时间】:2018-11-09 10:45:07 【问题描述】:

尝试将一些 GraphQL 代码从 ES5 转换为 ES6 时出现以下错误:

_graphql2.default is not a constructor

这是新的 ES6 代码:

import GraphQLList from 'graphql'
import ConfigModel from '../../models/config'
import  configType as ConfigType  from '../types/config'

// Query
export default queryType = 
  type: new GraphQLList(ConfigType),
  description: "The configuration for the home 'page'",
  resolve: function () 
    const config = ConfigModel.find()
    if (!config) 
      throw new Error('Error')
    
    return config
  

ES5 代码如下所示:

var GraphQLList = require('graphql').GraphQLList;
var ConfigModel = require('../../models/config');
var ConfigType = require('../types/config').configType;

// Query
exports.queryType = 
  type: new GraphQLList(ConfigType),
  description: 'The configuration for the home \'page\'',
  resolve: function () 
    const config = ConfigModel.find()
    if (!config) 
      throw new Error('Error')
    
    return config
  

我猜转译器希望这段代码是一个类,但它应该只是一个对象文字,我做错了什么?

【问题讨论】:

试试import GraphQLList from 'graphql'graphql 不是构造函数,而且从来不是;你曾经实例化require('graphql').GraphQLList 是的,做到了。我能问一下为什么会这样吗?如果我想解构或重命名我的导入,我认为我只需要大括号?为什么一件物品需要它? 或者,您可以(并且应该)使用:import graphql from 'graphql';new graphql.GraphQLList(...),这正是您之前所做的。 【参考方案1】:

你基本上转换了这个 ES5 行:

var GraphQLList = require('graphql').GraphQLList;

到这里:

import GraphQLList from 'graphql'

您应该可以在此处看到错误。

在 ES6 代码中,GraphQLList 将是一个对象包含来自该模块的所有导出,其中包括一个名为 GraphQLList 的对象。

所以你可以从这里更改你的 ES6 代码:

new GraphQLList(ConfigType)

到这里:

new GraphQLList.GraphQLList(ConfigType)

或者,正如评论员所提到的,就这样做:

import  GraphQLList  from 'graphql'

【讨论】:

谢谢。我不知道命名导入,我认为import ex1, ex2, ex3 from 'blah' 语法仅用于重命名和解构,我一定跳过了文档中的那部分:) 您应该修复 new GraphQLList.GraphQLList(ConfigType),将其替换为 new graphql.GraphQLList(ConfigType) 并说明适当的导入行。

以上是关于将代码从 ES5 转换为 ES6 并导出未按预期工作的主要内容,如果未能解决你的问题,请参考以下文章

如何将 Relay 查询从 TypeScript 转换为 ES5?

ES6 模块

Webpack 没有将 ES6 转换为 ES5

带有一个 goto 标签的 C 代码未按预期工作

#yyds干货盘点#ES6转换成ES5

Vue CLI 3 不会将供应商转换为 ES5