/esbuild-usemin

A basic Usemin implementation using Esbuild

Primary LanguageTypeScriptMIT LicenseMIT

Introduction

esbuild-usemin is a basic implementation of Usemin using Esbuild.

Usemin is a tool used to minify multiple files together in view files.

This Esbuild equivalent is intended to do the same thing.

Currently, only .js files are supported in the combination process, but support for css files is planned.

This tool is intended to help users move away from the legacy Usemin system and package their js/css files in a more organized fashion.

Transpiling

The tool transpiles the following code:

<!-- build:js sample.dist.js-->

<script src="js/sample.js" type="text/javascript"></script> <script src="js/jquery-3.6.3.min.js" type="text/javascript"></script>

<!-- endbuild -->

to

<!-- build:js sample.dist.js-->

<script type='text/javascript' src='../../dist/sample.dist.js'></script>

<!-- endbuild -->

Sample Configuration

Here is a sample configuration:`

import * as esbuild from 'esbuild' 
import usemin from 'esbuild-usemin'; 
import * as path from "path";

const dirname = path.resolve() || __dirname; const outdir = path.relative(dirname, 'dist');

await esbuild.build({ 
entryPoints: [ 
{ 
    out: 'sample.dist', 
    in: 'test/sample/sample.php' 
  }, 
  ], 
    outdir: outdir, 
    bundle: true, 
    platform: 'node',
    external: ['require', 'fs', 'path'], 
    plugins: [ 
    usemin({ 
        read_only: false, 
        file_types: ['php', 'html'], 
        outdir: outdir, }) ], 
        format: 'iife', 
        minify: true, 
        target: ['es2022'] 
    }
)

Configuration Options

Here are the available configuration options:

  • read_only: If you want to run the tool without touching the files, you can set read_only to true. By default, it is set to false.
  • file_types: Choose the file types you wish to claim as Usemin files to process them. By default, it is set to ['php', 'html'].
  • outdir: Where you wish for dist files to be placed. By default, it is set to outdir.``