esbuild bundler 项目的主要目标是带来构建工具性能的新时代,并在此过程中创建易于使用的现代捆绑器。
主要特点:
无需缓存的极速 内置javascript css TypeScript 和 jsx 用于CLI, js 和 GO的简单API 捆版ESM和CommonJs模块 Tree shaking,缩小和源地图
安装 esbuild
npm install --save-exact esbuild
安装成功
./node_modules/.bin/esbuild --version
jsx文件 转 js文件, js 编写 jsx语法
tnpm install react react-dom
import * as React from 'react'
import * as Server from 'react-dom/server'
let Greet = () => <h1>Hello, world!</h1>
console.log(Server.renderToString(<Greet />))
执行 esbuild
esbuild app.jsx --bundle --outfile=out.js
会创建out.js和react库捆版一起的react库 执行node out.js 控制台会看到
hello world
esbuild 使用 js文件使用jsx语法,node script 指令中使用 --loader:.js=jsx
npm 包内 使用 esbuild
- add script package.json file
{
"scripts": {
"build": "esbuild app.jsx --bundle --outfile=out.js"
}
}
- 指令 esbuild
npm run build
使用javascript api中编写构建脚本(使用命令行界面可能会变的笨拙)
import * as esbuild from 'esbuild'
await esbuild.build({
entryPoints : [ 'app.jsx' ],
bundle : true ,
outfile : 'out.js' ,
})
package.json 文件
scrips: {
"node-build": "node esbuild.mjs"
}
目录 --根目录 --app.js --esbuild.mjs --package.json
功能捆版
指定环境版本捆版,如node 10.4
scripts: {
esbuild app.js --bundle --platform=node --target=node10.4
}
或者 esbuild.mjs文件内使用javasrcript Api
await esbuild.build({
entryPoints : [ 'app.jsx' ],
bundle : true ,
target: 'node10.4',
platform: 'node',
outfile : 'out.js' ,
})
排除node 内置api
入 import.meta.url fs.readFileSync 和 *node
await esbuild.build({
entryPoints : [ 'app.jsx' ],
bundle : true ,
target: 'node10.4',
platform: 'node',
outfile : 'out.js',
packages: 'external'
})
不同平台的安装使用esbuild包
本地开发时不能直接将 module包 直接复制到另一个平台上,只复制出除了module下的,将使用npm i,将代码下载下来。