# coffee-loader

> coffee loader module for webpack

Latest version **5.0.0** (published 2024-01-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install coffee-loader
pnpm add coffee-loader
yarn add coffee-loader
bun add coffee-loader
```

## Health

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

Positive: no vulnerabilities; high maintenance score.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 5.0.0 |
| Published | 2024-01-15 |
| First published | 2012-03-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 18.12.0 |
| Dependencies | 0 |
| Unpacked size | 9.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 142 |
| Author | Tobias Koppers @sokra |
| Maintainers | evilebottnawi, sokra, jhnns |
| Keywords | webpack |

## Links

- npm: https://www.npmjs.com/package/coffee-loader
- Repository: https://github.com/webpack-contrib/coffee-loader
- Issues: https://github.com/webpack-contrib/coffee-loader/issues
- Funding: https://opencollective.com/webpack
- npm.io page: https://npm.io/package/coffee-loader

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 5.0.0 (latest) — 2024-01-15
- 4.0.0 — 2022-05-18
- 3.0.0 — 2021-05-11
- 2.0.0 — 2020-12-22
- 1.0.1 — 2020-10-09
- 1.0.0 — 2020-05-22
- 0.9.0 — 2017-10-25
- 0.8.0 — 2017-08-23
- 0.7.3 — 2017-02-25
- 0.7.2 — 2014-05-14
- 0.7.1 — 2014-03-14
- 0.7.0 — 2014-02-04
- 0.6.1 — 2014-01-23
- 0.6.0 — 2013-03-25
- 0.5.0 — 2013-02-01
- … 10 more at https://npm.io/package/coffee-loader/versions

## README

<div align="center">
  <img width="160" height="160" src="https://cdn.worldvectorlogo.com/logos/coffeescript.svg">
  <a href="https://github.com/webpack/webpack">
    <img width="200" height="200" hspace="20" src="https://webpack.js.org/assets/icon-square-big.svg">
  </a>
</div>

[![npm][npm]][npm-url]
[![node][node]][node-url]
[![tests][tests]][tests-url]
[![coverage][cover]][cover-url]
[![discussion][discussion]][discussion-url]
[![size][size]][size-url]

# coffee-loader

Compile [CoffeeScript](https://coffeescript.org/) to JavaScript.

## Getting Started

To begin, you'll need to install `coffeescript` and `coffee-loader`:

```console
npm install --save-dev coffeescript coffee-loader
```

or

```console
yarn add -D coffeescript coffee-loader
```

or

```console
pnpm add -D coffeescript coffee-loader
```

Then add the plugin to your `webpack` config. For example:

**file.coffee**

```coffee
# Assignment:
number   = 42
opposite = true

# Conditions:
number = -42 if opposite

# Functions:
square = (x) -> x * x

# Arrays:
list = [1, 2, 3, 4, 5]

# Objects:
math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x

# Splats:
race = (winner, runners...) ->
  print winner, runners

# Existence:
alert "I knew it!" if elvis?

# Array comprehensions:
cubes = (math.cube num for num in list)
```

**webpack.config.js**

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.coffee$/,
        loader: "coffee-loader",
      },
    ],
  },
};
```

Alternative usage:

```js
import coffee from "coffee-loader!./file.coffee";
```

And run `webpack` via your preferred method.

## Options

Type: `Object`
Default: `{ bare: true }`

Options for CoffeeScript. All possible options you can find [here](https://coffeescript.org/#nodejs-usage).

Documentation for the `transpile` option you can find [here](https://coffeescript.org/#transpilation).

> **Note**
>
> The `sourceMap` option takes a value from the `compiler.devtool` value by default.

> **Note**
>
> The `filename` option takes a value from webpack loader API. The option value will be ignored.

**webpack.config.js**

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.coffee$/,
        loader: "coffee-loader",
        options: {
          bare: false,
          transpile: {
            presets: ["@babel/env"],
          },
        },
      },
    ],
  },
};
```

## Examples

### CoffeeScript and Babel

From CoffeeScript 2 documentation:

> **Note**
>
> CoffeeScript 2 generates JavaScript that uses the latest, modern syntax.
> The runtime or browsers where you want your code to run might not support all of that syntax.
> In that case, we want to convert modern JavaScript into older JavaScript that will run in older versions of Node or older browsers; for example, `{ a } = obj` into `a = obj.a`.
> This is done via transpilers like Babel, Bublé or Traceur Compiler.

You'll need to install `@babel/core` and `@babel/preset-env` and then create a configuration file:

```console
npm install --save-dev @babel/core @babel/preset-env
echo '{ "presets": ["@babel/env"] }' > .babelrc
```

**webpack.config.js**

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.coffee$/,
        loader: "coffee-loader",
        options: {
          transpile: {
            presets: ["@babel/env"],
          },
        },
      },
    ],
  },
};
```

### Literate CoffeeScript

For using Literate CoffeeScript you should setup:

**webpack.config.js**

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.coffee$/,
        loader: "coffee-loader",
        options: {
          literate: true,
        },
      },
    ],
  },
};
```

## Contributing

Please take a moment to read our contributing guidelines if you haven't yet done so.

[CONTRIBUTING](./.github/CONTRIBUTING.md)

## License

[MIT](./LICENSE)

[npm]: https://img.shields.io/npm/v/coffee-loader.svg
[npm-url]: https://npmjs.com/package/coffee-loader
[node]: https://img.shields.io/node/v/coffee-loader.svg
[node-url]: https://nodejs.org
[tests]: https://github.com/webpack-contrib/coffee-loader/workflows/coffee-loader/badge.svg
[tests-url]: https://github.com/webpack-contrib/coffee-loader/actions
[cover]: https://codecov.io/gh/webpack-contrib/coffee-loader/branch/master/graph/badge.svg
[cover-url]: https://codecov.io/gh/webpack-contrib/coffee-loader
[discussion]: https://img.shields.io/github/discussions/webpack/webpack
[discussion-url]: https://github.com/webpack/webpack/discussions
[size]: https://packagephobia.now.sh/badge?p=coffee-loader
[size-url]: https://packagephobia.now.sh/result?p=coffee-loader

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