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

您忘记在babel-loader文件中定义webpack，请放置此部分：

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;

以观察模式启动网络包并且不需要您再次构建以在package.json

中添加关注

"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 个答案: