如何使用babel对代码进行降级处理？

文章目录

• • 一、babel是什么
  • 二、babel 可以用来干什么
  • 三、怎么使用babel 进行编译？
  • • 安装
    • 创建配置文件
    • 安装包：
    • 配置 `.babelrc`
    • 修改 package.json
    • 添加文件
    • 执行编译
    • babel 编译文件夹
  • 四、 在node中环境中使用 ESModule
  • 五、解决babel无法编译新API
  • 六、实例代码已上传

一、babel是什么

Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在老版本的浏览器执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。下面是一个例子。

Babel 提供一个REPL 在线编译器，可以在线将 ES6 代码转为 ES5 代码。转换后的代码，可以直接作为 ES5 代码插入网页运行。

转换实例代码：

const fn = (msg)=> `hello ${msg}`
// 转换结果
var fn = function fn(msg) {
  return "hello ".concat(msg);
};

二、babel 可以用来干什么

• 转化ESNext的新特性，兼容低版本浏览器
• 让nodeJS也能使用ESModule语法
• 缺点： 不能转换 ESNext新的API

三、怎么使用babel 进行编译？

安装

mkdir babel-demo
npm init -y 
pnpm i @babel/core -D

创建配置文件

创建.babelrc文件 ， .babelrc是 .babelrc.json.的别名

{
    "presets": [], // 从右向左执行
    "plugins": [] // 从左向右执行
  }

安装包：

pnpm i @babel/cli @babel/preset-env @babel/preset-typescript typescript -D  

配置 .babelrc

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

修改 package.json

  "scripts": {
    "tsc:init":"tsc --init",
    "build": "babel ./index.ts"
  },

添加文件

// index.ts

import { hello } from "./foo";

console.log(hello("foo"));

// foo.ts
export const hello = (msg: string) => `hello ${msg}`;

执行编译

pnpm tsc:init        
pnpm build

babel 编译文件夹

创建 src 文件夹，将 index.ts 和 foo.ts 放入 src 中
** 将 .ts , .js 等文件进行编译后输出到 lib 文件夹下

# 修改 package.json 文件 的 build命令
"build": "babel src --out-dir lib --extensions .ts,.js,.tsx,.jsx,.cjs,.mjs"

添加 -s 参数 还能生成对应的 sourceMap

pnpm build

四、 在node中环境中使用 ESModule

目前发现好像只有js结尾的才能使用，不知道各位大佬有其他方法，请在评论区告诉我

安装@babel/node , 他会有一个 babel-node 命令 ，提供一个支持 ES6 的 REPL 环境。它支持 Node 的 REPL 环境的所有功能，而且可以直接运行 ES6 代码。配合我们的 .babelrc 可以直接执行代码， 我们现将文件改成 .js 后缀

pnpm i @babel/node -D

  // 添加启动命令
  "scripts": {
    "dev":"babel-node ./src/index",
  }

pnpm dev

五、解决babel无法编译新API

目前 最主流的解决方案就是 CoreJS , coreJS 有 V2,V3 两个版本，我们就用v3 版本来

提一下， @babel/polyfill 它其实包含了 Core-JS 的稳定功能和 regenerator-runtime 的导入，但是现在不维护了

pnpm install --save-dev core-js@3 regenerator-runtime 

我们在 入口文件 index.ts 顶部加上下面代码, 并添加 Promise API 的使用

// index.ts
import 'core-js';
import 'regenerator-runtime/runtime';

// 方便看corejs的 
new Promise((resolve,reject)=>{
    resolve('success')
})

修改.babelrc 文件
解释下·"useBuiltIns": 的参数

• false 不要为每个文件自动添加 polyfill
• usage 在每个文件中使用 polyfill 时为它们添加特定的导入
• entry 在入口文件中添加所有导入

{
  "presets": [
    [
      "@babel/preset-env",
      {
         "useBuiltIns": "usage", // "entry":在入口文件导入
        "corejs":"3.37.1"
      }
    ],
    "@babel/preset-typescript"
  ],
  "plugins": []
}

执行编译

pnpm build

查看 lib 中的 index.js 输出

"use strict";

require("core-js/modules/es.object.to-string.js");
require("core-js/modules/es.promise.js");
require("core-js");
require("regenerator-runtime/runtime");


var _foo = require("./foo");

console.log((0, _foo.hello)("foo"));

new Promise(function (resolve, reject) {
  resolve('success');
});

六、实例代码已上传

github babel-demo