esBuild + SWC 构建 TS 项目

2023-12-20 18:30
文章标签 构建 项目 ts swc esbuild

本文主要是介绍esBuild + SWC 构建 TS 项目,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1. esBuild 介绍

esbuild 的官方介绍中打包 threejs 只需要 0.37 秒
Esbuild 是一个非常新的模块打包工具,它提供了与 WebpackRollupParcel 等工具「相似」的资源打包能力,却有着高的离谱的性能优势:

在这里插入图片描述

esbuild 是 go 语言编写的并且是多线程执行,性能是 js 的好几十倍,所以很快。

  • 无需缓存即可实现基础打包
  • 支持 ES6 跟 CommonJS 模块
  • 支持 ES 6 Tree Shaking
  • 体积小
  • 插件化
  • 其他
  • 内置支持编译 jsx

2.SWC 介绍

swc 是用 rust 写的,所实现的功能跟 babel 一样,es6 语法转 es5,但是速度比 babel 更快,前端基建工具使用 rust 的是越来越多了,未来可能还会有一个替代 postCss

在这里插入图片描述

那如果把 esbuild + swc 结合起来构建那不是要起飞?

3. 需要安装的依赖

  1. npm install @swc/core 是 swc 的核心包,用于编译 JavaScript 和 TypeScript 代码

  2. npm install esbuild 是一个快速的 JavaScript 和 TypeScript 构建工具

  3. npm install ts-node 用来编译打包运行 ts-node-esm 命令

4. 搭建基础项目结构

在这里插入图片描述

  1. 使用 tsc --init 命令 生成 tsconfig.json 配置文件
    • 需要修改这三个命令,不让等会的 config.ts 配置打包的文件会语法报错 "target": "ESNext","module": "ESNext","moduleResolution": "Node",
  2. 使用 npm init 命令 生成 package.json 配置文件
    • 运行后会让你填写一些基础信息,直接yes跳过默认就行
    • 需要添加修改 "type": "module", 配置
  3. 配置基础打包命令,在 package.json 文件下的 scripts 添加运行指令 dev-esm:开发环境 后面我们会配置 config.ts 打包文件
"scripts": {"dev-esm": "npx ts-node-esm ./config.ts"
},
  1. 编写一个测试的 ts 语法文件;在 src 文件夹中新增 main.ts 文件,编写一些 ts 语法文件
export const a: number = 1;
export const b: string = "ikun";
let x = 1;
let fn = () => 123;
console.log(x, fn);

5. esBuild+SWC 基础配置

  1. 在根目录新建 config.js 文件 (这是最基本的)
import esbuild from "esbuild"; //打包工具
import swc from "@swc/core"; //类似于babel es6 转 es5
import fs from "node:fs";
await esbuild.build({entryPoints: ["./src/main.ts"], //入口文件bundle: true, //模块单独打包loader: {".js": "js",".ts": "ts",".jsx": "jsx",".tsx": "tsx",},treeShaking: true,define: {"process.env.NODE_ENV": '"production"',},plugins: [{//实现自定义loadername: "swc-loader",setup(build) {build.onLoad({ filter: /\.(js|ts|tsx|jsx)/ }, (args) => {// console.log(args);const content = fs.readFileSync(args.path, "utf-8");const { code } = swc.transformSync(content, {filename: args.path,});return {contents: code,};});},},],outdir: "dist",
});

6. 运行打包

  1. 执行 npm run dev-esm 运行即可,可以看到已经编译完成,并且通过 swc 转换为了 es5 语法文件

在这里插入图片描述

7. esBuild+SWC 高级用法

除了上述基本用法之外,swc 和 esbuild 还提供了许多高级用法,可以更好地满足我们的构建需求。具体使用可以去官网看着配置试下吧

1. 插件系统

swc 和 esbuild 都提供了插件系统,可以通过插件来扩展其功能。例如,swc 的插件可以用于优化代码,提高性能。esbuild 的插件则可以用于处理特定类型的文件,或自定义转换规则。

2. 缓存系统

swc 和 esbuild 都提供了缓存系统,可以减少重复编译时间。当文件内容没有发生变化时,swc 和 esbuild 会从缓存中读取已编译的代码,以提高构建速度。

3. Watch 模式

swc 和 esbuild 都支持 Watch 模式,可以在文件发生变化时自动重新编译代码。Watch 模式可以减少手动运行构建命令的频率,提高开发效率。

4. 自定义插件

最后,我们可以通过编写自定义插件来扩展 swc 和 esbuild 的功能。例如,可以编写一个插件来自动引入 CSS 文件,或者优化 JavaScript 代码。自定义插件可以根据实际需求进行编写,以更好地满足项目的构建需求。

5. 总结

本文介绍了如何使用 swc 和 esbuild 来构建一个简单的 TypeScript 应用程序,并讨论了一些高级用法。swc 和 esbuild 都是现代前端构建工具中的代表,它们都提供了快速编译、代码压缩等功能,可以有效提高应用程序的性能。通过学习 swc 和 esbuild 的使用方法,我们可以更好地进行前端工程化开发,提高开发效率和代码质量。

这篇关于esBuild + SWC 构建 TS 项目的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/517033

相关文章

深度解析Java项目中包和包之间的联系

《深度解析Java项目中包和包之间的联系》文章浏览阅读850次,点赞13次,收藏8次。本文详细介绍了Java分层架构中的几个关键包:DTO、Controller、Service和Mapper。_jav... 目录前言一、各大包1.DTO1.1、DTO的核心用途1.2. DTO与实体类(Entity)的区别1

如何在Spring Boot项目中集成MQTT协议

《如何在SpringBoot项目中集成MQTT协议》本文介绍在SpringBoot中集成MQTT的步骤,包括安装Broker、添加EclipsePaho依赖、配置连接参数、实现消息发布订阅、测试接口... 目录1. 准备工作2. 引入依赖3. 配置MQTT连接4. 创建MQTT配置类5. 实现消息发布与订阅

springboot项目打jar制作成镜像并指定配置文件位置方式

《springboot项目打jar制作成镜像并指定配置文件位置方式》:本文主要介绍springboot项目打jar制作成镜像并指定配置文件位置方式,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录一、上传jar到服务器二、编写dockerfile三、新建对应配置文件所存放的数据卷目录四、将配置文

怎么用idea创建一个SpringBoot项目

《怎么用idea创建一个SpringBoot项目》本文介绍了在IDEA中创建SpringBoot项目的步骤,包括环境准备(JDK1.8+、Maven3.2.5+)、使用SpringInitializr... 目录如何在idea中创建一个SpringBoot项目环境准备1.1打开IDEA,点击New新建一个项

springboot项目中整合高德地图的实践

《springboot项目中整合高德地图的实践》:本文主要介绍springboot项目中整合高德地图的实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一:高德开放平台的使用二:创建数据库(我是用的是mysql)三:Springboot所需的依赖(根据你的需求再

一文详解如何在idea中快速搭建一个Spring Boot项目

《一文详解如何在idea中快速搭建一个SpringBoot项目》IntelliJIDEA作为Java开发者的‌首选IDE‌,深度集成SpringBoot支持,可一键生成项目骨架、智能配置依赖,这篇文... 目录前言1、创建项目名称2、勾选需要的依赖3、在setting中检查maven4、编写数据源5、开启热

SpringBoot项目配置logback-spring.xml屏蔽特定路径的日志

《SpringBoot项目配置logback-spring.xml屏蔽特定路径的日志》在SpringBoot项目中,使用logback-spring.xml配置屏蔽特定路径的日志有两种常用方式,文中的... 目录方案一:基础配置(直接关闭目标路径日志)方案二:结合 Spring Profile 按环境屏蔽关

基于Python构建一个高效词汇表

《基于Python构建一个高效词汇表》在自然语言处理(NLP)领域,构建高效的词汇表是文本预处理的关键步骤,本文将解析一个使用Python实现的n-gram词频统计工具,感兴趣的可以了解下... 目录一、项目背景与目标1.1 技术需求1.2 核心技术栈二、核心代码解析2.1 数据处理函数2.2 数据处理流程

MySQL版本问题导致项目无法启动问题的解决方案

《MySQL版本问题导致项目无法启动问题的解决方案》本文记录了一次因MySQL版本不一致导致项目启动失败的经历,详细解析了连接错误的原因,并提供了两种解决方案:调整连接字符串禁用SSL或统一MySQL... 目录本地项目启动报错报错原因:解决方案第一个:第二种:容器启动mysql的坑两种修改时区的方法:本地

Python FastMCP构建MCP服务端与客户端的详细步骤

《PythonFastMCP构建MCP服务端与客户端的详细步骤》MCP(Multi-ClientProtocol)是一种用于构建可扩展服务的通信协议框架,本文将使用FastMCP搭建一个支持St... 目录简介环境准备服务端实现(server.py)客户端实现(client.py)运行效果扩展方向常见问题结