Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix: add default loaders, closes #459
  • Loading branch information
egoist committed Nov 20, 2021
1 parent c78ea9c commit 85cfd15
Show file tree
Hide file tree
Showing 5 changed files with 94 additions and 14 deletions.
39 changes: 39 additions & 0 deletions docs/README.md
Expand Up @@ -258,6 +258,45 @@ You can also minify the output, resulting into lower bundle sizes by using the `
tsup src/index.ts --minify
```

### CUstom loader

Esbuild loader list:

```ts
type Loader =
| 'js'
| 'jsx'
| 'ts'
| 'tsx'
| 'css'
| 'json'
| 'text'
| 'base64'
| 'file'
| 'dataurl'
| 'binary'
| 'default'
```
To use a custom loader via CLI flag:
```bash
tsup --loader ".jpg=base64" --loader ".webp=file"
```
Or via `tsup.config.ts`:
```ts
import { defineConfig } from 'tsup'

export default defineConfig({
loader: {
'.jpg': 'base64',
'.webp': 'file',
},
})
```

### What about type checking?

esbuild is fast because it doesn't perform any type checking, you already get type checking from your IDE like VS Code or WebStorm.
Expand Down
12 changes: 12 additions & 0 deletions src/cli-main.ts
Expand Up @@ -80,6 +80,8 @@ export async function main(options: Options = {}) {
.option('--platform <platform>', 'Target platform', {
default: 'node',
})
.option('--loader <ext=loader>', 'Specify the loader for a file extension')
.option('--no-config', 'Disable config file')
.action(async (files: string[], flags) => {
const { build } = await import('.')
Object.assign(options, {
Expand Down Expand Up @@ -113,6 +115,16 @@ export async function main(options: Options = {}) {
const define: any = flat(flags.define)
options.define = define
}
if (flags.loader) {
const loader = ensureArray(flags.loader)
options.loader = loader.reduce((result, item) => {
const parts = item.split('=')
return {
...result,
[parts[0]]: parts[1],
}
}, {})
}
await build(options)
})

Expand Down
44 changes: 32 additions & 12 deletions src/esbuild/index.ts
@@ -1,14 +1,7 @@
import fs from 'fs'
import path from 'path'
import type { InputOption } from 'rollup'
import { transform as transformToEs5 } from 'buble'
import {
build as esbuild,
BuildOptions,
BuildResult,
Plugin as EsbuildPlugin,
formatMessages,
} from 'esbuild'
import { build as esbuild, BuildResult, formatMessages } from 'esbuild'
import { NormalizedOptions, Format } from '..'
import { getDeps, loadPkg } from '../load'
import { log } from '../log'
Expand Down Expand Up @@ -76,6 +69,7 @@ export async function runEsbuild(
: format === 'esm'

const platform = options.platform || 'node'
const loader = options.loader || {}

try {
result = await esbuild({
Expand All @@ -90,6 +84,28 @@ export async function runEsbuild(
target: options.target === 'es5' ? 'es2016' : options.target,
footer: options.footer,
banner: options.banner,
loader: {
'.aac': 'file',
'.css': 'file',
'.eot': 'file',
'.flac': 'file',
'.gif': 'file',
'.jpeg': 'file',
'.jpg': 'file',
'.mp3': 'file',
'.mp4': 'file',
'.ogg': 'file',
'.otf': 'file',
'.png': 'file',
'.svg': 'file',
'.ttf': 'file',
'.wav': 'file',
'.webm': 'file',
'.webp': 'file',
'.woff': 'file',
'.woff2': 'file',
...loader,
},
mainFields:
platform === 'node'
? ['module', 'main']
Expand All @@ -106,10 +122,14 @@ export async function runEsbuild(
},
// esbuild's `external` option doesn't support RegExp
// So here we use a custom plugin to implement it
...(format !== 'iife' ? [externalPlugin({
patterns: external,
skipNodeModulesBundle: options.skipNodeModulesBundle,
})] : []),
...(format !== 'iife'
? [
externalPlugin({
patterns: external,
skipNodeModulesBundle: options.skipNodeModulesBundle,
}),
]
: []),
postcssPlugin({ css }),
sveltePlugin({ css }),
...(options.esbuildPlugins || []),
Expand Down
3 changes: 2 additions & 1 deletion src/index.ts
Expand Up @@ -104,7 +104,8 @@ const normalizeOptions = async (
}

export async function build(_options: Options) {
const config = await loadTsupConfig(process.cwd())
const config =
_options.config === false ? {} : await loadTsupConfig(process.cwd())

const configData =
typeof config.data === 'function' ? config.data(_options) : config.data
Expand Down
10 changes: 9 additions & 1 deletion src/options.ts
@@ -1,4 +1,4 @@
import type { BuildOptions, Plugin as EsbuildPlugin } from 'esbuild'
import type { BuildOptions, Plugin as EsbuildPlugin, Loader } from 'esbuild'
import type { InputOption } from 'rollup'

export type Format = 'cjs' | 'esm' | 'iife'
Expand Down Expand Up @@ -101,4 +101,12 @@ export type Options = {
* @default `node`
*/
platform?: 'node' | 'browser'
/**
* Esbuild loader option
*/
loader?: Record<string, Loader>
/**
* Disable config file with `false`
*/
config?: boolean
}

1 comment on commit 85cfd15

@vercel
Copy link

@vercel vercel bot commented on 85cfd15 Nov 20, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.