对 jsx 文件反应 js webpack 捆绑错误

Posted 2023-02-23

【中文标题】对 jsx 文件反应 js webpack 捆绑错误

【英文标题】：react js webpack bundling error for jsx files

【发布时间】：2017-01-15 13:11:09

【问题描述】：

我目前正在做一个小型应用程序。我正在使用 Webpack 捆绑我的文件，当我尝试在命令行中执行 webpack 时，我在下面收到此错误，但是，如果条目扩展名 './public/app.js' 它可以完美运行。我不明白我在做什么错。我确实看过其他一些帖子，但与我的问题不同。如果有任何帮助，我将不胜感激。

./public/app.jsx 中的错误 模块构建失败：ReferenceError：[BABEL] /Users/jair/Desktop/development/react-test/public/app.jsx：未知选项：base.preset。查看http://babeljs.io/docs/usage/options/ 了解更多信息 在 Logger.error (/Users/jair/Desktop/development/react-test/node_modules/babel-core/lib/transformation/file/logger.js:41:11) 在 OptionManager.mergeOptions (/Users/jair/Desktop/development/react-test/node_modules/babel-core/lib/transformation/file/options/option-manager.js:216:20) 在 OptionManager.init (/Users/jair/Desktop/development/react-test/node_modules/babel-core/lib/transformation/file/options/option-manager.js:338:12) 在 File.initOptions (/Users/jair/Desktop/development/react-test/node_modules/babel-core/lib/transformation/file/index.js:216:65) 在新文件（/Users/jair/Desktop/development/react-test/node_modules/babel-core/lib/transformation/file/index.js:137:24） 在 Pipeline.transform (/Users/jair/Desktop/development/react-test/node_modules/babel-core/lib/transformation/pipeline.js:46:16) 在 transpile (/Users/jair/Desktop/development/react-test/node_modules/babel-loader/index.js:38:20) 在 Object.module.exports (/Users/jair/Desktop/development/react-test/node_modules/babel-loader/index.js:131:12)

module.exports = 
entry: './public/app.jsx',
output: 
  path: __dirname,
  filename: './public/bundle.js'
,
resolve: 
  exensions: ['', '.js', '.jsx']
,
module: 
  loaders: [
    
       loader: 'babel-loader',
       query: 
         preset: ['react', 'es2015']
       ,
       test: /\.jsx?$/,
       exclude: /(node_modules | bower_components)/
    
  ]


;

【参考方案1】：

正确的选项名称是presets，而不是preset：

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

另外，我认为 exclude 正则表达式中的空格需要删除：

exclude: /(node_modules|bower_components)/

希望这会有所帮助！