在webpack中使用babel-loader时，想include一个node_modules的包未生效

Question

我引入了一个包react-loadable，这个包的代码中用了Object.assign()，但是我想兼容ie10，所以想把react-loadable包通过我的babel编译成兼容ie10的代码。项目目录是正确的，能正常编译，但是react-loadable中的代码没有被我的babel编译到，请问这是为什么？

webpack: 4.41.0
bable: 6.23.0

webpack配置：

 module: {
    rules: [
      {
        test: /\.(jsx|js)$/,
        include: [
          resolve("../node_modules/react-loadable"),
          resolve("../src"),
          resolve("./router.config.js")
        ],
        use: ["babel-loader"]
      },
    ]
  }
  
  

.babelrc配置：

 {
  "presets": [
    [
      "@babel/preset-env",
      {
        // 将es6的语法翻译成es5语法
        "targets": { "ie": "10" },
        "useBuiltIns": "usage", // 做@babel/polyfill补充时，按需补充，用到什么才补充什么,
        "corejs": "3"
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    //处理class类
    "@babel/plugin-proposal-class-properties",
    //异步加载
    "@babel/plugin-syntax-dynamic-import"
  ]
}

项目github地址:https://github.com/warnerhu/customWebpack

Answer 1

babel7之后.babelrc文件会忽略node_modules的编译。

1.如果想用polyfill，可以配置:

"useBuiltIns": "entry"

然后在入口文件中注入import '@babel/polyfill';,就会根据你的targets来注入该版本浏览器的所有缺少的补丁，所需要的react-loadable自然也可以用Object.assign;其实目前更好的补丁方式可以用采用polyfill.io这种在线补丁的方式。
2.babel7多了一个babel.config.js,可以基于项目的来配置babel，就可以应用到node_modules内，但是也有比较多的问题，esm和commonjs混用可能会有冲突，可以加一个@babel/plugin-transform-modules-commonjs的插件。

Answer 2

用了第一种方法，确实编译通过了，但是我的corejs配置是3，
所以
import '@babel/polyfill';
应该替换成：
import "core-js/stable";
import "regenerator-runtime/runtime";

但是ie中react-loababel支持得不好，还是没完全加载到组件。。。真磨人啊。。。