node_modules are served alongside compiled JSX code (without using Babel, see
yarn add -E @idio/frontend
Table Of Contents
The package is available by importing its default function:
The middleware constructor will initialise the middleware function to serve files from the specified directory (
frontend by default). The files will be updated on-the-fly to fix their imports to relative paths (e.g.,
preact will be transformed into
/node_modules/preact/dist/preact.mjs). Any CSS styles will also be served using an injector script.
Files served with this middleware, either transpiler or plain JS, will be cached using their
mtime. There is no need to compute
md5 because this middleware is meant for the development purposes, whereas production code can be built with Depack.
FrontEndConfig: Options for the middleware.
|directory||(string | !Array<string>)||The directory or directories from which to serve files.||
|mount||string||The directory on which to mount. The dirname must be inside the mount. E.g., to serve
|override||!Object<string, string>||Instead of resolving the package.json path for packages and looking up the module and main fields, paths can be passed manually in the override. E.g.,
|pragma||string||The pragma function to import. This enables to skip writing
The middleware can be used in any
Koa application, or within the
idio web server.
/* yarn example/ */import idio from '@idio/idio'import render from '@depack/render'import frontend from '@idio/frontend'const url app = awaitappconsole
example/frontend├── Component.jsx├── index.jsx└── style.css
The entry point
import render from 'preact'import Component from './Component'// linked node_modules are also resolvedimport Form Input from '@depack/form'
import './style.css'const Component = testreturn <div>test</div>
|© Art Deco for Idio 2019||Tech Nation Visa Sucks|