coffee-loader

免責聲明： coffee-loader 是由社群成員維護的第三方套件，它可能沒有與 webpack 相同的支援、安全政策或授權，且並非由 webpack 維護。

將 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 loader 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 轉換為較舊的 JavaScript，以便在舊版本的 Node 或舊瀏覽器中執行；例如，將 { 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"],
          },
        },
      },
    ],
  },
};

Literate CoffeeScript

要使用 Literate CoffeeScript，您應該設定

webpack.config.js

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

貢獻

如果您尚未閱讀，請花點時間閱讀我們的貢獻指南。

貢獻

授權

« 上一頁