1

webpack と babel が機能している非常に基本的なセットアップに問題があります。JSX をコンパイルするには、babel が必要です。ES2015 の機能は使用しません。

この正確な問題について SO でかなりの数の質問がありますが、それらはすべて、私が既に行ったすべてのbabel-preset-reactプリセットオプションをインストールするか、babel に追加することで解決されるようですwebpack.config.js(私は思います)。

私が見逃しているのは単純なことだと確信していますが、それを見ることができません。

問題を実証するために必要なファイルだけをこの要点に抽出しました(要旨にフォルダーを含めることができないため、ファイル名にダッシュを使用してサブフォルダーを示しました)。私webpack.config.jsはこのように見えます：

module.exports = {
  entry: [
    './app/js/app.js'
  ],
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        include: __dirname + '/app/js/',
        loader: 'babel-loader?presets[]=react',
      }
    ]
  },
  output: {
    filename: "bundle.js",
    path: __dirname + '/public'
  },
};

注：package.jsonすべてが「依存関係」の下にリストされています。これは、開発依存関係をインストールしないherokuでこれをホストしているためです（少なくともデフォルトではありません）

4

2 に答える 2

1

価値があるのは、現在、次の構成行で最新のbabelでwebpackを使用しています

{
    test: /\.jsx?$/,
    exclude:  /(node_modules|bower_components)/,
    loader: 'babel',
    query: {
        presets: ['react', 'es2015']
    }
}

es2015 を使用していないため、react プリセットをリストに残すことができるはずです。babel-loader?presets[]=react期待どおりに機能していない可能性があります。

于 2016-02-23T21:38:13.283 に答える