如何使用JavaScript网页将常量从配置文件导入到另一个文件

我刚刚开始使用JS、Webpack和React。我创建了一个简单的React应用程序，它调用API并在页面上显示一些数据作为调用的结果。对于硬编码的api键，这一切都可以正常工作，但我希望在配置文件中保持api键为常量，git会忽略它

我创建了一个config.js文件，其中包含以下内容：

export const API_KEY = 'myApiKey';

现在，我想将这个常量导入另一个负责进行API调用的文件index.js中。我使用以下代码进行导入：

import * as config from '../config.js';

通过这样做，我想我可以通过以下方式访问api密钥：

但是，在构建应用程序时，我遇到以下错误：

ERROR in ./src/api/index.js
Module not found: Error: Can't resolve '../config.js' in 
'/Users/ana/code/fundraiser-leaderboard/src/api'
 @ ./src/api/index.js 13:14-37
 @ ./src/components/Fundraisers.js
 @ ./src/components/App.js
 @ ./src/index.js
Child html-webpack-plugin for "index.html":
       [0] (webpack)/buildin/amd-options.js 82 bytes {0} [built]
       [1] ./~/lodash/lodash.js 478 kB {0} [built]
       [2] (webpack)/buildin/global.js 823 bytes {0} [built]
       [3] (webpack)/buildin/module.js 521 bytes {0} [built]
       [4] ./~/html-webpack-plugin/lib/loader.js!./src/index.html 663 bytes 
   {0} [built]

我的项目文件结构如下所示：

project
-src
--api
---index.js
-config.js
-webpack.config.js

我曾尝试将config.js与index.js放在同一个文件夹中，但也没有成功。我已经搜索了很多，试图找出这个问题，也许这是一个相当基本的问题，但我还没有找到解决办法。我非常感谢您的指导。非常感谢。

---

Ana

在文件

src/api/index.js

中，您尝试导入

./config.js

和

。/

意味着它应该位于当前文件的父目录中，因此它会查找文件

src/config.js

，但该文件不存在。你需要再上一个目录

您的输入应为：

import * as config from '../../config.js';

如果要从当前目录导入文件，请使用

/

，如下所示：

import * as config from './config.js';

---

您还可以为文件或目录定义别名，因此不需要定义完整路径和扩展名。在

webpack.config.js

中：

resolve: {
  modules: [
    path.resolve(__dirname, ""),
    "node_modules"
  ],

  extensions: [ "", ".js", ".jsx" ]
},

因此，为了从任何地方访问您的config.js文件-

---

import*as config from“config”

非常感谢你，Michal，你的解决方案很到位，我明白我在那里做错了什么。谢谢

resolve: {
  modules: [
    path.resolve(__dirname, ""),
    "node_modules"
  ],

  extensions: [ "", ".js", ".jsx" ]
},