.babelrc 文件未应用

Question

我只想使用 ts 作为类型检查的形式，所以我使用 babel-loader 并仅添加 typescript-preset ，如下所示。编写 .babelrc 文件时不会应用它，但仅当您在 webpack.config.js 文件内的 babel-loader 内提供选项时才会应用它，如下所示。当我阅读官方文档时，我了解到babel-loader会自动识别并应用.babelrc文件。难道我错了？

我的仓库

.babelrc

{
  "env": {
    "development": {
      "presets": ["@babel/preset-env"],
      "plugins": []
    },
    "production": {
      "presets": [
        [
          "@babel/preset-env",
          {
            "targets": { "ie": 11 }
          }
        ],
        "@babel/preset-typescript"
      ],
      "plugins": [["@babel/plugin-transform-runtime", { "corejs": 3 }]]
    }
  }
}

Answer 1

有很多事情可能会出错，如果不直接访问您的设置，就很难排除简单的事情（例如

.babelrc

位于错误的目录中）。

但是，如果您运行的是 babel-loader 7.1.1 或更早版本，那么您很可能会遇到 bug，其中

babel.transform

默认情况下未正确读取

.babelrc

文件。

有两种解决方案：

解决方案1：升级babel-loader到7.1.2+

该错误已在 7.1.2 和 7.1.4 及以后版本中修复。

解决方案 2：将

babelrc: true

添加到您的 webpack 选项

如果由于某种原因无法升级，那么你只需要明确告诉

babel.transform

寻找 babel 配置文件：

  //...
  {
    loader: 'babel-loader',
    options: {
      babelrc: true,
    }
  }
  // ...

Answer 2

我遇到了同样的问题，找到了两种方法来解决同样的问题，最终达到了相同的想法：

直接在webpack配置中提及.babelrc的内容

  module: {
  
    rules:[
        {
            test: /\.(js|jsx)?$/,
            loader: 'babel-loader',
            options:{
                        "presets": ["@babel/preset-env", "@babel/preset-react"],
                        "plugins": ["@babel/plugin-syntax-dynamic-import"]
                    },
            exclude: [/node_modules/],
        }
    ]
  
  }

加载 .babelrc 的内容并将对象作为选项传递

const webpack = require('webpack');
const fs = require('fs')
const path = require('path')

const babelrcx = fs.readFileSync(path.join(__dirname, '.babelrc'))
let babelrc = JSON.parse(babelrcx)

module: {
  
    rules:[
        {
            test: /\.(js|jsx)?$/,
            loader: 'babel-loader',
            options: babelrc,
            exclude: [/node_modules/],
        }
    ]
  
  }

注意： 为此，.babelrc 需要位于 webpack 配置文件的目录中（例如构建目录）

这个解决方案在一些 stackoverflow 帖子中提到过，但我目前无法跟踪它。