MZ's 技术指南esbuild
1、简介
TIP
esbuild是go语言编写的并且是多线程执行,性能是js的好几十倍
1.1、特点
- 无需缓存即可实现基础打包
- 支持 ES6 跟 CommonJS 模块
- 支持ES 6 Tree Shaking
- 体积小
- 插件化
- 其他
- 内置支持编译 jsx
2、安装
shell
npm install esbuild -D查看版本
shell
npx esbuild --version3、使用
3.1、命令行
3.1.1、打包脚本
shell
npx esbuild src/main.js --bundle --outfile=dist/main.js3.1.2、实时监听变化
shell
npx esbuild src/main.js --bundle --outfile=dist/main.js --watch3.1.3、压缩
shell
npx esbuild src/main.js --bundle --outfile=dist/main.js --minify4、示例
4.1、esbuild + swc 构建ts项目
TIP
- SWC则宣称其比Babel快20倍(四核情况下可以快70倍)
- SWC是用
rust写的，所实现的功能跟babel一样，es6语法转es5，但是速度比babel更快
4.1.1、安装
TIP
@swc/core是swc的核心包，用于编译JavaScript和TypeScript代码；esbuild是一个快速的JavaScript和TypeScript构建工具；@swc/helpers是swc的辅助包，用于转换JSX代码。
shell
npm install @swc/core @swc/helpers esbuild -D4.1.2、配置
esbuild.js
js
import esbuild from 'esbuild';
import swc from '@swc/core';
import fs from 'node:fs'
await esbuild.build({
entryPoints: ['src/main.ts'],
bundle: true,
outdir: 'dist',
loader: {
'.ts': 'ts',
'.js': 'js',
'.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 contents = fs.readFileSync(args.path, 'utf-8');
const { code } = swc.transformSync(contents, {
filename: args.path
});
return { contents: code };
})
}
}
]
})package.json
json
{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "node esbuild.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@swc/core": "^1.3.79",
"@swc/helpers": "^0.5.1",
"esbuild": "^0.19.2",
"typescript": "^5.2.2"
}
}