关于esbuild

1. esbuild是什么？

它是一个非常快速的 JavaScript 构建工具，比当前主流的构建工具速度可能快10~100+倍，esbuild 主要目标是带来构建工具性能的新时代。从下图可以看出esbuild的速度有多快：

2. 为什么 esbuild 快？

1). 它是用Go编写的并编译为本机代码。

go是纯机器码，肯定要比JIT快

2). 并行性被大量使用。

esbuild 中的算法经过精心设计，尽可能使所有可用的 CPU 内核完全饱和。大致分为三个阶段：解析、链接和代码生成。解析和代码生成是大部分工作，并且是完全可并行化的（链接在大多数情况下是固有的串行任务）。

3). esbuild 中的所有内容都是从头开始编写的。

不使用 3rd-party 库有很多性能优势。从一开始就考虑性能，可以确保一切都使用一致的数据结构从而避免昂贵的转换，并且可以在必要时进行广泛的架构更改。主要缺点当然是工作量很大。

(4). 内存得到有效利用。

最大限度地重用 AST 数据，不会占用更多内存并加快速度。Go 可以将东西紧凑地存储在内存中，这使其能够使用更少的内存并在 CPU 缓存中容纳更多。

项目搭建

1. 初始化项目

mkdir waste-web && cd waste-web

yarn init -y

2. 安装esbuild

yarn add -D esbuild

3. 安装React

yarn add react react-dom

4. 安装typescript

yarn add -D @types/react @types/react-dom typescript

5. 使用Typescript Compiler初始化tsconfig.json

npx tsc --init --rootDir src --jsx react

6. 入口文件&模板文件

(1)在根目录底下新建src/index.tsx文件

import React from "react";
import ReactDOM from "react-dom";
import "./global.css"

function App() {
  return <div>Hello World! </div>;
}

ReactDOM.render(<App />, document.getElementById("root"));

(2)在根目录底下新建src/global.css文件

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
    'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

(3)在根目录底下新建public/index.html文件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>waste</title>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <div id="root"></div>
  <script src="index.js"></script>
</body>

</html>

打包准备

1.在根目录底下新建builder.js文件

const { build } = require('esbuild');

const isDev = process.env.NODE_ENV !== 'production'

build({
  entryPoints: ['src/index.tsx'],
  bundle: true, // https://esbuild.github.io/api/#bundle
  outdir: 'public',
  minify: !isDev, // https://esbuild.github.io/api/#minify
  sourcemap: true, // 方便调试 https://esbuild.github.io/api/#sourcemap
  incremental: true, // https://esbuild.github.io/api/#incremental
}).then(() => {
  if(!isDev) process.exit(0)
});

2.安装cross-env并修改package.json

yarn add -D cross-env

"scripts": {
  "build": "cross-env NODE_ENV=production node builder.js"
},

3.执行yarn build

当你运行yarn build应该能够在很短时间内完成我们的应用程序构建，最后运行程序只要在public文件中直接打开index.html文件

实时构建

我们需要一个在本地运行前端静态文件的服务器，这里我选择了live-server

yarn add -D live-server

怎么实时监听本地文件的增删改等一系列事件？很多构建工具在我们保存本地代码时都可以做到实时刷新页面，其实这些构建工具都是在用一个包chokidar。我们引入chokidar这个包，并且使用all事件监听src文件夹。

yarn add -D chokidar

fs-extra模块是系统fs模块的扩展，提供了更多便利的 API，并继承了fs模块的 API，我们引入它来对文件进行操作

yarn add -D fs-extra

修改builder.js文件

const { start } = require("live-server");
const { watch } = require("chokidar");
const { build } = require("esbuild");
const fs = require("fs-extra");

const isDev = process.env.NODE_ENV !== "production";

const serverOptions = {
  port: 8888, // 设置服务器端口
  root: "dist", // 设置正在服务的根目录
  open: true,
};

const buildOptions = {
  entryPoints: ["src/index.tsx"],
  loader: { ".ts": "tsx" },
  bundle: true, // https://esbuild.github.io/api/#bundle
  outdir: "dist",
  minify: !isDev, // https://esbuild.github.io/api/#minify
  format: "cjs",
  sourcemap: true, // 方便调试 https://esbuild.github.io/api/#sourcemap
  incremental: true, // https://esbuild.github.io/api/#incremental
};

(async () => {
  fs.removeSync("dist");
  fs.copySync("public", "dist");

  const builder = await build(buildOptions);

  if (isDev) {
    watch("src/**/*", { ignoreInitial: true }).on("all", () => {
      builder.rebuild();
    });

    start(serverOptions);
  } else {
    process.exit(0);
  }
})();

修改package.json文件

"scripts": {
  "start": "node builder.js",
  "build": "cross-env NODE_ENV=production node builder.js"
},

当你运行yarn start应该能够在看到程序很快构建好了并自动打开浏览器加载。我们尝试修改src/index.tsx文件的内容，可以看到页面实时刷新。

到了这里基本整个简单的搭建过程已经完成了。

esbuild基础使用⌈React+Typescript⌋