Vue—babel.config.js配置文件详解

1.概述

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

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

 

Babel是一个JS编译器，主要作用是将ECMAScript 2015+版本代码，转换为向后兼容的JS语法，以便能够运行在当前和旧版本的浏览器或其他环境。

Vue项目中普遍使用ES6语法，若要求兼容低版本浏览器，就需要引入Babel，将ES6转换为ES5.

2.Babel的工作原理

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

3. 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

参考---https://llljpf.blog.csdn.net/article/details/112173176?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7EPayColumn-1-112173176-blog-125268933.pc_relevant_multi_platform_whitelistv3&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7EPayColumn-1-112173176-blog-125268933.pc_relevant_multi_platform_whitelistv3&utm_relevant_index=1