深入浅出 Babel：现代 JavaScript 的编译器

wallhaven-288vd9.jpeg

在现代前端开发中，JavaScript 的版本更新速度非常快，新的语法和特性层出不穷。然而，旧版本的浏览器并不总是支持这些新特性。为了确保代码的兼容性和稳定性，我们需要一个工具来将现代 JavaScript 代码转换为旧版本的代码。Babel 就是这样一个工具。

什么是 Babel？

Babel 是一个 JavaScript 编译器，主要用于将现代 JavaScript 代码（ES6+）转换为向后兼容的 JavaScript 代码，以便在旧版本的浏览器或环境中运行。Babel 还支持转换 JSX 语法（用于 React）和 TypeScript。

// Babel 接收到的输入是： ES2015 箭头函数
[1, 2, 3].map(n => n + 1);

// Babel 输出： ES5 语法实现的同等功能
[1, 2, 3].map(function(n) {
  return n + 1;
});

为什么需要 Babel？

  1. 向后兼容性：现代 JavaScript 特性（如箭头函数、类、模块等）在旧版本的浏览器中不被支持。Babel 可以将这些新特性转换为旧版本的 JavaScript，使代码在所有浏览器中都能运行。
  2. 代码优化：Babel 插件可以帮助优化代码，例如移除未使用的代码、压缩代码等。
  3. 扩展性：Babel 的插件系统非常强大，可以根据需要添加各种功能，如转换 JSX、TypeScript 等。

如何使用 Babel？

1. 安装与配置

安装 Node.js 和 npm

首先，你需要安装 Node.js 和 npm。你可以从 Node.js 官方网站下载并安装最新版本的 Node.js，它会自动安装 npm。

安装 Babel

在你的项目目录中，使用 npm 安装 Babel 的核心包和 CLI 工具：

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

在项目根目录下创建一个 .babelrc 文件，并添加以下内容：

{
  "presets": ["@babel/preset-env"]
}

这个配置文件告诉 Babel 使用 @babel/preset-env 预设来转换现代 JavaScript 代码。

2. 基本使用

编写现代 JavaScript 代码

在 src 目录下创建一个 index.js 文件，并编写一些现代 JavaScript 代码：

// src/index.js
const greet = (name) => {
  console.log(`Hello, ${name}!`);
};

class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    greet(this.name);
  }
}

const john = new Person('John');
john.greet();
使用 Babel 编译代码

在终端中运行以下命令，将 src 目录下的代码编译到 dist 目录：

npx babel src --out-dir dist

编译后的代码将被输出到 dist 目录中。你可以查看 dist/index.js 文件，看到 Babel 将现代 JavaScript 代码转换为向后兼容的代码。

3. 插件与预设

Babel 的强大之处在于其插件和预设系统。你可以根据需要添加各种插件和预设。

安装 JSX 和 TypeScript 支持

如果你使用 React 和 TypeScript，可以安装相关的预设：

npm install --save-dev @babel/preset-react @babel/preset-typescript
更新 .babelrc 文件

更新 .babelrc 文件以支持 JSX 和 TypeScript：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]
}
编写 JSX 和 TypeScript 代码

在 src 目录下创建一个 App.tsx 文件，并编写一些 JSX 和 TypeScript 代码：

// src/App.tsx
import React from 'react';

interface Props {
  name: string;
}

const App: React.FC<Props> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default App;
编译代码

再次运行 Babel 编译命令：

npx babel src --out-dir dist --extensions ".js,.jsx,.ts,.tsx"

4. 与 Webpack 集成

在实际项目中，Babel 通常与 Webpack 一起使用，以便更好地管理和打包代码。

安装 Webpack 和相关插件
npm install --save-dev webpack webpack-cli babel-loader
创建 Webpack 配置文件

在项目根目录下创建一个 webpack.config.js 文件，并添加以下内容：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx']
  }
};
更新 npm 脚本

在 package.json 文件中添加一个构建脚本：

"scripts": {
  "build": "webpack"
}
运行构建

在终端中运行以下命令：

npm run build

Webpack 将使用 Babel 编译代码，并将输出打包到 dist/bundle.js 文件中。

5. 实践项目

为了更好地理解 Babel，建议创建一个小型项目，使用 Babel 编译代码，并尝试在项目中使用不同的 Babel 插件和预设。

项目结构
my-babel-project/
├── dist/
├── node_modules/
├── src/
│   ├── App.tsx
│   └── index.js
├── .babelrc
├── package.json
└── webpack.config.js
完整代码示例

  • src/index.js

    import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App name="John" />, document.getElementById('root'));

  • src/App.tsx

    import React from 'react';

interface Props {
  name: string;
}

const App: React.FC<Props> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default App;

  • .babelrc

    {
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]
}

  • webpack.config.js

    const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx']
  }
};

  • package.json

    {
  "name": "my-babel-project",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/cli": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "@babel/preset-react": "^7.14.5",
    "@babel/preset-typescript": "^7.15.0",
    "babel-loader": "^8.2.2",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

🌲 Babel 的工作原理

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

Babel 的工作流程

Babel 是一个强大的 JavaScript 编译器，它的工作流程可以分为以下几个主要步骤：

  1. 解析（Parsing）：将 ES6+ 代码转换为抽象语法树（AST）。
  2. 转换（Transforming）：使用插件对 AST 进行遍历和修改。
  3. 生成（Generating）：将修改后的 AST 转换回 ES5 代码。

image.png

1. 解析（Parsing）

首先，Babel 使用 @babel/parser（以前称为 Babylon）将 ES6+ 代码解析成抽象语法树（AST）。AST 是代码的结构化表示，便于后续的分析和转换。

import { parse } from '@babel/parser';

const code = `const greet = (name) => { console.log(\`Hello, \${name}!\`); };`;
const ast = parse(code, { sourceType: 'module' });

console.log(ast);
2. 转换（Transforming）

接下来，Babel 使用 @babel/traverse 对 AST 进行遍历，并通过插件对 AST 进行修改。插件可以添加、删除或修改 AST 节点，从而实现代码的转换。

import traverse from '@babel/traverse';

traverse(ast, {
  enter(path) {
    if (path.isIdentifier({ name: 'greet' })) {
      path.node.name = 'sayHello';
    }
  }
});

console.log(ast);

在这个例子中，我们使用 @babel/traverse 遍历 AST，并将所有名为 greet 的标识符（Identifier）修改为 sayHello。

3. 生成（Generating）

最后，Babel 使用 @babel/generator 将修改后的 AST 转换回 ES5 代码。

import generate from '@babel/generator';

const output = generate(ast, {}, code);
console.log(output.code);

在这个例子中，@babel/generator 将修改后的 AST 转换回代码，并输出最终的 ES5 代码。

完整示例

下面是一个完整的示例，展示了 Babel 的整个工作流程：

import { parse } from '@babel/parser';
import traverse from '@babel/traverse';
import generate from '@babel/generator';

// 输入的 ES6+ 代码
const code = `const greet = (name) => { console.log(\`Hello, \${name}!\`); };`;

// 1. 解析：将代码转换为 AST
const ast = parse(code, { sourceType: 'module' });

// 2. 转换：使用插件对 AST 进行遍历和修改
traverse(ast, {
  enter(path) {
    if (path.isIdentifier({ name: 'greet' })) {
      path.node.name = 'sayHello';
    }
  }
});

// 3. 生成：将修改后的 AST 转换回 ES5 代码
const output = generate(ast, {}, code);

console.log(output.code);
// 输出：const sayHello = (name) => { console.log(`Hello, ${name}!`); };

Babel 的性能优化

Babel 的性能优化是一个重要的主题，特别是在大型项目中，编译速度可能成为瓶颈。以下是一些常见的 Babel 性能优化技巧和策略，帮助你提高编译速度和效率。

1. 使用缓存

1.1 babel-loader 的缓存功能

在使用 Webpack 时，可以启用 babel-loader 的缓存功能，以减少重复编译的时间。

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true // 启用缓存
          }
        }
      }
    ]
  }
};
1.2 Babel 缓存插件

Babel 还提供了一个缓存插件 babel-plugin-transform-runtime，可以减少重复的辅助代码。

npm install --save-dev @babel/plugin-transform-runtime

在 Babel 配置文件中启用插件：

{
  "plugins": ["@babel/plugin-transform-runtime"]
}

2. 并行编译

2.1 使用 thread-loader

在 Webpack 中，可以使用 thread-loader 来启用多线程编译，从而提高编译速度。

npm install --save-dev thread-loader

在 Webpack 配置文件中添加 thread-loader：

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: [
          'thread-loader', // 启用多线程编译
          'babel-loader'
        ]
      }
    ]
  }
};
2.2 使用 parallel-webpack

parallel-webpack 是一个用于并行化 Webpack 构建的工具，可以显著提高构建速度。

npm install --save-dev parallel-webpack

使用 parallel-webpack 运行 Webpack：

npx parallel-webpack --config webpack.config.js

3. 按需加载

按需加载可以减少初始加载时间和编译时间。使用 @babel/plugin-syntax-dynamic-import 插件可以实现按需加载。

npm install --save-dev @babel/plugin-syntax-dynamic-import

在 Babel 配置文件中启用插件：

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

在代码中使用动态导入：

import(/* webpackChunkName: "my-chunk-name" */ './myModule').then(module => {
  // 使用模块
});

4. 减少 Babel 处理的文件数量

通过合理配置 exclude 和 include 选项，可以减少 Babel 处理的文件数量，从而提高编译速度。

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/, // 排除 node_modules 目录
        include: /src/, // 仅处理 src 目录
        use: 'babel-loader'
      }
    ]
  }
};

5. 使用更少的 Babel 插件和预设

每个 Babel 插件和预设都会增加编译时间。尽量只使用必要的插件和预设，可以显著提高编译速度。

示例：精简 Babel 配置
{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions", "ie >= 11"]
      }
    }]
  ],
  "plugins": [
    "@babel/plugin-transform-arrow-functions",
    "@babel/plugin-transform-classes"
  ]
}

6. 使用 Babel 的 env 选项

Babel 的 env 选项允许你根据不同的环境（如开发、生产）配置不同的插件和预设，从而优化编译速度。

示例：使用 env 选项
{
  "env": {
    "development": {
      "presets": ["@babel/preset-env"],
      "plugins": ["@babel/plugin-transform-runtime"]
    },
    "production": {
      "presets": ["@babel/preset-env"],
      "plugins": ["@babel/plugin-transform-runtime", "@babel/plugin-transform-react-                    inline-elements"]
    }
  }
}

7. 使用 Babel 的 ignore 选项

Babel 的 ignore 选项允许你忽略特定的文件或目录，从而减少编译时间。

示例：使用 ignore 选项
{
  "ignore": ["node_modules", "dist"]
}

8. 使用 babel-preset-env 的 useBuiltIns 选项

babel-preset-env 的 useBuiltIns 选项可以按需引入 polyfill，从而减少编译后的代码体积。

示例：使用 useBuiltIns 选项
{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "corejs": 3
    }]
  ]
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/710417.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

vue-element-admin后台集成方案

vue-element-admin后台集成方案

官网&#xff1a;介绍 | vue-element-adminA magical vue adminhttps://panjiachen.github.io/vue-element-admin-site/zh/guide 1.git环境安装配置及简单操作 1.1git环境安装配置 git软件官网&#xff1a;Git - Downloads (git-scm.com)https://git-scm.com/downloads 下载…
阅读更多...
Java | Leetcode Java题解之第145题二叉树的后序遍历

Java | Leetcode Java题解之第145题二叉树的后序遍历

题目&#xff1a; 题解&#xff1a; class Solution {public List<Integer> postorderTraversal(TreeNode root) {List<Integer> res new ArrayList<Integer>();if (root null) {return res;}TreeNode p1 root, p2 null;while (p1 ! null) {p2 p1.left…
阅读更多...
JS 中的各种距离 scrollTop？clientHeight?

JS 中的各种距离 scrollTop？clientHeight?

元素的各种距离 DOM 对象 属性描述offsetWidth只读&#xff0c;返回元素的宽度&#xff08;包括元素宽度、内边距和边框&#xff0c;不包括外边距&#xff09;offsetHeight只读&#xff0c;返回元素的高度&#xff08;包括元素高度、内边距和边框&#xff0c;不包括外边距&am…
阅读更多...
【Java】多态、final关键字、抽象类、抽象方法

【Java】多态、final关键字、抽象类、抽象方法

多态(Polymorphism) 【1】多态跟属性无关&#xff0c;多态指的是方法的多态&#xff0c;而不是属性的多态。 【2】案例代入&#xff1a; public class Animal {//父类&#xff1a;动物&#xff1a; public void shout(){ System.out.println("我是小动物&am…
阅读更多...
linux中DNS域名解析服务（后续补充）

linux中DNS域名解析服务（后续补充）

分离解析简介&#xff1a; 分离解析的域名服务器实际也是主域名服务器&#xff0c;这里主要是指根据不同的客户端提供不同的域名解析记录。比如来自内网和外网的不同网段地址的客户机请求解析同一域名时&#xff0c;为其提供不同的解析结果。 实验要求&#xff1a;防火墙要么关…
阅读更多...
小分子水半幅宽检测 低氘水同位素氘检测 富氢水检测

小分子水半幅宽检测 低氘水同位素氘检测 富氢水检测

小分子水半幅宽检测 低氘水同位素氘检测 富氢水检测 检测范围: 矿泉水等饮用水 检测概述 小分子团水活化性很强&#xff0c;具有强渗透力&#xff0c;强溶解力&#xff0c;强扩散力。水的含氧量高&#xff0c;能给人体内的组织细胞带来更多的氧。长自来水大分子团核磁共振测得…
阅读更多...
Vue引入element-plus-04

Vue引入element-plus-04

我们这次开发是使用vue的脚手架来进行开发,前面我们已经使用过最原生的方式去编写我们的vue的语法,从今天开始就使用vue的脚手架,但是前提是你需要用于node的环境 在我们开始之前&#xff0c;我们至少需要有node npm是什么&#xff1f; npm是一个强大的包管理工具&#xff0c;它…
阅读更多...
C++设计模式——Bridge桥接模式

C++设计模式——Bridge桥接模式

一&#xff0c;桥接模式简介 桥接模式是一种结构型设计模式&#xff0c;用于将抽象与实现分离&#xff0c;这里的"抽象"和"实现"都有可能是接口函数或者类。 桥接模式让抽象与实现之间解耦合&#xff0c;使得开发者可以更关注于实现部分&#xff0c;调用…
阅读更多...
Flask快速入门2(请求扩展、CBV装饰器、闪现、g对象、蓝图、wtforms)

Flask快速入门2(请求扩展、CBV装饰器、闪现、g对象、蓝图、wtforms)

Flask快速入门 目录 Flask快速入门请求扩展before_requestafter_requestteardown_requesterrorhandler CBV加装饰器闪现(Flash)示例 g对象蓝图(blueprint)wtforms 请求扩展 常用的请求扩展&#xff1a; before_requestafter_requestteardown_requesterrorhandler before_req…
阅读更多...
十大成长型思维：定位思维、商业思维、时间管理思维、学习成长思维、精力管理思维、逻辑表达思维、聚焦思维、金字塔原理、目标思维、反思思维

十大成长型思维：定位思维、商业思维、时间管理思维、学习成长思维、精力管理思维、逻辑表达思维、聚焦思维、金字塔原理、目标思维、反思思维

一、定位思维 定位思维是一种在商业和管理领域中至关重要的思维模式&#xff0c;它涉及到如何在顾客心智中确立品牌的独特位置&#xff0c;并使其与竞争对手区分开来。以下是关于定位思维的清晰介绍&#xff1a; 1、定义 定位思维是一种从潜在顾客的心理认知出发&#xff0c;通…
阅读更多...
数据资产管理的未来趋势：洞察技术前沿，探讨数据资产管理在云计算、大数据、区块链等新技术下的发展趋势

数据资产管理的未来趋势：洞察技术前沿，探讨数据资产管理在云计算、大数据、区块链等新技术下的发展趋势

一、引言 随着信息技术的飞速发展&#xff0c;数据已成为企业最重要的资产之一。数据资产管理作为企业核心竞争力的关键组成部分&#xff0c;其发展趋势和技术创新受到了广泛关注。特别是在云计算、大数据、区块链等新技术不断涌现的背景下&#xff0c;数据资产管理面临着前所…
阅读更多...
随机森林算法进行预测（＋调参+变量重要性）--血友病计数数据

随机森林算法进行预测（＋调参+变量重要性）--血友病计数数据

1.读取数据 所使用的数据是血友病数据&#xff0c;如有需要&#xff0c;可在主页资源处获取&#xff0c;数据信息如下&#xff1a; import pandas as pd import numpy as np hemophilia pd.read_csv(D:/my_files/data.csv) #读取数据 2.数据预处理 在使用机器学习方法时&…
阅读更多...
Excel 常用技巧（二）

Excel 常用技巧（二）

Microsoft Excel 是微软为 Windows、macOS、Android 和 iOS 开发的电子表格软件&#xff0c;可以用来制作电子表格、完成许多复杂的数据运算&#xff0c;进行数据的分析和预测&#xff0c;并且具有强大的制作图表的功能。由于 Excel 具有十分友好的人机界面和强大的计算功能&am…
阅读更多...
文章解读与仿真程序复现思路——电工技术学报EI\CSCD\北大核心《考虑源网储协同配合下的移动式波浪能发电平台并网优化调度》

文章解读与仿真程序复现思路——电工技术学报EI\CSCD\北大核心《考虑源网储协同配合下的移动式波浪能发电平台并网优化调度》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…
阅读更多...
理解Es的DSL语法（二）：聚合

理解Es的DSL语法（二）：聚合

前一篇已经系统介绍过查询语法&#xff0c;详细可直接看上一篇文章&#xff08;理解DSL语法&#xff08;一&#xff09;&#xff09;&#xff0c;本篇主要介绍DSL中的另一部分&#xff1a;聚合 理解Es中的聚合 虽然Elasticsearch 是一个基于 Lucene 的搜索引擎&#xff0c;但…
阅读更多...
判断QT程序是否重复运行

判断QT程序是否重复运行

打开exe&#xff0c;再次打开进行提示。 main.cpp添加&#xff1a; #include "QtFilePreview.h" #include <QtWidgets/QApplication> #include <windows.h> #include <qmessagebox.h> #pragma execution_character_set("utf-8")bool Ch…
阅读更多...
【LeetCode:2779. 数组的最大美丽值 + 排序 + 二分】

【LeetCode:2779. 数组的最大美丽值 + 排序 + 二分】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…
阅读更多...
荣耀笔记本IP地址查看方法详解：轻松掌握网络配置技巧

荣耀笔记本IP地址查看方法详解：轻松掌握网络配置技巧

在数字化时代的浪潮中&#xff0c;笔记本电脑已经成为我们生活和工作中不可或缺的重要工具。对于荣耀笔记本用户而言&#xff0c;掌握基本的网络配置技巧显得尤为重要。其中&#xff0c;查看IP地址是连接网络、配置设备、排除故障等场景下的关键步骤。本文将详细介绍荣耀笔记本…
阅读更多...
adb shell pm path packageName

adb shell pm path packageName

在Android命令行中&#xff0c;如果你想要查询某个应用程序的安装位置&#xff0c;可以使用pm命令&#xff08;Package Manager的缩写&#xff09;。这个命令提供了很多关于软件包管理的操作&#xff0c;查询应用安装路径&#xff0c;可以使用path选项。 具体命令如下&#xf…
阅读更多...
2024全国大学生信息安全竞赛（ciscn）半决赛（华南赛区）Pwn题解

2024全国大学生信息安全竞赛（ciscn）半决赛（华南赛区）Pwn题解

前言 找华南赛区的师傅要了一份半决赛的Pwn题&#xff0c;听说只有一道题。 题目很简单&#xff0c;可以申请任意大小chunk&#xff0c;并存在UAF、DoubleFree漏洞。 还给了后门函数&#xff0c;不过限制是edit只能写8字节的数据到chunk中。 MyHeap 逆向分析 拖入IDA分析…
阅读更多...
最新文章

Copyright @ 2022~2023