第三章 工程化 - 基于 webpack 从零构建 vue3.x 项目基本流程二

bable 概述

1、babel 是什么

  babel 是把 最新特性、浏览器无法兼容的代码，编译成浏览器可识别的代码（低版本浏览器对新特性的支持不友好），就比如 箭头函数，经过 babel 的转化后，就会变成 普通的函数
  
2、babel 的 3 种使用方式

  1、使用单体文件
  
  2、命令行 【 babel-cli 】
  
  3、构建工具 如 webpack 中的 babel-loader 插件
  
     1、前端常用的就是 第 三 种，构建工具的插件形式
     
     2、毕竟现在大多数前端项目都是基于 webpack 构建的

基于 webpack 从零构建 vue3.x 项目 - babel 的配置

相关插件安装

需要安装的 相关插件 如下

  1、@babel/core
  
     babel 的核心库
     
  2、@babel/preset-env
  
     它取代了 es2015 es2016 es2017 ，通过配置浏览器版本的形式，将编译的主动权，交给了插件
     
  3、babel-loader
  
      webpack 的 loader 插件，用于编译代码，转化成浏览器读得懂的代码   

webpack.config.js 添加配置

module: {
	rules: [
  	{
      test: /\.js$/,
      exclude: /node_modules/,   // 不编译 node_modules 下的文件
      loader: 'babel-loader'
    },
  ]
}

添加 babel.config.js 文件

1、编译的时候，需要读取配置

2、最新的 babel 配置文件需要在 根目录 下添加 babel.config.js 文件

module.exports = {
  presets: [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions"] // 最近 2 个版本的浏览器
      }
    }]
  ]
}

3、这里 browsers 的配置，就是让 env 去识别要打包代码到什么程度，版本选的越新，打包出来的代码就越小

4、因为通常版本越低的浏览器，代码转译的量会更大