webpack5 babel按需引入全方位总结

乖_摸摸头
1,178 阅读3分钟

前言

babel转化es6+语法包括两方面的转化：

  • 语法转化，比如const,let转化成var，以及箭头函数等的转化
  • polifill也就是垫片的添加，promise,async,await,include等es6+方法转化成es5的实现方式

转化

转化包含三个方面

  • 业务代码的转化
  • node_modules的转化
  • webpack工具函数的转化

业务代码的转化

babelrc
{
    "presets": [
        [
            "@babel/preset-env",
            {
                "useBuiltIns": "usage",
                "corejs": { "version": "3", "proposals": true }
            }
        ],
        "@babel/preset-react"
    ],
    "plugins": [
        "react-hot-loader/babel",
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-syntax-dynamic-import"
    ],
    "env": {
        "production": {
            "plugins": ["transform-remove-console"]
        }
    }
}

package.json
 "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.2.3",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.16.8",
    "@babel/preset-env": "^7.2.3",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.4",
    "babel-plugin-transform-remove-console": "^6.9.4",
 }

按以上代码配置之后就可以实现你的业务代码的转化和polyfill的按需引入了

node_modules内代码的转化

按第一步配置之后大部分情况下你的代码就没问题了，但如果你引的第三方模块里有的是es6代码，那这时候你的代码还不能在低端机上正常展示，原因可能是下边两个

  • 你的配置文件是babelrc，这种情况下，即使你在babel-loader里引入了[node_modules]也不会生效。需要改成babel.config.json,以下是babel官方文档的说明

    image.png

  • 你的第三方依赖里某些包的确是es6语法，打出包之后dist文件里依然包含const和箭头函数，那这时候怎么办呢，要把整个node_modules都include进去吗，答案肯定是no,我们要找出来具体哪些包需要转，因为大部分公共库的包其实在发布的时候就已经转成es5语法了，所以需要我们转化的其实是极少数，那么如何找出这部分第三方包呢，下边提供一个解决办法

    • 在dist文件中搜“const”或者箭头函数，其中某个就行，看这些没转化的都集中在哪个文件里

    image.png 就比如上图中出现的这个11.419XXX这个文件就属于没有转化成功的情况

    • 在BundleAnalyzerPlugin这个插件生成的可视化视图中去查看，上边这个11.419XXX是有哪些包打成的，从下图可知，这个文件包含node_modules/swiper和node_modules/@react-spring两个包，那么你可以把这俩包加进去，再打包一次，重复1的步骤再去查看，还有没有const，直到全部未转化的包都转完为止

    image.png

webpack转化的工具函数转化

webpack打包之后的文件模块其实是一个个立即执行函数，用来进行作用域分隔。我们源码中require和export模块引入方法，在浏览器中是不支持的，因此会进行模拟。模拟的这些工具函数默认是使用es6语法。这里也要转化成es5.有以下几种方式

  1. 指定target
target: ['web', 'es5']
  1. 在output中添加以下字段，禁止使用箭头函数和const
  output: {
        environment: {
            arrowFunction: false,
            const: false,
        }
   }
  1. 如果你指定了.browserslistrc文件的话，前边的1，2，都可以不用，webpack会根据这里需要支持的浏览器版本，转化成你需要的js文件。也是最推荐的方式，因为配置之后你的postcss-loader,babel-loader等也可以直接按照这个去转化了，一处配置多处使用 走到这里终于配置完成了！！！
avatar
文章
阅读
粉丝