阅读(1552) 赞(1)

Webpack coffee-loader

2023-05-19 17:50:14 更新

Compile CoffeeScript to JavaScript.

起步

安装 coffeescript 和 coffee-loader：

npm install --save-dev coffeescript coffee-loader

然后添加 plugin 到 webpack 配置文件. 例：

file.coffe

# 任务：
number   = 42
opposite = true

# 条件：
number = -42 if opposite

# 函数：
square = (x) -> x * x

# 数组：
list = [1, 2, 3, 4, 5]

# 对象：
math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x

# Splats：
race = (winner, runners...) ->
  print winner, runners

# 存在性：
alert "I knew it!" if elvis?

# 数组推导（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é or 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,
        },
      },
    ],
  },
};