nodejs 012:Babel（巴别塔）语言转换与代码兼容

news2024/11/15 6:46:18

这里写目录标题

- 安装 Babel
- 配置
- - presets配置：常见的 Babel Presets
  - plugins配置：以 plugin-transform-class-properties 的类中属性为例
  - index.jsx

Babel 是一个独立的 JavaScript 编译器，主要用于将现代 JavaScript 代码转换为旧版本的 JavaScript，以提高兼容性。

安装 Babel

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

配置

然后需要配置 Babel，通过创建一个 .babelrc 文件或在 babel.config.json 中设置Babel 配置。
Babel 的配置通常包括 presets 和 plugins。其中 presets 用于指定一组预设的转换规则，plugins则通过自定义的插件形式进行代码兼容转换。
babel.config.json 示例：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

presets配置：常见的 Babel Presets

@babel/preset-react：
- 这个 preset 用于转换 React 代码。它包括转换 JSX 语法的插件。
- 配置示例：

// https://babel.nodejs.cn/docs/babel-preset-react
{
  "presets": [
    [
      "@babel/preset-react",
      {
        "pragma": "dom", // default pragma is React.createElement (only in classic runtime)
        "pragmaFrag": "DomFrag", // default is React.Fragment (only in classic runtime)
        "throwIfNamespace": false, // defaults to true
        "runtime": "classic" // defaults to classic
        // "importSource": "custom-jsx-library" // defaults to react (only in automatic runtime)
      }
    ]
  ]
}

@babel/preset-typescript：
- 这个 preset 用于将 TypeScript 代码转换为 JavaScript 代码，移除 TypeScript 特有的类型信息。
@babel/preset-env：
- 这个 preset 用于将现代 JavaScript 代码转换为兼容的 JavaScript 代码。它根据目标环境（如浏览器或 Node.js 的版本）自动选择需要的插件和 polyfills。
- 可以通过配置 targets 字段指定要支持的浏览器或环境。例如：
```
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "> 0.25%, not dead"
      }
    ]
  ]
}
```
- 上面的配置表示目标是市场份额大于 0.25% 的浏览器，并且不是“已死”的浏览器（即不再接收更新的浏览器）。

plugins配置：以 plugin-transform-class-properties 的类中属性为例

Babel 是一个 JavaScript 编译器，允许开发者使用最新的 JavaScript 语法和特性，并将代码转译成兼容旧版本浏览器的代码。为了扩展 Babel 的功能，有很多插件可供使用。
命令进行安装（如果没有打包工具帮助自动安装的话）：npm install --save-dev @babel/plugin-transform-class-properties
.babelrc或（babel.config.json）配置

    "plugins": [
      ["@babel/plugin-transform-class-properties",
       { 
     	 "loose": true 
      }]// 类中属性语言https://babel.nodejs.cn/docs/babel-plugin-transform-class-properties
    ]

比如对以下.html文件的渲染

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script src="./js/index.jsx"></script> 
</body>
</html>

index.jsx

import { h, Component, render } from 'preact';

class App extends Component { 

    constructor(props) { // constructor(props): 构造函数是类组件的初始化方法
        super(props);
        this.state = {// this.state: 定义组件的初始状态。在这里，state 是一个对象，用于存储组件的内部数据。
            Text: "WORLD",
        };

        //  事件处理函数的绑定等代码,函数bind到this对象上
        // this.onIpcChange = this.onIpcChange.bind(this);
    }

    render() { 
        return(<h1>HELLO {this.state.Text}</h1>)
    }
}

render(<App />,document.querySelector('#root'))

简化为

import { h, Component, render } from 'preact';

class App extends Component { 
       state = {
        Text: "WORLD",
    };

    render() { 
        return(<h1>HELLO {this.state.Text}</h1>)
    }
}

render(<App />,document.querySelector('#root'))

在这里插入图片描述