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

贡献

如果你还没有这样做，请花点时间阅读我们的贡献指南。

贡献

许可证

« 上一页