Vue | babel.config.js 配置详解

Posted 2023-04-04 孟华328

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"
            

        ]
    ],

1. 如果要缩减输出代码，需要增加选项 "minified": true

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

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

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

让 Nextjs 忽略 babel.config.js

【中文标题】让 Nextjs 忽略 babel.config.js

【英文标题】：Make Nextjs to ignore babel.config.js

【发布时间】：2020-07-11 23:43:24

【问题描述】：

我有一个 nextjs 应用程序，我希望 babel 自定义运行 jest 套件进行测试，但是当我配置 babel.config.js 文件时 jest 运行成功，但 nextjs 也采用了我不想要的配置，我希望 nextjs忽略 babel.config.js，我该怎么做？

【问题讨论】：

我希望 nextjs 有 nextjs 附带的默认 babel 配置

【参考方案1】：

只需为测试创建一个不同的文件名（如babel.config.test.js）并开玩笑使用它。

我假设你在 package.json 里面的玩笑配置

// package.json


  "jest": 
    "transform": 
      "\\.js$": ["babel-jest",  "configFile": "./babel.config.test.js" ]