This is the fifth day of my participation in the August Wen Challenge.More challenges in August

About esbuild

This is a screenshot from the official website. You can see that esBuild is vastly different in speed compared to other build tools. Currently, projects built by Vue3 + Vite also use EsBuild in development mode. Here’s how to build a typescript-based development library using esbuild.

start

Create a new folder called mylib

mkdir mylib && cd mylib && npm init --yes
Copy the code

Dependencies under installation:

npm i esbuild typescript rimraf --save-dev
Copy the code

In the root directory, add the tsconfig.json file. You can add content according to your requirements.

{"compilerOptions": {"declaration": true, // generate declaration file "target": "esNext ", // latest ES standard "lib": ["esnext", "DOM "], // The library that TS needs to reference, that is, the declaration file, ES5 default reference DOM, ES5, scripthost, if need to use es advanced version features, usually need to configure. Array" "strict": true, // enable all strict type checking "noImplicitAny": false, // Do not allow implicit any type "esModuleInterop": ModuleResolution: "node"; // Import from moduleResolution: "node"; // Import from moduleResolution: "node" "Lib" // specify output directory}}Copy the code

Note here that esbuild does not generate a declaration file, but rather through the TSC command. Modify the package.json file, add the Module field, and add the script

{" name ":" mylib ", "version" : "1.0.0", "description" : ""," main ":" lib/index. Js ", "types" : "lib/index, which s", "the module" : "lib/index.js", "scripts": { "ts-types": " tsc --emitDeclarationOnly --outDir lib", "build": "rimraf lib && node ./esbuild.js && npm run ts-types" }, "keywords": [], "author": "", "license": "ISC", "devDependencies" : {" esbuild ":" ^ 0.12.1 ", "typescript" : "^ 4.2.4"}}Copy the code

Create a new SRC directory and add the index.ts file to it.

export const add = (a: number, b: number): number => a + b;
Copy the code

Add the esbuild.js file to the root directory and write the esbuild-related code (please refer to the official website for detailed configuration documents).

const esbuild = require("esbuild"); esbuild .build({ entryPoints: ["src/index.ts"], outdir: "lib", bundle: true, sourcemap: true, minify: True, // Splitting code splitting: true, format: "esm", target: ["esnext"],}). Catch (() => process.exit(1));Copy the code

Run NPM run build, and you can see that the lib directory has been successfully generated and contains the declaration file

Additional content

Write script content to AN HTML file: Create a new HTML file in the SRC directory

const esbuild = require("esbuild"); const { readFile, writeFile, mkdir } = require("fs").promises; (async () => { await mkdir("./lib"); const script = esbuild.buildSync({ entryPoints: ["src/index.ts"], bundle: true, minify: true, format: "esm", target: ["esnext"], write: false, }); const html = await readFile("src/index.html", "utf8"); const content = html.replace( "<body>", `<body><script type="module">${script.outputFiles[0].text}</script>` ); // Insert script into body tag await writeFile("lib/index.html", content); }) ();Copy the code

To compress THE HTML content, install the zip package:

npm i html-minifier-terser --save-dev
Copy the code
const esbuild = require("esbuild"); const { readFile, writeFile, mkdir } = require("fs").promises; const minify = require("html-minifier-terser").minify; (async () => { await mkdir("./lib"); const script = esbuild.buildSync({ entryPoints: ["src/index.ts"], bundle: true, minify: true, format: "esm", target: ["esnext"], write: false, }); const html = await readFile("src/index.html", "utf8"); const content = html.replace( "<body>", `<body><script type="module">${script.outputFiles[0].text}</script>` ); // insert script into the body tag const minifyOptions = {collapseWhitespace: true, keepClosingSlash: true, removeComments: true, removeRedundantAttributes: true, removeScriptTypeAttributes: true, removeStyleLinkTypeAttributes: true, useShortDoctype: true, minifyCSS: true, }; Const fileContent = minify(content, minifyOptions); await writeFile("lib/index.html", fileContent); }) ();Copy the code