Compile CoffeeScript to JavaScript.
To begin, you'll need to install coffeescript
and coffee-loader
:
npm install --save-dev coffeescript coffee-loader
or
yarn add -D coffeescript coffee-loader
or
pnpm add -D coffeescript coffee-loader
Then add the loader to your webpack.config.js
. For example:
file.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
module.exports = {
module: {
rules: [
{
test: /\.coffee$/,
loader: "coffee-loader",
},
],
},
};
Alternative usage:
import coffee from "coffee-loader!./file.coffee";
Finally, run webpack
using the method you normally use (e.g., via CLI or an npm script).
Type: Object
Default: { bare: true }
You can find all available CoffeeScript options here.
For documentation on the transpile
option, see this section.
[!NOTE]
The
sourceMap
option takes a value from thecompiler.devtool
value by default.
[!NOTE]
The
filename
option takes a value from webpack loader API, but it's value will be ignored.
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.coffee$/,
loader: "coffee-loader",
options: {
bare: false,
transpile: {
presets: ["@babel/env"],
},
},
},
],
},
};
From CoffeeScript 2 documentation:
[!NOTE]
CoffeeScript 2 generates JavaScript using 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, modern JavaScript needs to be converted into an older JavaScript that will run in older versions of Node or older browsers; for example:
{ a } = obj
intoa = obj.a
. This conversion is done using transpilers like Babel, Bublé or Traceur Compiler.
You'll need to install @babel/core
and @babel/preset-env
and then create a configuration file:
npm install --save-dev @babel/core @babel/preset-env
echo '{ "presets": ["@babel/env"] }' > .babelrc
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.coffee$/,
loader: "coffee-loader",
options: {
transpile: {
presets: ["@babel/env"],
},
},
},
],
},
};
To use Literate CoffeeScript you should setup:
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.coffee$/,
loader: "coffee-loader",
options: {
literate: true,
},
},
],
},
};
Please take a moment to read our contributing guidelines if you haven't yet done so.