安装配置

babel-loader与@babel/core

babel-loader : webpack与Babel通信的桥梁，不处理转译
@babel/core : 核心库，让Babel识别js语法，并把js语法转换成AST抽象语法树

npm install --save-dev babel-loader @babel/core

module: {
  rules: [
    { 
      test: /\.js$/, 
      exclude: /node_modules/,  // 排除node_modules在外，第三方代码已经处理了，不需要使用
      loader: 'babel-loader' 
    }
  ]
}

@babel/preset-env

将ES6语法转换成ES5语法，包含翻译的语法规则

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

module: {
  rules: [
    { 
      test: /\.js$/, 
      exclude: /node_modules/,  // 排除node_modules在外，第三方代码已经处理了，不需要使用
      loader: 'babel-loader',
      options: { // 配置
        presets: ['@babel/preset-env']
      }
    }
  ]
}

@babel/polyfill

一些浏览器不存在es6的实现，即使es6的语法转换成了es5，但是还是有一些内容浏览器不支持。babel/polyfill包含了所有es6语法的实现

npm install --save @babel/polyfill

方式一、业务逻辑方式

会以全局变量的方式注入es6语法，污染全局变量

// 在业务逻辑最顶端引入
import "@babel/polyfill";

全部打包的话，main.js文件会太大，包含所有es6语法，所以只打包业务中使用的es6语法规则

module: {
  rules: [
    { 
      test: /\.js$/, 
      exclude: /node_modules/,  // 排除node_modules在外，第三方代码已经处理了，不需要使用
      loader: 'babel-loader',
      options: { // 配置
        presets: [['@babel/preset-env', {
          useBuiltIns: "usage", // 只打包使用的es6语法
          targets: { // 用于那些版本的浏览器上，补充相应的es6语法
            edge: "17",
            firefox: "60",
            chrome: "67",
            safari: "11.1",
          },
        }]]
      }
    }
  ]
}

方式二、类库方式

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime

module: {
  rules: [
    { 
      test: /\.js$/, 
      exclude: /node_modules/,  // 排除node_modules在外，第三方代码已经处理了，不需要使用
      loader: 'babel-loader',
      options: { // 配置
        "plugins": [["@babel/plugin-transform-runtime", {           
           "corejs": false,
           "helpers": true,
           "regenerator": true,
           "useESModules": false
        }]]
      }
    }
  ]
}

将"corejs": false,改为"corejs": 2,，然后安装

// 包含es6的语法
npm install --save @babel/runtime-corejs2

提取配置项

新建.babelrc文件，将配置项放进去，里面不可以写注释

{
        presets: [['@babel/preset-env', {
          useBuiltIns: "usage",
          targets: {
            edge: "17",
            firefox: "60",
            chrome: "67",
            safari: "11.1",
          },
        }]]
}

{
        "plugins": [["@babel/plugin-transform-runtime", {           
           "corejs": 2,
           "helpers": true,
           "regenerator": true,
           "useESModules": false
        }]]
}

文档

官网
在哪里使用
babel-polyfill
usage
babel-plugin-transform-runtime

网站导航

网站导航