0


Vue | babel.config.js 配置详解

1 概述

Babel 相当于一个中介,一边是用户,另一边是浏览器。这几年,JavaScript 发生了很大的变化,许多新特性在很多浏览器里都不支持。

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

2 Babel 的工作原理

Babel 使用 AST 把不兼容的代码编译成 ES15 版本,因为大多数浏览器都支持这个版本的 JavaScript 代码。

2.1 如何设置?

在控制台运行如下命令:

npminstall --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 thisconstfn=()=>1;// Converted to thisvarfn=functionfn(){return1;};

上面提到的

@babel/preset-env 

本身包含了一组插件,可以处理手动设置插件带来的很多问题,大多数情况下能够智能处理代码。

Polyfill

Polyfill 是 JavaScript 代码片段,兼容原本不支持的旧版浏览器。Polyfill 模块包括

core-js

和一个自定义的重生器运行时,以模拟完整的

ES2015 +

环境。如果要使用 PolyFill 必须运行如下命令:

// Install via 
npminstall --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"}]],
}
  1. 如果要缩减输出代码,需要增加选项 "minified": true
  2. 如果要忽略某些文件,则添加 ignore: ["file or directory path"]
  3. 只编译特定的文件或文件夹,则添加// For Files"only":["./src/some_file.js"],// For Directory"only":["./src"],

本文转载自: https://blog.csdn.net/alexwei2009/article/details/125268933
版权归原作者 孟华328 所有, 如有侵权,请联系我们删除。

“Vue | babel.config.js 配置详解”的评论:

还没有评论