Question

我有webpack.config.js个文件：

'use strict';

var webpack = require('webpack')

var env = process.env.NODE_ENV

var API_URL_1 = {
    production: JSON.stringify('http://xyz:8000/api/v1/var'),
    development: JSON.stringify('http://192.168.99.102/api/v1/var')
};

var API_URL_2 = {
    production: JSON.stringify('http://xyz:8000/api/v1/ui'),
    development: JSON.stringify('http://192.168.99.102/api/v1/ui"')
};

var API_URL_3 = {
    production: JSON.stringify('http://xyz:8000/api/v1/data'),
    development: JSON.stringify('http://192.168.99.102/api/v1/data')
};

var API_URL_4 = {
    production: JSON.stringify('http://xyz:8000/api/v1/calculated'),
    development: JSON.stringify('http://192.168.99.102/api/v1/calculated')
};

var config = {
  module: {
    loaders: [
      { test: /\.js$/, loaders: ['babel-loader'], exclude: /node_modules/ },
      { test: /\.scss$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap']}
    ]
  },
  output: {
    library: 'Redux',
    libraryTarget: 'umd'
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(env),
      'API_URL_1': API_URL_1[env],
      'API_URL_2': API_URL_2[env],
      'API_URL_3': API_URL_3[env],
      'API_URL_4': API_URL_4[env]
    })
  ]
};


module.exports = config

我希望动态访问API_URL_1，API_URL_2，API_URL_3和API_URL_4，具体取决于我在{{1}中运行ReactDOM.render函数的环境看起来像这样：

app.js

但是当我运行ReactDOM.render( <ParameterForm url_schema={ajax(API_URL_1)} url_uischema={ajax(API_URL_2)} url_data={ajax(API_URL_3)} url_submit={ajax(API_URL_4)}/>, document.getElementById('form') );时，我一直收到这个错误，即

编译失败。

./src/containers/App.js
出错
/home/node/src/containers/App.js    120:30错误'ajax'未定义no-undef   120：35错误'API_URL_1'未定义no-undef    120：61错误'ajax'未定义no-undef    120：66错误'API_URL_2'未定义no-undef   120：88错误'ajax'未定义no-undef    120：93错误'API_URL_3'未定义no-undef    120：117错误'ajax'未定义no-undef    120：122错误'API_URL_4'未定义no-undef

✖8个问题（8个错误，0个警告）

由于webpack.config.js是我app.js中访问的文件，为什么会出现此错误？有没有解决方案来避免这个错误？

Answer 1

由于webpack.config.js是在我的app.js中访问的文件，为什么会弹出这个错误？

带有React组件的文件不应该直接访问webpack.config.js - 它在编译时使用，当所有字符串实体将被原样替换为不变量时，因此需要一个额外的引用级别。
还要记住，默认情况下，替换不适用于依赖node_modules，因为它们不是预处理的，而是从dist目录中获取的。

关于ajax功能 - 检查您已链接相应库的聊天，该库提供该功能。您可以通过extrernals function-like resolver在运行时提供自定义导入。

通过webpack加载不同环境的URL常量

1 个答案: