我刚开始使用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 相同的文件夹中,但这也不起作用。我已经搜索了很多,试图弄清楚这一点,也许这是一个非常基本的问题,但我还没有找到解决方案。我真的很感激任何指导。谢谢! 安娜
答案 0 :(得分:0)
在文件src/api/index.js
中,您尝试导入../config.js
,../
表示它应该位于当前文件的父目录中,因此它会查找文件src/config.js
,但那不存在。你需要再增加一个目录。
您的导入应该是:
import * as config from '../../config.js';
如果要从当前目录导入文件,可以使用./
,如下所示:
import * as config from './config.js';
答案 1 :(得分:0)
您还可以为文件或目录定义别名 - 因此您无需定义完整路径和扩展名。在webpack.config.js
:
resolve: {
modules: [
path.resolve(__dirname, ""),
"node_modules"
],
extensions: [ "", ".js", ".jsx" ]
},
所以为了从任何地方访问你的config.js -
import * as config from "config"