Wire is a proof-of-concept frontend development and build tool. The goal is to provide a development and deployment experience as close to web standards as possible.
This is experimental software. It can technically be used in production but it doesn't cover many use cases and needs polishing.
- Supports HTML + EJS, CSS and TypeScript.
- Dev server for local development
- Optimized production builds using SWC.
- Supports Import Maps.
Install wire as a development dependency in your project:
npm install --save-dev @juanibiapina/wire
Wire provides a wire
CLI for running common frontend development and build
tasks. Summary of commands:
npx wire init
: Initialize a minimal project in the current directory.npx wire dev
: Start development server athttp://localhost:3000
.npx wire build
: Build a production bundle.npm wire importmap pin <package-spec>
: Pin a package to the import map.
HTML lives in src/html
. Files are named :name.html.ejs
, with a special
index.html.ejs
for the root route.
Wire uses EJS for adapting the generated HTML to the environment. Helpers are available for common tasks.
CSS lives in src/css
. Files are named :name.css
. They can be included in
HTML files using the stylesheetLinkTag
helper function in .html.ejs files:
<%- stylesheetLinkTag("application") %>
This will include the application.css
file.
Typescript files live in src/typescript
. Files are named :name.tsx
. JSX is
supported by default.
Typescript files can be included in HTML files using the scriptModuleTag
helper function in .html.ejs files:
<%- scriptModuleTag("application") %>
This will include the application.js
file compiled from application.tsx
.
All files in the src/public
directory are copied to the output directory's
public
directory.
- async importMapScriptTag(): Include the import map script tag.
- scriptModuleTag(name): Include a script tag for JS module defined by
src/typescript/:name.tsx
. - stylesheetLinkTag(name): Include a link tag for CSS file defined by
src/css/:name.css
. - includeCSSDirectory(name): Include all CSS files in the
src/css/:name
directory. - production: True if the environment is production.