# @fab/compile

> Compiles a FAB intermediate directory into a single .FAB file

Latest version **0.3.2** (published 2020-01-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @fab/compile
pnpm add @fab/compile
yarn add @fab/compile
bun add @fab/compile
```

Provides the command `fab-compile`.

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.2 |
| Published | 2020-01-09 |
| First published | 2018-12-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=8.0.0 |
| Dependencies | 16 |
| Unpacked size | 16.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 572 |
| Author | Glen Maddern @geelen |
| Maintainers | evanderkoogh, geelen |
| Keywords | oclif |

## Links

- npm: https://www.npmjs.com/package/@fab/compile
- Repository: https://github.com/fab-spec/fab
- Issues: https://github.com/fab-spec/fab/issues
- npm.io page: https://npm.io/package/@fab/compile

## Dependencies (16)

- [chalk](https://npm.io/package/chalk.md) ^2.4.1
- [hasha](https://npm.io/package/hasha.md) ^5.0.0
- [tslib](https://npm.io/package/tslib.md) ^1
- [globby](https://npm.io/package/globby.md) ^9.0.0
- [sucrase](https://npm.io/package/sucrase.md) ^3.9.5
- [webpack](https://npm.io/package/webpack.md) ^4.29.0
- [mime-types](https://npm.io/package/mime-types.md) ^2.1.21
- [typescript](https://npm.io/package/typescript.md) ^3.3.1
- [@oclif/config](https://npm.io/package/@oclif/config.md) ^1
- [@types/globby](https://npm.io/package/@types/globby.md) ^8.0.0
- [@oclif/command](https://npm.io/package/@oclif/command.md) ^1
- [@types/fs-extra](https://npm.io/package/@types/fs-extra.md) ^8.0.0
- [path-browserify](https://npm.io/package/path-browserify.md) ^1.0.0
- [deterministic-zip](https://npm.io/package/deterministic-zip.md) ^1.0.5
- [@oclif/plugin-help](https://npm.io/package/@oclif/plugin-help.md) ^2
- [@sucrase/webpack-loader](https://npm.io/package/@sucrase/webpack-loader.md) ^2.0.0

## Alternatives

- [@salesforce/cli](https://npm.io/package/@salesforce/cli.md) — 389.7K weekly downloads
- [@mintlify/cli](https://npm.io/package/@mintlify/cli.md) — 208.9K weekly downloads
- [@grafana/e2e-selectors](https://npm.io/package/@grafana/e2e-selectors.md) — 128.7K weekly downloads
- [mintlify](https://npm.io/package/mintlify.md) — 112.0K weekly downloads
- [@intlayer/cli](https://npm.io/package/@intlayer/cli.md) — 22.8K weekly downloads

## Recent versions

- 0.3.2 (latest) — 2020-01-09
- 0.3.0-0 (prerelease) — 2019-03-28
- 0.3.1 — 2019-06-13
- 0.3.0 — 2019-06-06
- 0.2.2 — 2019-03-08
- 0.2.1 — 2019-02-13
- 0.2.0 — 2019-02-06
- 0.2.0-0 — 2019-02-01
- 0.1.6 — 2019-01-24
- 0.1.5 — 2019-01-24
- 0.1.4 — 2019-01-22
- 0.1.3 — 2019-01-22
- 0.1.2 — 2019-01-22
- 0.1.1 — 2019-01-15
- 0.1.0 — 2019-01-09
- … 12 more at https://npm.io/package/@fab/compile/versions

## README

---
name: "@fab/compile"
route: "/packages/fab-compile"
menu: Packages
---

# 💎 @fab/compile

```
yarn global add @fab/compile
npm install -g @fab/compile
```

```
fab-compile
  -i, --input=input          [default: .fab/intermediate] Intermediate FAB directory
  -b, --build-dir=build-dir  [default: .fab/build] Working FAB directory
  -o, --output=output        [default: fab.zip] Output FAB file
```

## FAB Intermediate Directory

`@fab/compile` operates on an "intermediate directory", by default located at `.fab/intermediate`, consisting of the following:

```
.fab/intermediate
  ├── _server
  │   ├──index.js       (server entry point)
  │   ├──production-settings.json
  │   └── **            (any other files needed for compilation)
  ├── _assets           (directory of assets for this release)
      └── **            (all files passed through untouched)
  └── **/*              (any other assets handled as "public")
```

## `_assets` vs public assets

Any file that's not in `_server` or `_assets` will be treated as a "public asset". During compilation, these files are fingerprinted and copied into the FAB under the `_assets/_public` directory, and server code is injected to map the old paths to the new ones:

```js
// .fab/intermediate/some-dir/some-file.xyz
//             copied to:
// .fab/build/_assets/_public/some-dir/some-file.a7b29c34fd.xyz

const render = async (request, settings) => {
  if (pathMatches(request, '/some-dir/some-file.xyz')) {
    // Fetch the asset using its /_assets/_public URL
    const response = await fetch(`https://your.app/_assets/_public/some-dir/some-file.a7b29c34fd.xyz`)
    // Delete its cache control header, since only _assets 
    // are safe to cache forever
    response.headers.delete('cache-control')
    // Pass through the response
    return response
  }
  
  // For all other requests, forward them to your app as expected
  return your_app.render(request, settings)
}
```

This has a nice consequence—_any_ static asset file structure can be compiled to a FAB, but those that make proper use of the `_asset` directory will have far better performance and caching behaviour.

## `_server/index.js` and `_server/production-settings.json`

These two files get compiled together to produce the two exports for a FAB's `server.js` file: `render` and `getProdSettings`. This process is done using a minimal Webpack configuration, so `require`-ing other files (potentially generated ones) is supported, but more complex source transformations (like using Babel) are not. If needed, pre-compile your source code before placing it in `.fab/intermediate`.

---
_Source: https://npm.io/package/@fab/compile · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._