我正在为 React Web 应用程序设置样板，并在导航到http://localhost:3000. 我是一个新的训练营学生，我对 webpack 配置的了解非常浅，尤其是有很多依赖项/babel 设置在起作用。我查看了对发布此问题的其他用户的回复，但似乎它可能是由围绕 webpack 配置的任何数量的问题引起的，而且我担心在时间紧迫的情况下会进一步破坏事情。所以我在下面发布了我的一些代码。我很困惑-感谢您的指点！公共/index.html<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>-= PROJECT TITLE PLACEHOLDER =-</title> <script src="/bundle.js" defer></script></head><body> <div id="app"></div></body></html>应用程序/ index.jsimport '../public/style.css'import React from 'react'import ReactDOM from 'react-dom'import { Provider } from 'react-redux'import store from './redux'import Users from './components/Users'ReactDOM.render( <Provider store={store}> <Users /> </Provider>, document.getElementById('app'))webpack.config.js'use strict'const { resolve } = require('path')module.exports = { entry: ['babel-polyfill', './app/index'], output: { path: __dirname, filename: './public/bundle.js' }, mode: 'development', context: __dirname, devtool: 'source-map', resolve: { extensions: ['.js', '.jsx'] }, module: { rules: [ { test: /jsx?$/, include: resolve(__dirname, './app'), loader: 'babel-loader', options: { presets: ['react'] } }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] }}
3 回答
慕莱坞森
TA贡献1810条经验 获得超4个赞
这最终是由于一个幼稚的错误，我在将HTML 发送到 Express 路由器之后放置了静态中间件。当一个同学要求查看我的路由设置时，我发现了它，此时它跳了出来。感谢您的点评，对菜鸟的错误表示歉意！
杨魅力
TA贡献1811条经验 获得超6个赞
您需要更新babel-loader规则：
{
test: /(jsx|js)?$/, // you have app/index.js not app/index.jsx
include: resolve(__dirname, './app'),
loader: 'babel-loader',
options: {
presets: ['react']
}
},
编辑：我也没有在你的中看到 babel 配置，我package.json也没有看到 a.babelrc所以这是假设配置在 a 中.babelrc并且为 React/JSX 正确设置（我babel-preset-react在 中看到package.json；我很确定你需要在你的巴贝尔配置）。
三国纷争
TA贡献1804条经验 获得超7个赞
我相信您的问题可能是您的 babel 预设的顺序。它们从右到左应用。
例如，我的一个项目中的 .babelrc 文件如下所示：
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
添加回答
举报
0/150
提交
取消