Javascript 无法使用babel将jsx传输到js

我正在学习react，以下是我的简单项目结构：

my_project
 --node_modules
 --index.js
 --index.html
 --package.json
 --.babelrc

index.html webpack.config.js 对于index.js第1行，我在浏览器的控制台中遇到以下错误：

未捕获的语法错误：意外的令牌导入

---

请帮助我此代码有什么问题？

您忘了在

webpack

文件中定义

babel加载程序

，请将此部分放入：

module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel',

            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }

使用此网页包文件：

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');

var config = {
   context: __dirname,
   devtool: debug ? "inline-sourcemap" : null,
   entry: "./index.js",
   output: {
      path: __dirname + "/build",
      filename: "bundle.js"
   },
   module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel',

            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   },
   plugins: debug ? [] : [
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.OccurenceOrderPlugin(),
      new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
   ],   
}

module.exports = config;

更新：

发件人：

在使用监视模式时，webpack会将文件监视程序安装到所有文件， 在编译过程中使用的。如果检测到任何变化， 它将再次运行编译。启用缓存后，webpack 将每个模块保留在内存中，如果不更改，将重用它

---

您忘记在

webpack

文件中定义

babel加载程序

，请将此部分放入：

module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel',

            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }

使用此网页包文件：

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');

var config = {
   context: __dirname,
   devtool: debug ? "inline-sourcemap" : null,
   entry: "./index.js",
   output: {
      path: __dirname + "/build",
      filename: "bundle.js"
   },
   module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel',

            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   },
   plugins: debug ? [] : [
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.OccurenceOrderPlugin(),
      new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
   ],   
}

module.exports = config;

更新：

发件人：

在使用监视模式时，webpack会将文件监视程序安装到所有文件， 在编译过程中使用的。如果检测到任何变化， 它将再次运行编译。启用缓存后，webpack 将每个模块保留在内存中，如果不更改，将重用它

---

在网页包中添加

babel loader

，以传输jsx或js

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');

config = {
  context: __dirname,
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./index.js",
  output: {
    path: __dirname + "/build",
    filename: "bundle.js"
  },
  module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',

            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

module.exports = config;

在监视模式下启动网页包，无需重新构建即可在

包.json中添加以下符号

"scripts": {
    "build": "webpack --progress --color --config  webpack.config.js --watch",
}

您还可以在热加载模式下使用
webpack dev server
在webpack中添加
babel loader
来传输jsx或js

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');

config = {
  context: __dirname,
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./index.js",
  output: {
    path: __dirname + "/build",
    filename: "bundle.js"
  },
  module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',

            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

module.exports = config;

在监视模式下启动网页包，无需重新构建即可在
包.json中添加以下符号

"scripts": {
    "build": "webpack --progress --color --config  webpack.config.js --watch",
}

您也可以在热加载模式下使用
webpack dev server
是否可以添加webpack.config.js文件并用它更新问题。是否可以添加webpack.config.js文件并用它更新问题。好的，谢谢。我想问index.html是否指向bundle.js，所以每次我在开发代码中进行更改时，我都必须使用webpack进行构建，然后进行检查？这不是很麻烦吗？如果代码webpack发生任何更改，则自动执行bundle.js文件中的更改，您无需反复运行webpack:）这称为webpack监视模式检查此项：好的，谢谢。我想问index.html是否指向bundle.js，所以每次我在开发代码中进行更改时，我都必须使用webpack进行构建，然后进行检查？这不是很麻烦吗？如果代码webpack发生任何更改，则自动执行bundle.js文件中的更改，您无需反复运行该webpack:）这称为webpack watch mode检查此项：如果您希望webpack自动生成，则可以在watch mode下启动它如果您希望webpack自动生成，则可以在watch mode下启动它