时间戳

首页 > 解决方案 > 无法让 babel loader 应用于依赖项

javascript - 无法让 babel loader 应用于依赖项

问题描述

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

我的模块部分看起来像

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

我最初在规则对象中有 exclude: /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));

在这种情况下，有问题的依赖是 superagent

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

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

编辑：要明确这是针对 IE 11 的支持。

标签： javascriptwebpackbabeljsbabel-loader

解决方案

将 babelrc 配置直接移动到 babel loader：

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"
                    ]
                }
            },
        }]
    }
};

这个问题也让我感到惊讶，但是查看文档你会看到：

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

并且对于里面的包node_modules，它们都有自己的package.json文件，当正在编译的文件在包里面时，这将使.babelrc您项目根目录的 被忽略node_modules。

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

推荐阅读