laravel-mix下如何让babel为node_module做兼容？

Question

版本

babel 7
webpack 4.x
laravel-mix 4.x

起因

想做ie11兼容，但是某些三方库没有支持，需要在项目中给特定包添加上babel处理。

现况

目前配置大概是这样的：

.babelrc

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "useBuiltIns": "usage",
                "forceAllTransforms": true
            }
        ]
    ]
}

.browserslistrc

> 1%
last 2 versions
not ie <= 8

以上设置当前项目代码会生效。

下面在webpack.mix.js给特定node_modules添加babel规则，结果却不生效。

mix
    .webpackConfig({
        module: {
            rules: [
                {
                    test: /\.js?$/,
                    include: [
                        path.resolve('node_modules/vpin')
                    ],
                    loader: "babel-loader"
                }
            ]
        }
    })

Answer 1

自问自答！

找了一堆问题，感觉是因为babel7多了新的处理，大概来源至：

6.x vs 7.x .babelrc loading

想了解整个问题出处的可以看下面这里webpack/webpack#2031 (comment)

最终把.babelrc改成babel.config.js问题并没有得到解决。

后来尝试把babel设置直接在webpack.mix.js的rules设置就生效了！

mix
    .webpackConfig({
        module: {
            rules: [
                {
                    test: /\.js?$/,
                    include: [
                        path.resolve('node_modules/vpin')
                    ],
                    loader: "babel-loader",
                    options: {
                        presets: [
                            [
                                "@babel/preset-env",
                                {
                                    useBuiltIns: "usage",
                                    forceAllTransforms: true
                                }
                            ]
                        ]
                    }
                }
            ]
        }
    })