無法使用babel將jsx轉換為js

Question

我正在學習反應，這是我簡單的項目結構：

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

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root"></div>

<script src="index.js"></script>
</body>
</html>

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

package.json

{
  "name": "my_project",
  "version": "1.0.0",
  "description": "frontend using react js",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel src -d dist"
  },
  "scripts": {
    "build": "babel --presets es2015 -d dist"
  },
  "author": "kishan",
  "license": "ISC",
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "devDependencies": {
    "babel-cli": "^6.23.0",
    "babel-core": "^6.23.1",
    "babel-loader": "^6.4.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.23.0",
    "webpack": "^2.2.1"
  },
  "babel": {
    "plugins": ["transform-react-jsx"],
    "ignore": [
      "foo.js",
      "bar/**/*.js"
    ]
  }
}

webpack.config.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"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

module.exports = config;

我在index.js第1行的瀏覽器中的控制台中收到以下錯誤：

Uncaught SyntaxError: Unexpected token import

請幫助我這段代碼有什么問題？

Answer 1

您忘了在webpack文件中定義babel-loader ，將這一部分放進去：

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

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

使用此webpack文件：

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 Doc中：

使用監視模式時，webpack會將文件監視程序安裝到所有在編譯過程中使用的文件。 如果檢測到任何更改，它將再次運行編譯。 啟用緩存后，webpack會將每個模塊保留在內存中，如果未更改，它將重新使用它。

Answer 2

在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;

以監視模式啟動webpack，不需要再次構建即可在package.json中添加followign

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

您還可以在熱加載模式下使用webpack-dev-server

無法使用babel將jsx轉換為js

問題描述

index.html

index.js

package.json

webpack.config.js

2 個解決方案

解決方案1
1 已采納 2017-03-10 09:49:16

解決方案2
1 2017-03-10 09:54:06

無法使用babel將jsx轉換為js

問題描述

index.html

index.js

package.json

webpack.config.js

2 個解決方案

解決方案1 1 已采納 2017-03-10 09:49:16

解決方案2 1 2017-03-10 09:54:06

解決方案1
1 已采納 2017-03-10 09:49:16

解決方案2
1 2017-03-10 09:54:06