Giter Club home page Giter Club logo

esbuild-config's Introduction

esbuild-config

Config files for esbuild.

Why?

esbuild is an incredible tool, that is using command line parameters as a configuration syntax. This is fine, but some people might prefer using a configuration file.

esbuild-config can transform a esbuild.config.json configuration file like this one:

{
  "entry": "./index.js",
  "outfile": "./bundle.js",
  "external": ["react", "react-dom"],
  "loader": { ".js": "jsx", ".png": "base64" },
  "minify": true
}

Into a set of parameters for esbuild:

--outfile=./bundle.js --minify --external:react --external:react-dom --loader:.js=jsx --loader:.png=base64 ./index.js

Which means that esbuild can read a static configuration by running it this way:

esbuild $(esbuild-config)

Usage

The esbuild-config command outputs a list of parameters based on a esbuild.config.json file, that can get passed to esbuild directly:

esbuild $(esbuild-config)

It detects the presence of esbuild.config.json in the current directory or the project root (using the presence of a package.json file). The same configuration format can also get defined in the package.json file, using the esbuild field.json` file.

A specific file path can also get passed as a parameter:

esbuild $(esbuild-config ./my-conf.json)

Syntax

esbuild-config doesn’t do any validation on the configuration values: it only converts JSON types into arguments that are compatible with the format esbuild uses for its arguments. This makes it independent from esbuild versions, assuming the format doesn’t change.

The only exception to this is the entry field, which gets converted into a list of file names (when an array is provided) or a single file name (when a string is provided).

This is how JSON types get converted:

{
  "entry": "./index.js",
  "outfile": "./bundle.js",
  "external": ["react", "react-dom"],
  "loader": { ".js": "jsx", ".png": "base64" },
  "minify": true
}

Output:

--outfile=./bundle.js --minify --external:react --external:react-dom --loader:.js=jsx --loader:.png=base64 ./index.js

Notice how the entry, ./index.js, has been moved to the end. esbuild-config also takes care of escaping the parameters as needed (e.g. by adding quotes).

Install

npm

The easiest way to install esbuild-config is through npm.

Install it globally using the following command:

npm install --global esbuild-config

Or add it to your project:

npm install --save-dev esbuild-config

See below for alternative installation methods.

Binaries

You can download the precompiled binaries from the release page.

Cargo

Install it with Cargo using the following command:

cargo install esbuild-config

From source

To clone the repository and build esbuild-config, run these commands (after having installed Rust):

git clone [email protected]:bpierre/esbuild-config.git
cd esbuild-config
cargo build --release

The compiled binary is at target/release/esbuild-config.

Contribute

# Run the app
cargo run

# Run the tests
cargo test

# Generate the code coverage report (install cargo-tarpaulin first)
cargo tarpaulin -o Html

FAQ

Doesn’t esbuild already support config files?

The recommended way to use a configuration file with esbuild is through its Node.js API, using a Node program as a configuration file:

const { build } = require('esbuild')

build({
  entryPoints: ['./index.js'],
  outfile: './bundle.js',
  external: ['react', 'react-dom'],
  loader: { '.js': 'jsx', '.png': 'base64' },
  minify: true,
}).catch((error) => {
  console.error(error)
  process.exit(1)
})

If it works for you, you don’t need esbuild-config: the esbuild module already comes bundled with this JS API. esbuild-config provides an alternative way to configure esbuild. Instead of using the esbuild API through Node.js, it converts a configuration file into command line parameters, that can be passed directly to the esbuild binary.

There are several reasons why you might want to use esbuild-config:

  • You prefer using JSON as a configuration language.
  • You prefer to have as much configuration as possible in the package.json.
  • You prefer to not launch Node at all in the process.

Special thanks

esbuild and its author obviously, not only for esbuild itself but also for its approach to install a platform-specific binary through npm, that esbuild-config is also using.

License

MIT

esbuild-config's People

Contributors

bpierre avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

esbuild-config's Issues

Good idea

Good idea!

We could even drop the package.json:esbuildConfig and check the package.json if no esbuild.config.json is present and no file path has been passed.

For the key, I think it would be safe to use "esbuild" directly, since esbuild doesn’t plan to support config files.

_Originally posted by @bpierre in htt

ARM64 builds

Hiya,

I am running MacOS on an M1 CPU, which is the arm64 architecture. I get the following error when I try to install deps that include esbuild-config.

% npm ci    
npm ERR! code 1
npm ERR! path /Users/aidan/dev/stedi/state/node_modules/esbuild-config
npm ERR! command failed
npm ERR! command sh -c node install.js
npm ERR! Unsupported platform: darwin arm64 LE

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/aidan/.npm/_logs/2021-09-27T23_17_30_176Z-debug.log

I'm not familiar enough with Rust to submit a potential PR to fix this, sorry!

Pull esbuild configuration from package.json entry

New Feature

For extra convenience (and to reduce the clutter of yet another project configuration file), add support for storing the esbuild configuration directly in the project's package.json file.

Something like:

package.json

  ...
  "esbuildConfig": {
    "entry": "./index.js",
    "outfile": "./bundle.js",
    "external": ["react", "react-dom"],
    "loader": { ".js": "jsx", ".png": "base64" },
    "minify": true
  },
  "scripts": {
    "build": "esbuild $(esbuild-config package.json:esbuildConfig)"
  },
  ...

[feature-request] Extend config

Would it be possible to add an "extend" property? I am trying to set up a monorepo with esbuild and this would make most common configuration very easy.

Good idea!

Good idea!

We could even drop the package.json:esbuildConfig and check the package.json if no esbuild.config.json is present and no file path has been passed.

For the key, I think it would be safe to use "esbuild" directly, since esbuild doesn’t plan to support config files.

Originally posted by @bpierre in #5 (comment)

configuration from package.json

Very nice project. Congratulations.
Would it be possible to get the configurations from the pachage.json?
Like this:

{
  "name": "package",
  "version": "0.2.0",
  "license": "MIT",
  "esbuild":  {
    "entry": "./index.js",
    "outfile": "./bundle.js",
    "external": ["react", "react-dom"],
    "loader": { ".js": "jsx", ".png": "base64" },
    "minify": true
  }
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.