Babel技术使用汇总

Posted 2022-03-30 mask哥

1.babel作用：把 javascript 中 es2015/2016/2017/2046 的新语法转化为 es5，让低端运行环境(如浏览器和 node )能够认识并执行。
2.使用方法:
    使用单体文件 (standalone script)
    命令行 (cli)
    构建工具的插件 (webpack 的 babel-loader, rollup 的 rollup-plugin-babel)。

    **多见于 package.json 中的 scripts 段落中的某条命令**
3.运行方式和插件:

   babel 运行分为三个阶段：解析，转换，生成；转化的功能都分解到一个个 plugin 里面；

   插件总共分为两种：
       3.1 当我们添加 语法插件 之后，在解析这一步就使得 babel 能够解析更多的语法；为了避免 babel 报错，就需要增加语法插件 babel-plugin-syntax-trailing-function-commas
       3.2 当我们添加 转译插件 之后，在转换这一步把源码转换并输出。这也是我们使用 babel 最本质的需求。转译插件：babel-plugin-transform-es2015-arrow-functions。

       ***如果我们使用了转译插件，就不用再使用语法插件了**
4.配置文件：
   插件是 babel 的根本，使用方法：
       将插件的名字增加到配置文件中 (根目录下创建 .babelrc 或者 package.json 的 babel 里面，格式相同)
       使用 npm install babel-plugin-xxx 进行安装

5.插件存在顺序行，执行顺序：
   Plugin 会运行在 Preset 之前。
   Plugin 会从前到后顺序执行。
   Preset 的顺序则 刚好相反(从后向前)。

6.env:核心目的是通过配置得知目标环境的特点，然后只做必要的转换.

    常用的配置方法:
      
          "presets": [
            ["env",
              "targets":
                "browsers": ["last 2 versions", "safari >= 7"]
              
            ]
          ]
        

        
          "presets": [
            ["env",
              "targets":
                "node": "6.10"
              
            ]
          ]
        

另外一个有用的配置项是 modules。它的取值可以是 amd, umd, systemjs, commonjs 和 false。这可以让 babel 以特定的模块化格式来输出代码。如果选择 false 就不进行模块化处理。

7.babel使用配置方法(presets和plugins)：

       使用最新的javascript语法
      npm install --save-dev @babel/preset-env

     Babel能够转换 JSX 语法。
       npm install --save-dev @babel/preset-react

       配置：
       "presets": ["@babel/preset-react"]
     
           

     typescript配置
     npm install --save-dev @babel/preset-typescript

     es转译插件

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

8.vscode 安装babel插件：vscode-language-babel 

9.package.json中配置babel相关：