设置 Webpack 和 Babel 的问题

Posted 2023-02-16

【中文标题】设置 Webpack 和 Babel 的问题

【英文标题】：Issue with Setting Up Webpack and Babel

【发布时间】：2021-02-12 06:03:16

【问题描述】：

我已按照设置 webpack 和 babel 的所有说明进行操作。我使用 npm install --save-dev webpack webpack-dev-server @babel/core babel-loader @babel/preset-env @babel/polyfill 安装了依赖项。我还安装了 webpack-cli。 这是我的 package.json 文件中的内容：

  "name": "webpack_babel_prac",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": 
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "wepack-dev-server --mode development --open",
    "build": "webpack"
  ,
  "author": "",
  "license": "ISC",
  "devDependencies": 
    "@babel/core": "^7.12.3",
    "@babel/polyfill": "^7.12.1",
    "@babel/preset-env": "^7.12.1",
    "babel-loader": "^8.1.0",
    "webpack": "^5.3.0",
    "webpack-cli": "^4.1.0",
    "webpack-dev-server": "^3.11.0"
  

以下代码是我的 webpack.config.js 文件中的代码

    const path = require('path');

    module.exports = 
      entry: 
        app: ['@babel/polyfill','./src/app.js']
      ,
      output:
        path: path.resolve(__dirname, 'build'),
        filename: 'app.bundle.js'
      ,

      module: 
        rules: [
          
            test: /\.js?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',

            
           query:
              presets: ['@babel/preset-env']
           
          
        ]
      
    

当我运行构建（npm run build）时，它总是给我错误：

> webpack_babel_prac@1.0.0 build /Users/sel/Desktop/js_course/webpack_babel_prac
> webpack

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.module.rules[0] has an unknown property 'query'. These properties are valid:
   object  compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, sideEffects?, test?, type?, use? 
   -> A rule description with conditions and effects for modules.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! webpack_babel_prac@1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the webpack_babel_prac@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/sel/.npm/_logs/2020-10-29T18_12_00_720Z-debug.log
sels-MacBook-Air:webpack_babel_prac sel$ 

它告诉我配置有一个未知属性“查询”，如上所示。当我删除查询并保留预设时：['@babel/preset-env']。它将显示配置具有未知属性“预设”。但是，当我删除查询和预设对象时，它将运行构建，但在我的 app.bundle.js 中，我的 app.js 文件中的代码并未完全编译到 ES5 中。

如果有人能告诉我我做错了什么，我将不胜感激。

谢谢。

【参考方案1】：

babel-loader 文档显示了几个如何执行此操作的示例。如果您正在关注指南并看到此内容，那么它们一定是几年前编写的指南。

query 应该是options。

  module: 
    rules: [
      
        test: /\.js?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',          
        options:
          presets: ['@babel/preset-env']
        
      
    ]
  

【讨论】：

谢谢伙计。我将其更改为选项并成功运行。下次我会更加注意指南。

有人需要告诉编写 js 库的折叠的向后兼容性。太令人沮丧了！