Question

我刚开始使用JS，Webpack，React。我创建了一个简单的React应用程序，它调用API并在该调用的结果中显示页面上的一些数据。这一切都适用于 api key 硬编码，但我想将 api key 保留为配置文件中的常量，git会忽略它。

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

export const API_KEY = 'myApiKey';

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

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

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

config.API_KEY

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

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 相同的文件夹中，但这也不起作用。我已经搜索了很多，试图弄清楚这一点，也许这是一个非常基本的问题，但我还没有找到解决方案。我真的很感激任何指导。谢谢！安娜

Answer 1

在文件src/api/index.js中，您尝试导入../config.js，../表示它应该位于当前文件的父目录中，因此它会查找文件src/config.js ，但那不存在。你需要再增加一个目录。

您的导入应该是：

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

如果要从当前目录导入文件，可以使用./，如下所示：

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

Answer 2

您还可以为文件或目录定义别名 - 因此您无需定义完整路径和扩展名。在webpack.config.js：

中

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

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

所以为了从任何地方访问你的config.js -

import * as config from "config"

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

2 个答案: