Plugins
Custom
Create Loader
Create Loader
The loader function allows you to load files that zely cannot compile by default.
#Example
The following is an abbreviated version of the @zely-js/loader-esbuild code.
Typescript
import esbuild from 'esbuild';
import { join } from 'node:path';
export function esbuildLoader(options: UserConfig): Loader<esbuild.BuildOptions> {
return {
name: '@zely-js/loader-esbuild',
async transform(id, source, buildoptions) {
// only transform javascript / typescript file.
if (!id.endsWith('.ts') && !id.endsWith('.js')) {
return;
}
// compile typescript/javascript to bundled javascript
const out = await esbuild.build({
entryPoints: [id],
outdir: join(options.cwd || process.cwd(), options.dist || '.zely'),
bundle: true,
write: false,
platform: 'node',
});
// return compiled file path and map file
return {
map: null, // optional
filename: out.outFiles[0].path, // required
};
},
};
}id: target file pathsource: source of the filebuildOptions: build options providing type and custom options.
return.map: sourcemap path (optional)return.filename: built file path (required)
INFO
BuildOptions type declaration:
Typescript
export interface TransformOptions<T = any> {
type: 'page' | 'middleware' | 'configuration' | 'cache';
buildOptions: T;
}