Loading... ### 什么是ESbuild 上一篇文章中我们提到了Tsup是由esbuild驱动的打包工具，它的特点是不用我们配置esbuild繁琐的内容 <div class="preview"> <div class="post-inser post box-shadow-wrap-normal"> <a href="https://luola.me/18.html" target="_blank" class="post_inser_a no-external-link no-underline-link"> <div class="inner-image bg" style="background-image: url(https://img.loliapi.cn/i/pc/img523.webp);background-size: cover;"></div> <div class="inner-content" > <p class="inser-title">Tsup编译ts文件-一个由esbuild驱动的新型打包库</p> <div class="inster-summary text-muted"> 来源Tsup 是基于 esbuild 开发的一个新型打包工具（比 rollup 还新）。内置了 TypeScrip... </div> </div> </a> <!-- .inner-content #####--> </div> <!-- .post-inser ####--> </div> 这篇文章我们来聊聊什么是`esbuild` 系统学习过前端框架的小伙伴可能知道 `webpack` 对的，就是那个编译要好几分钟的webpack，这里手动圈一下`@webpack`,在前期，在vue2时期，vite使用的是webpack来打包的，项目比较小的可能编译几十秒就能完成，但是如果是大型项目，动则五六分钟，甚至十几分钟，屎都拉完了他还在编译，后期vite更换了新一代的构建工具，rollup，但是对于大型项目来说还是特别慢 ESBuild是基于Go语言开发的JavaScript Bundler，后面也被vite广泛使用 ### 什么是SWC 提到SWC小伙伴可能会很陌生，但是提到一个库小伙伴们就不会很陌生了`@babel/core`没错，这是用来转移es5代码的，总所周知，在大部分项目中还是需要转译成es5代码的，而SWC也是用于转译代码的 **我们为什么要用SWC** 没错@babel/core和webpack一样慢，很慢，所以我们需要使用新一代构建工具SWC，SWC是基于Rust的JavaScript Compiler(其生态中也包含打包工具spack)，rust和go的速度大家都是知道的，是非常快的 ### 如何正确食用TS **基本包安装** ```bash npm install @swc/core #swc核心包 npm install esbuild #esbuild npm install ts-node # 执行ts命令需要 ``` **构建项目** ```bash tsc --init #构建tsconfig文件 npm init -y #构建npm配置文件 ``` **修改配置** 我们需要在tscofing.json文件中修改如下几条 需要修改这三个 - "target": "ESNext" - "module": "ESNext" - "moduleResolution": "Node" 懂ts的小伙伴想必已经知道这是干什么的，这里我给ts基础不是那么好的小伙伴解释一下 - target：指定ts文件被编译为的es版本 这里我们用esnext - module：指定使用的模块化规范 这里我们用esnext - moduleResolution 模块导入解析策略，这里有两个选择 `classic` 和 `node` classic是typescript默认的解析方式，但是这里我们使用node就行了 我们需要在package.json文件中修改如下代码 ```json "scripts": { "build": "node config.js" }, "type": "module" ``` ### 配置esbuild 在根目录创建`config.js`文件，在文件里写入如下的esbuild配置代码 ```js import esbuild from 'esbuild'; import swc from '@swc/core' 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: [ { name: 'swc-loader', setup(build) { build.onLoad({ filter: /\.(js|ts|tsx|jsx)$/ }, (args) => { const content = fs.readFileSync(args.path, 'utf-8') const {code} = swc.transformSync(content, { filename: args.path }) return { contents: code } }) } } ], outdir: 'dist' }) ``` 我们来解释一下都配置了什么东西 - entryPoints：人口文件 - bundle：模块是否单独打包 - loader：编译的文件类型 - plugins：这个是esbuild的特性，可以添加插件进去，使用我们利用这个特性修改了自定义loader也就是swc - outdir：导出文件夹名称 ### 写点东西玩玩 配置好这些以后就可以尽情玩耍了，写点东西玩玩吧 ```ts export const a: number = 1; export const b: string = "ikun"; function test(value: any) { console.log(value); } export default{ test } let x = 1; let fn = () => 123; console.log(x, fn); ``` 然后我们执行如下命令打包成js ```bash npm run build ``` 还是很快的，虽然代码量不多，但是相比webpack没那么复杂的配置，也没那么慢，虽然esbuild确实要配置一些文件，如果你对esbuild的配置看不懂的话，我们下次讲esbuild和rollup相关的知识 这是打包后的文件 ```js "use strict"; (() => { // src/main.ts var a = 1; var b = "ikun"; function test(value) { console.log(value); } var main_default = { test }; var x = 1; var fn = function() { return 123; }; console.log(x, fn); })(); ``` esbuild的高级玩法就自己去探索一下了，它拥有如下玩法 <div class="tip inlineBlock share"> 下面是我复制的！！！ 1. 插件系统 swc 和 esbuild 都提供了插件系统，可以通过插件来扩展其功能。例如，swc 的插件可以用于优化代码，提高性能。esbuild 的插件则可以用于处理特定类型的文件，或自定义转换规则。 2. 缓存系统 swc 和 esbuild 都提供了缓存系统，可以减少重复编译时间。当文件内容没有发生变化时，swc 和 esbuild 会从缓存中读取已编译的代码，以提高构建速度。 3. Watch 模式 swc 和 esbuild 都支持 Watch 模式，可以在文件发生变化时自动重新编译代码。Watch 模式可以减少手动运行构建命令的频率，提高开发效率。 4. 自定义插件 最后，我们可以通过编写自定义插件来扩展 swc 和 esbuild 的功能。例如，可以编写一个插件来自动引入 CSS 文件，或者优化 JavaScript 代码。自定义插件可以根据实际需求进行编写，以更好地满足项目的构建需求。 </div> 最后修改：2024 年 08 月 26 日 © 允许规范转载 赞 如果觉得我的文章对你有用，请随意赞赏