# esbuild esbuild is a JavaScript bundler written in Go that supports blazing fast ESNext & TypeScript transpilation and JS minification. 2021-05-06 @yoctol Tech workshop --- ## creator was created by Evan Wallace (CTO of Figma) --- ## API 兩大 API - build API - bundle file, like webpack - transform API - like babel - 目前只支援 transform 最低 es6，要轉成 es5 以下的語法，官方不支援 - https://esbuild.github.io/api/#target --- ## create React APP ```shell= mkdir tech-workshop-0506 cd tech-workshop-0506 yarn add esbuild react react-dom -D ``` index.html ```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" /> <link rel="stylesheet" href="lib/index.css" /> <title>Tech workshop</title> </head> <body> <div>Hello World</div> <div id="root"></div> <script src="lib/index.js"></script> </body> </html> ``` index.js ```js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root')); ``` index.css ```css 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; } ``` App.jsx ```jsx import React from 'react'; import Demo from './Demo'; import file from './file.json'; const App = () => { return ( <> <Demo /> {console.log({ file })} <button onClick={() => console.log('liked!')}>Like</button> </> ); }; export default App; ``` file.json ```file.json { "test": "this is a json" } ``` Demo.jsx ```jsx import React from 'react'; import './Demo.css'; const Demo = () => { return ( <> <div>This is a demo</div> <code>This is a code</code> </> ); }; export default Demo; ``` Demo.css ``` code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } ``` package.json ```json { "scripts": { "build": "esbuild index.js --outdir=lib --bundle --minify", "dev": "esbuild index.js --outdir=lib --bundle --watch --sourcemap --loader:.js=jsx" } } ``` --- ## 體驗 - 優點：快 - avoiding expensive transformations - leveraging parallelization - using the Go language. - 缺點： - CSS 會被 build 成同一個檔，如果有同樣的 path 會有覆蓋的問題 - https://github.com/koluch/esbuild-plugin-css-modules --- ## plugin https://github.com/esbuild/community-plugins https://esbuild.github.io/plugins/ markdown: https://github.com/martonlederer/esbuild-plugin-markdown --- ## esbuild-loader - 很多人說很快，但是主要是從 webpack + babel-loader 換成 esbuild-loader - https://github.com/privatenumber/esbuild-loader/issues/13 - https://github.com/privatenumber/esbuild-loader-examples/tree/master/examples/next --- ## other tool - snowpack: 也是速度很快，有興趣可以研究 - vite: Vue 作者做的，包山包海，客製化相對比較難 --- ## reference - https://slashgear.github.io/esbuild-incredibly-fast-and-promising/ - https://github.com/privatenumber/minification-benchmarks 有很多 minify 套件的比較 - https://www.npmjs.com/package/gnomon 測秒數 - https://css-tricks.com/comparing-the-new-generation-of-build-tools/ build 比較 --- ## Seed 做 SaaS 服務的精神： - https://basecamp.com/about/policies/until-the-end-of-the-internet