@vue/cli-plugin-babel（Vue | babel.config.js 配置详解）

1 概述

Babel 相当于一个中介
  
  
  
  
  
  
  ，一边是用户 
  
  
  
  
  
  
，另一边是浏览器             。这几年 


 


 


 


 


 


 

，JavaScript 发生了很大的变化
 
 
 
 
 
 
 ，许多新特性在很多浏览器里都不支持  
 
  
 
  
 
  
 
  
 
  
 
  
 。

Babel 的主要作用就是规避这些问题  
   
   
   
   
   
   
，可以确保 JavaScript 代码兼容所有的浏览器 

 

 

 

 

 

 
，比如 IE 11













。

2 Babel 的工作原理

Babel 使用 AST 把不兼容的代码编译成 ES15 版本

 

 

 

 

 

 

 ，因为大多数浏览器都支持这个版本的 JavaScript 代码
  
  
  
  
  
  
 。

2.1 如何设置？

在控制台运行如下命令：

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

应用程序的根目录会默认创建一个 babel.config.json 文件  
  
  
  
  
  
  。Babel 将遍历 src 目录下的所有 JS 文件
 


 


 


 


 


 


 

。

{ "presets": [ [ "@babel/env", { "targets": { "edge": "17", "firefox": "60", "chrome": "67", "safari": "11.1" }, "useBuiltIns": "usage", "corejs": "3.6.5" } ] ] }`

把 babel.config.json 添加到 package.json 里
 
 
 
 
 
 
。

"build": "./node_modules/.bin/babel src --out-dir build"

然后             ，执行如下命令：

npm run build

这时 
 

 
 

 
 

 
 

 
 

 
 

 
 
，在 build 文件夹里就生成了转换代码   
   
   
   
   
   
   。

2.2 @babel/core @babel/cli @babel/preset-env 到底做了哪些事情

@babel/core：Babel 的所有核心功能都在这里 @babel/cli：提供了 CLI 工具













，使我们能够运行 npm run build @babel/preset-env：提供预置功能

3 插件

Babel 使用插件来执行代码转换                    ，插件其实就是用 JavaScript 所写的程序片段
 

 

 

 

 

 

 
。比如@babel/plugin-change-Arrow-function  
 
 
 
 
 
 
 
 
 
 
 
 
 
，它的代码实现如下：

// From this const fn = () => 1; // Converted to this var fn = function fn() { return 1; };

上面提到的 @babel/preset-env 本身包含了一组插件



















，可以处理手动设置插件带来的很多问题              ，大多数情况下能够智能处理代码

 

 

 

 

 

 

。

Polyfill

Polyfill 是 JavaScript 代码片段 
 
  
 
  
 
  
 
  
 
  
 
  
 
，兼容原本不支持的旧版浏览器              。Polyfill 模块包括core-js和一个自定义的重生器运行时












，以模拟完整的ES2015 +环境
 
 

 
 

 
 

 
 

 
 

 
 

 
 。如果要使用 PolyFill 必须运行如下命令：

// Install via npm install --save @babel/polyfill // Add via import "core-js/stable"; import "regenerator-runtime/runtime";

4 Babel 配置文件的优先级

从低到高依次为：

babel.config.json babelrc.json @babel/cli

依照优先级
  
  
  
  
  
  
  ，babel.config.json 会被 . babelrc 覆盖 
  
  
  
  
  
  
，依次类推













。

5 Babel 有哪些值得注意的选项

以下面的配置为例：

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

如果要缩减输出代码 


 


 


 


 


 


 

，需要增加选项 "minified": true

如果要忽略某些文件
 
 
 
 
 
 
 ，则添加 ignore: ["file or directory path"]

只编译特定的文件或文件夹  
   
   
   
   
   
   
，则添加

// For Files "only" : ["./src/some_file.js"], // For Directory "only" : ["./src"],