[![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 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:

`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.

Documentation for the transpile option you can find here.

> 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

$3

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"],
},
},
},
],
},
};
`

$3

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

License

MIT

[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