首页 前端知识 如何使用babel对代码进行降级处理?

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

2024-08-27 09:08:17 前端知识 前端哥 492 266 我要收藏

文章目录

    • 一、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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16990.html
标签
yarn
评论
会员中心 联系我 留言建议 回顶部
复制成功!