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.
Install wire as a development dependency in your project:
npm install --save-dev @juanibiapina/wireWire 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/:namedirectory. - production: True if the environment is production.