DEV Community

Masui Masanori
Masui Masanori

Posted on

[TypeScript] Try esbuild

#typescript

Intro

This time, I will try esbuild to bundle my client-side TypeScript files.
Because I have used Webpack to bundle files, and I will replace them.

Base project

Index.cshtml 

<div> <div id="message_div"></div> </div> <script src="/js/index.page.js"></script> <script>Page.init("hello");</script>
Enter fullscreen mode Exit fullscreen mode

index.page.ts 

import { IndexView } from "./index.view"; let view: IndexView; export function init(message: string) { view = new IndexView(); view.updateMessage(message); }
Enter fullscreen mode Exit fullscreen mode

index.view.ts 

export class IndexView { private messageDiv: HTMLElement; public constructor() { this.messageDiv = document.getElementById("message_div") as HTMLElement; } public updateMessage(message: string): void { this.messageDiv.textContent = message; } }
Enter fullscreen mode Exit fullscreen mode

Bundling files

I can bundle the TypeScript files by command.
(On Windows, I have to change execution policy to run PowerShell scripts first)

./node_modules/.bin/esbuild ./ts/index.page.ts --bundle --outfile=./wwwroot/js/index.page.js
Enter fullscreen mode Exit fullscreen mode

I also can execute it as a JavaScript file.

indexbuild.mjs 

import * as esbuild from 'esbuild'; await esbuild.build({ entryPoints: ['ts/index.page.ts'], bundle: true, minify: false, outfile: 'wwwroot/js/index.page.js', });
Enter fullscreen mode Exit fullscreen mode

I can execute this by Node.js.

node ./esbuilds/indexbuild.mjs
Enter fullscreen mode Exit fullscreen mode

Calling functions from outside of TypeScript

After bundling the files, I will get an exception because "Page is not defined".
The bundled file like below.

index.page.js 

"use strict"; (() => { // ts/index.view.ts var IndexView = class { constructor() { this.messageDiv = document.getElementById("message_div"); } updateMessage(message) { this.messageDiv.textContent = message; } }; // ts/index.page.ts var view; function init(message) { view = new IndexView(); view.updateMessage(message); } })();
Enter fullscreen mode Exit fullscreen mode

To call the function from outside of the TypeScript, I should declare them as global.

index.page.ts 

... (window as any).init = (message: string) => { view = new IndexView(); view.updateMessage(message); }
Enter fullscreen mode Exit fullscreen mode

Index.cshtml 

... <script>init("hello");</script>
Enter fullscreen mode Exit fullscreen mode

Add type declaration

To remove "as any", I will add type declaration files.

global.d.ts 

declare global { interface Window { Page: IndexPageApi, }; } export interface IndexPageApi { init: (message: string) => void, }
Enter fullscreen mode Exit fullscreen mode

tsconfig.json 

{ "compilerOptions": { /* Language and Environment */ "target": "es2016", /* Modules */ "module": "commonjs", "baseUrl": "./", "paths": { "*":["*", "./ts/types/*"] }, /* Emit */ "noEmit": true, /* Interop Constraints */ "esModuleInterop": true, "forceConsistentCasingInFileNames": true, /* Type Checking */ "strict": true, "noImplicitAny": true, "strictNullChecks": true, "strictFunctionTypes": true, "strictBindCallApply": true, "strictPropertyInitialization": true, "noImplicitThis": true, "useUnknownInCatchVariables": true, "alwaysStrict": true, "noUnusedLocals": true, "noUnusedParameters": true, "exactOptionalPropertyTypes": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "noUncheckedIndexedAccess": true, "noImplicitOverride": true, "noPropertyAccessFromIndexSignature": true, "allowUnusedLabels": true, "allowUnreachableCode": true, /* Completeness */ "skipLibCheck": true } }
Enter fullscreen mode Exit fullscreen mode

index.page.ts 

... window.Page = { init(message: string) { view = new IndexView(); view.updateMessage(message); } }
Enter fullscreen mode Exit fullscreen mode

Index.cshtml 

... <script>Page.init("hello");</script>
Enter fullscreen mode Exit fullscreen mode

Resources

Top comments (0)