如何要求在 ES6 模块中导出的常量？

Posted 2023-03-07

【中文标题】如何要求在 ES6 模块中导出的常量？

【英文标题】：how to require constants which is exported in ES6 module?

【发布时间】：2020-11-13 12:35:48

【问题描述】：

原始变量在 ES6 模块中导出如下：

export const url = 'https://example.com/api'

我知道我可以使用这个变量 import url from 'src/api'

但问题是我不能在gatsby-config.js 文件中使用import，只能使用ES5 语法。

我试过这样：

const url = require('src/api')

但在 gatsby develop 时它不起作用并出现错误

错误如下：

export const url = 'https://example.com/api'
  ^^^^^^
  SyntaxError: Unexpected token 'export'

  - v8-compile-cache.js:226 NativeCompileCache._moduleCompile
    [project]/[v8-compile-cache]/v8-compile-cache.js:226:18

  - v8-compile-cache.js:172 Module._compile
    [project]/[v8-compile-cache]/v8-compile-cache.js:172:36

  - loader.js:995 Object.Module._extensions..js
    internal/modules/cjs/loader.js:995:10

  - loader.js:815 Module.load
    internal/modules/cjs/loader.js:815:32

  - loader.js:727 Function.Module._load
    internal/modules/cjs/loader.js:727:14

  - loader.js:852 Module.require
    internal/modules/cjs/loader.js:852:19

  - v8-compile-cache.js:159 require
    [project]/[v8-compile-cache]/v8-compile-cache.js:159:20

  - gatsby-config.js:4 Object.<anonymous>
    C:/project/gatsby-config.js:4:26

  - v8-compile-cache.js:178 Module._compile
    [project]/[v8-compile-cache]/v8-compile-cache.js:178:30

  - loader.js:995 Object.Module._extensions..js
    internal/modules/cjs/loader.js:995:10

  - loader.js:815 Module.load
    internal/modules/cjs/loader.js:815:32

  - loader.js:727 Function.Module._load
    internal/modules/cjs/loader.js:727:14

  - loader.js:852 Module.require
    internal/modules/cjs/loader.js:852:19

  - v8-compile-cache.js:159 require
    [project]/[v8-compile-cache]/v8-compile-cache.js:159:20

  - get-config-file.js:33 getConfigFile
    [project]/[gatsby]/dist/bootstrap/get-config-file.js:33:20

【问题讨论】：

改用module.exports？

在加载之前使用babel-register之类的东西 - 如果它必须是在 CommonJS 模块中导入的 ES6 模块，那是你唯一的选择？

【参考方案1】：

当您使用module.exports 导出常量时，它不应出现此错误。这样做：

const yourUrl = 'https://example.com/api'

module.exports =  url: yourUrl 

【参考方案2】：

希望您知道您要达到的目标，因为结果会产生违反 gatsbyjs 规范的反模式，因为它已经在读取和验证 gatsby-config.js 后在内部将代码从 es6 转换为 es5。

所以，尝试这种方式来要求 gatsby-config.js 中的常量，这些常量是在 es6 模块中导出的

从es6到es5的转换，安装@babel/cli和@babel/core包即npm install @babel/cli @babel/core --save-dev 在 package.json 中添加新的 npm/yarn 脚本 -> 脚本 -> "prepare_config" : "NODE_ENV=test babel ./gatsby-config.js <LIST_OF_FILES_TO_CONVERT> --out-dir ./" 确保babel-preset-gatsby 目录存在于node_modules 下，如果不存在则安装它，即npm install babel-preset-gatsby --save-dev 在项目根目录中添加.babelrc，具有以下代码用于babel预设和转换。

    "presets": [
        [
            "babel-preset-gatsby",
            
                "forceAllTransforms": true,
                "useBuiltIns": "usage"
            
        ]
    ]

或者如果你不想添加 .babelrc 然后在 package.json 中指定 babel 配置。

"babel": 
  "presets": [
    [
      "babel-preset-gatsby",
      
        "forceAllTransforms": true,
        "useBuiltIns": "usage"
      
    ]
  ]

现在首先运行npm run prepare_config 脚本进行转换，它将导入在 ES6 模块中导出的所需常量。

那么你就可以成功运行gatsby develop了。

【参考方案3】：

更改type:"module"或设置package.json。

  "name": "server",
  "version": "1.0.0",
  "type": "module",
  "description": "",
  "main": "server.js",
  "scripts": 
    "test": "echo "Error: notestspecified" && exit 1",
    "start": "nodemon server.js"
  ,
  "keywords": [
    
  ],
  "author": "",
  "license": "ISC",
  "dependencies": 
    "@babel/core": "^7.16.5",
    "body-parser": "^1.19.1",
    "cors": "^2.8.5",
    "dotenv": "^10.0.0",
    "express": "^4.17.2",
    "mongoose": "^6.1.3",
    "nodemon": "^2.0.15"
  

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

导出模块类型的 const 所以更改包 json 类型：模块