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

然后将 loader 添加到你的 webpack.config.js 中。例如

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（例如，通过 CLI 或 npm 脚本）。

选项

类型: 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 需要转换为可以在旧版本 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"],
          },
        },
      },
    ],
  },
};

Literate CoffeeScript

要使用 Literate CoffeeScript，你应该进行设置

webpack.config.js

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

贡献

如果你尚未阅读，请花一点时间阅读我们的贡献指南。

贡献

许可证

« 上一页