无法让 babel loader 应用于依赖项

Question

我项目的一个依赖项正在使用箭头函数，我似乎无法使用 babel-loader 来转换外部依赖项。

我的模块部分看起来像

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

我最初在规则对象中排除：/node_modules/(?!superagent)/ 但将其删除以确保它不是正则表达式问题。

.babelrc

{
  "presets": [
    "@babel/env",
    "@babel/react"
  ]
}

index.js

import superagent from 'superagent'

superagent.get('http://www.google.com')
    .then(result=>console.log('done'))
    .catch(e=>console.error(e));

在这种情况下，有问题的依赖项是超级代理

我使用显示问题的配置创建了一个最小的回购 https://github.com/ksmith97/WebpackIssue

我不确定这里还有什么可以尝试的

编辑：明确这是为了支持 IE 11。

Answer 1

我克隆了您的项目并执行了 npm start - 它将源代码捆绑到 dist/bundle.js. then I ran this file withnode dist/bundle.js` 中。知道了：

Using browser-only version of superagent in non-browser environment
Error: Browser-only version of superagent could not find XHR

所以 babel 加载器工作了。

如果你想为 nodejs 使用 superagent，请阅读此 - https://github.com/visionmedia/superagent/wiki/SuperAgent-for-Webpack

Answer 2

将 babelrc 配置直接移动到 babel 加载器：

const path = require('path');

module.exports = {
    entry: './index.js',
    mode: 'development',
    devtool: 'source-map',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.(jsx?)$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: [
                        "@babel/preset-env",
                        "@babel/preset-react"
                    ]
                }
            },
        }]
    }
};

这个问题也让我感到意外，但是查看 docs 你会看到：

Searching will stop once a directory containing a package.json is found, so a relative config only applies within a single package.

对于 node_modules 中的包，它们都有自己的 package.json 文件，这将使项目根目录下的 .babelrc 被忽略正在编译的文件位于 node_modules.

中的一个包中

加载器配置没有这个限制。

无法让 babel loader 应用于依赖项

Can't get babel loader to apply to dependency

javascript

webpack

babeljs

babel-loader