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

时间:2017-04-30 22:27:25

标签: javascript webpack

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

2 个答案:

答案 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"