无法在React组件中导入ES6模块

Question

我有一个名为config.js的配置文件，如下所示：

var config = {};
config.web = {};
config.web.param = 'oneParam';

module.exports = config;

我也使用Webpack为我的模块提供别名，所以我在webpack.config.js中有这一行：

alias: {
  configFile: 'app/config.js'
}

然后我尝试使用以下命令导入我的配置文件：

import config from 'configFile';

在React组件中。 但是，当我尝试访问config变量时，我得到的是一个未定义的错误。

我的webpack.config.js

var webpack = require('webpack');

module.exports = {
  entry: [
    './app/app.jsx'
  ],
  output: {
      path: __dirname,
      filename: './dist/bundle.js'
  },
  externals: {
    'Config': JSON.stringify()
  },
  resolve: {
    root: __dirname,
    alias: {
      configFile: 'app/config.js'
    },
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0']
        },
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/
      },
      {test: /\.scss?$/, exclude: /node_modules/, loader: "style-loader!css-loader!sass-loader!"},
      {test: /\.css?$/, loader: "style-loader!css-loader!"},
      {test: /\.(png|jpg)$/, loader: "file-loader?name=./dist/images/[name].[ext]"}
    ]
  },
  devtool: 'cheap-module-source-map'
};

我在这里做错了什么？

Answer 1

尝试

 import * as config from 'configFile';

尝试使用console.log配置变量，看看你是否未定义。如果仍未定义，则问题在于导出configFile。

Answer 2

您的路径'app/config.js'最有可能指向node_modules/app/config.js。

最简单的解决方案是将别名中的路径更改为绝对路径（或者在您的方案中更合适）：<​​/ p>

alias: {
  configFile: '/app/config.js'
}

Answer 3

您应该定义root的相对路径：

alias: {
  configFile: './app/config.js'
}

或相对于contentBase