webpack基础(九) Babel处理js

什么是babel?

Babel是JavaScript编译器，能将ES6代码转换成ES5代码，让我们开发过程中放心使用JS新特性,而不用担心兼容性问题，并且还可以通过插件机制根据需求灵活配置扩展
Babel在执行编译的过程中，会从根目录下的.babelrc 文件中读取配置，如果没有该文件会从loader的options读取配置。

Babel中预设

• babel-loader:babel和webpack的连接桥梁
• @babel/presets-env: ES6转换成ES5代码
• @babel/preset-flow:flow是JavaScript代码的静态类型检查器
• @babel/preset-react:处理react的jsx语法
• @babel/preset-typescript 处理ts语法

babel配置

前提1：安装babel

npm i babel-loader @babel/core @babel/preset-env -D

前提2:如果需要安装polyfill垫片 @babel/ployfill

npm install --save @babel/polyfill

1. 在webpack.config.js中配置loader

 {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
        },
      }

2. 在根目录下新建.babelrc文件，文件配置如下

{
    "presets": [
        [
            "@babel/preset-env",
            {
                  "targets": {
                  
                    "edge": "17",
                    "chrome": "67"
                },
                  "corejs": 2,
                  "useBuiltIns": "usage" 
            }
        ],
        "@babel/preset-react"
    ]
}

presets属性说明

• targets 目标浏览器的配置，类似.broselist中目标浏览器
• corejs 使用corejs的版本，可以使用3的前提就是手动在本地需要安装core.js的3.x版本
• useBuiltIns 是babel7的新功能，这个选项是告诉babel如何去配置@babel/polyfill
  它有三个值
  • entry 需要在webpack的入口文件中import “@babel/ployfill”一次。babel会根据你实际情况导入垫片，没有使用的功能不会导入相应的垫片。
  • usage 不需要import，全部自动检测，但需要手动安装@babel/polyfill
    -false:如果你import “@babel/polyfill”,它不会排除掉没有使用的垫片，程序体积庞大

注意

babel的按需导入，是在babel7之后才开始有这个概念的，如果版本在babel7之后的，需要手动升级babel的版本

webpack继承react

1. 安装 react react-dom

npm install react react-dom --save

2 安装react预设

npm install --save-dev @babel/preset-react

3. 在.babelrc中配置预设

{
    "presets": [
        [
            "@babel/preset-env",
            {
                  "targets": {
                  
                    "edge": "17",
                    "chrome": "67"
                },
                  "corejs": 2,
                  "useBuiltIns": "usage" 
            }
        ],
        "@babel/preset-react"
    ]
}