代碼分裂〜的ReferenceError：系統沒有定義

Question

我的代碼打錯誤

ReferenceError: System is not defined 

在行

<IndexRoute getComponent={(nextState, cb) => System.import('./containers/Home').then(module => cb(null, module))} /> 

如何定義System。它與我的webpack設置有關嗎？在這裏，我怎麼把它

var path = require('path'); 
var webpack = require('webpack'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var stylus = require('stylus'); 

module.exports = { 
    debug: true, 
    devtool: 'eval', 
    entry: { 
     "vendor": ["react", "react-router", 'react-dom'], 
     "app": ['webpack-dev-server/client?http://localhost:3000', 'webpack/hot/only-dev-server', './app/App.js'] 
    }, 
    output: { 
     pathinfo: true, 
     path: path.resolve(__dirname, 'public'), 
     filename: '[name].js', 
     publicPath: 'http://localhost:3000/' 
    }, 
    plugins: [ 
     new HtmlWebpackPlugin({ 
      title: 'Welcome!', 
      template: './index_template.ejs', 
      inject: 'body' 
     }), 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.optimize.UglifyJsPlugin({ 
      output: { 
       comments: false 
      }, 
      compress: { 
       warnings: false 
      } 
     }), 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'vendor', 
      minChunks: Infinity, 
      filename: 'vendor.bundle.js' 
     }) 
    ], 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       exclude: /(node_modules|bower_components)/, 
       loaders: ['react-hot', 'babel'] 
      }, 
      { 
       test: /\.styl$/, 
       exclude: /(node_modules|bower_components)/, 
       // loader: 'style!css?resolve url?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]__[hash:base64:5]!postcss!stylus-loader' 
       loader: 'style!css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]__[hash:base64:5]!postcss!stylus-loader' 
      }, 
      { 
       test: /\.(png|jpg)$/, 
       exclude: /(node_modules|bower_components)/, 
       loader: 'url-loader?name=images/[name].[ext]&limit=8192' 
      }, 
      { 
       test: /\.(ttf|otf|eot)$/, 
       exclude: /(node_modules|bower_components)/, 
       loader: 'url-loader?name=fonts/[name].[ext]&limit=8192' 
      }, 
      { 
       test: /\.css$/, 
       loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 
      }, 
      { 
       test: /\.scss$/, 
       loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?resolve url' 
      }, 
      { 
       test: /\.json$/, 
       loader: 'json-loader' 
      }, 
      { 
       test: /\.js$/, 
       include: path.resolve('node_modules/mapbox-gl-shaders/index.js'), 
       loader: 'transform/cacheable?brfs' 
      } 
     ] 
    }, 
    resolve: { 
     root: path.join(__dirname, '..', 'app'), 
     alias: { 
      'react': path.join(__dirname, 'node_modules', 'react') 
     }, 
     extensions: ['', '.js', '.jsx', '.json', '.css', '.styl', '.png', '.jpg', '.jpeg', '.gif'] 
    }, 
    stylus: { 
     'resolve url': true 
    }, 
    postcss: function() { 
     return [autoprefixer]; 
    } 
}; 

(Disclaimer: I am new to React-Router and webpack, so this may be obvious to someone with more familiarity)

Answer 1

你webpack構建堆棧可能沒有配置System.import。我想你使用webpack 1和支持System.import將只在webpack 2。

您可以將現有的代碼更改爲當前流行的代碼分裂溶液：

<IndexRoute 
    getComponent={(nextState, cb) => { 
     require.ensure([], require => { 
      // default import is not supported in CommonJS standard 
      cb(null, require('./containers/Home').default) 
     }); 
    }} 
/> 

注意，如果你想使用默認導入在CommonJS的標準，你必須指定.default。