Question

我一直在寻找如何修复此错误，但我无法修复它。大多数答案我发现处理设置正确的巴别塔，但我相信我已经设置了它应该。我正在使用Webpack在我的项目中使用React。

我的webpack配置文件是：

const path = require('path');

module.exports = {
  context: __dirname + "/app",

  entry: {
    javascript: "./js/app.js",
    html: "./index.html",
  },

  output: {
    filename: "app.js",
    path: __dirname + "/dist",
  },

  resolve: {
    extensions: ['', '.js', '.jsx', '.json'],
    root: path.resolve(__dirname, './app/js'),
  },

  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loaders: ["react-hot", "babel-loader"],
      },
      {
        test: /\.html$/,
        loader: "file?name=[name].[ext]",
      },
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
    ],
  },
}

我的index.html是：

<html>
<head>
  <title>React</title>
  <meta charset="utf-8" />
  <style>
    * {
      margin: 0;
      padding: 0;
      font-size: 18px;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-weight: normal;
    }

    body {
      background: #ededef;
    }

    #app,
    .Info {
      max-width: 600px;
      padding: 40px;
      margin: 0 auto;
      position: relative;
    }

    hr {
      border: 0;
      border-top: 1px solid #ddd;
      margin: 20px 0;
    }
  </style>
</head>
<body>
  <div id="app"></div>
  <script src="./js/app.js"></script>
</body>
</html>

当我在我的JS文件app.js中加载带import React from 'react';的React时，会出现错误。我已经安装了必要的Babel包。我的根文件夹中有一个.babelrc文件。可能导致此错误的原因是什么？

修改

我的.babelrc文件是：

{
  "presets": [
    "es2015",
    "react"
  ]
}

Answer 1

尝试在webpack加载器中使用include属性，也不需要为babel-loader文件单独定义js，因为/\.jsx?$/语法已经检查了两者

loaders: [
  {
    test: /\.jsx?$/,
    include: [
      path.resolve(__dirname, "app")
    ],
    loaders: [ 'react-hot', 'babel-loader' ]
  },
  {
    test: /\.html$/,
    loader: "file?name=[name].[ext]",
  }
],

此外，当您在js文件中加入html时，您应该在webpack中包含已编译的js文件，该文件会在dist文件夹中显示

<body>
  <div id="app"></div>
  <script src="./dist/app.js"></script>
</body>

Answer 2

您需要使用stage-0预设：

npm install --save-dev babel-preset-stage-0

示例webpack.config.js是：

var webpack = require('webpack');
var path = require('path');
module.exports={
devtool :'inline-source-map',
entry : ['webpack-dev-server/client?http://127.0.0.1:8000',
'webpack/hot/only-dev-server',
'./src'
] ,
output :{
path: path.join(__dirname, 'build'),
filename: 'bundle.js',
},
resolve:{
 modulesDirectories : ['node_modules','src'],
 extensions : ['','.js']
},
module : {
loaders :[
  {
    test : /\.jsx?$/,
    exclude : /node_modules/,
    loaders :['react-hot','babel?presets[]=react,presets[]=es2015,presets[]=stage-0']
  }
]
},
 plugins :[new webpack.HotModuleReplacementPlugin(),
 new webpack.NoErrorsPlugin()
  ]

};

Answer 3

您的babel设置有效，但您有两个适用于.js的规则，因为/\.jsx?/也匹配.js，因为x?表示x出现一次或零次}}。你应该删除其他规则。

从错误中看，您尝试在导入app/index.html的浏览器中打开./js/app.js。这不是已处理的文件，这是带有import语句的原始文件，因此在浏览器中逻辑上失败。

首先，您需要打开webpack生成的文件，例如dist/index.html。但它找不到捆绑包，因为它位于dist/app.js，而不是dist/js/app.js。由于index.html只是被复制（使用您配置的file-loader），因此您需要将<src>标记更改为以下内容，因为它位于同一目录中：

<script src="app.js"></script>

如何修复'Uncaught SyntaxError：Unexpected token import'？

3 个答案: