coffee-loader

CoffeeScriptをJavaScriptにコンパイルします。

はじめに

開始するには、`coffeescript`と`coffee-loader`をインストールする必要があります。

npm install --save-dev coffeescript coffee-loader

または

yarn add -D coffeescript coffee-loader

または

pnpm add -D coffeescript coffee-loader

次に、プラグインを`webpack`の設定に追加します。例:

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

代替使用方法

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

そして、お好みの方法で`webpack`を実行します。

オプション

型: `Object` デフォルト: `{ bare: true }`

CoffeeScriptのオプション。考えられるすべてのオプションはこちらにあります。

`transpile`オプションのドキュメントはこちらにあります。

注記

`sourceMap`オプションはデフォルトで`compiler.devtool`の値を使用します。

注記

`filename`オプションはwebpackローダーAPIから値を取得します。オプションの値は無視されます。

webpack.config.js

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

例

CoffeeScriptとBabel

CoffeeScript 2ドキュメントから

注記

CoffeeScript 2は、最新のモダンな構文を使用するJavaScriptを生成します。コードを実行したいランタイムまたはブラウザが、そのすべての構文をサポートしていない場合があります。その場合、モダンなJavaScriptを、古いバージョンのNodeや古いブラウザで実行できる古いJavaScriptに変換する必要があります。たとえば、`{ a } = obj`を`a = obj.a`に変換します。これは、Babel、Bublé、またはTraceur Compilerなどのトランスパイラを使用して行われます。

`@babel/core`と`@babel/preset-env`をインストールし、設定ファイルを作成する必要があります。

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

リテラシーCoffeeScript

リテラシーCoffeeScriptを使用するには、次のように設定する必要があります。

webpack.config.js

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

貢献

まだ行っていない場合は、貢献ガイドラインをお読みください。

貢献

ライセンス

MIT