Question

我的项目的依赖项使用的是箭头函数，我似乎无法让babel-loader转换外部依赖项。

我的模块部分看起来像

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

我本来在rules对象中排除了/ 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

将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，您会看到：

一旦找到包含package.json的目录，搜索就会停止，因此相对配置仅适用于单个包。

对于node_modules中的软件包，所有软件包都将拥有自己的package.json文件，这将使文件根目录下的.babelrc被忽略被编译在node_modules内的一个包中。

加载程序配置没有此限制。

Answer 2

我克隆了您的项目并执行了npm start-它把源代码捆绑到dist/bundle.js. then I ran this file with node 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，请阅读此内容-https://github.com/visionmedia/superagent/wiki/SuperAgent-for-Webpack

无法使babel loader应用于依赖项

2 个答案: