npm 包 broccoli-coffee 使用教程

什么是 broccoli-coffee ？

broccoli-coffee 是一个基于 broccoli 的插件，可以将 coffee script 构建为 JavaScript。Broccoli 是一个非常优秀的构建工具， 它的核心原理是根据输入的目录结构构建输出目录结构，而不是依赖配置文件来管理构建过程。这使得构建过程非常灵活，而且更接近开发者的实际需求，因此受到了广泛的欢迎。

broccoli-coffee 插件可以让我们在构建过程中使用 coffee script 来编写 JS 代码，这对于习惯了 coffee script 的开发者来说非常方便。

如何使用 broccoli-coffee ？

首先安装 broccoli-coffee

--- ------- --------------- ----------

在构建脚本中引入 broccoli-coffee 并使用

--- ------------- - ---------------------------

--- ------ - -------------------- -
  -- ------
---

-------------- - -------

在上面的代码中，src 目录是包含 coffee script 文件的目录，我们通过 compileCoffee 将 coffee script 构建为 JavaScript 代码，并将结果保存到 jsTree 变量中。

配置选项

broccoli-coffee 支持一些配置选项，我们可以使用这些选项来定制构建流程，使得构建过程更加灵活。

--- ------ - -------------------- -
  ----- ----- -- ----- --
  ------- ----- -- ---- -- --------
  ----------- ------------ -- ----- -- ----
  ----------------- ----- -- ---------------
  ---------------- -
    -------- ----- -- ---------------
    ----------- ------- -------- -- -------------------
    -------------- ------------ -- - -- ---- ------
      ------ ---------------------------------- --- ---
    --
    -------------- ------------------- -- -------------
    --------------- ------- -- -------- ----- -----
  -
---

示例代码

下面是一个使用 broccoli-coffee 的示例：

- ----------------

------ --- ---- -----
------ --- ---- -----------

--- -----
  --- -------
  ------- - -- ------
--

通过下面的代码，我们将上面的 coffee script 文件构建为 JavaScript 文件：

--- ------------- - ---------------------------
--- ------------------ - ----------------------------------------------
--- ---------- - --------------------------------
--- ---------------- - ------------------------------

--- ------ - -------------------- -
  ----- -----
  ----------- ------------
  ----------------- -----
  ---------------- -
    -------- -----
    ----------- ------- --------
    -------------- ------------ -- -
      ------ ---------------------------------- --- ---
    --
    -------------- -------------------
    --------------- -------
  -
---

--- ---------- - --------------------- ---------

-------------- - -----------------------------

参考文献：

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60665

阅读全文

猜你喜欢

  • jQuery.parseHTML()方法

    在Web前端开发中，经常会遇到需要处理HTML字符串的情况。而jQuery库中的parseHTML()方法就是用来将一个字符串转换为DOM元素的方法。本文将详细介绍parseHTML()方法的用法及示...

    6 年前
  • npm 包 ember-moment 使用教程

    介绍 Ember.js 是一款使用 JavaScript 构建 Web 应用程序的前端框架，而 ember-moment 就是一个用于在 Ember 应用中使用 moment.js 库的插件。

    6 年前
  • npm 包 ember-cli-mirage 使用教程

    Ember-cli-mirage 是一个用于测试 Ember.js 应用程序的 npm 包。它允许您模拟出许多不同的场景，如在后端尚未准备好时的 API 接口、异常情况、并发访问等等。

    6 年前
  • npm 包 broccoli-templater 使用教程

    简介 Broccoli-templater 是一个基于 Broccoli 核心的插件，它可以让开发者在开发过程中更方便地使用模板引擎。使用它可以快速地编写出符合要求的网页效果，并减少代码量和开发时间。

    6 年前
  • NPM 包 fastboot-express-middleware 使用教程

    介绍 如果您的应用程序使用了 Ember.js 框架，那么您可能需要在服务器端渲染您的应用程序以提高性能。Fastboot 是一个渲染引擎，它可以在服务器端渲染您的应用程序。

    6 年前
  • npm 包 jquery-deferred 使用教程

    jQuery Deferred 是一种非常强大的 JavaScript 库，它可以帮助开发者管理异步流程，同时提高代码可读性和可维护性。 在前端开发中，jQuery Deferred 最常用于处理 A...

    6 年前
  • npm 包 najax 使用教程

    najax 是一个轻量级的 jQuery Ajax 替代品，可以通过 npm 包管理器安装并使用。najax 支持常见的 Ajax 操作，并且使用起来非常简单。在本文中，我们将介绍如何安装和使用 na...

    6 年前
  • npm 包 fastboot 使用教程

    前言 在开发前端应用的过程中，我们常常需要考虑到 SEO 和首屏渲染的性能问题。而快速的服务端渲染技术已经变得越来越流行。本文将介绍一款使用 Node.js 进行服务端渲染的 npm 包 fastbo...

    6 年前
  • npm 包 fastboot-transform 使用教程

    前言 网页性能优化一直是前端开发者关注的热点话题。其中，改善网页的首次加载速度是尤为重要的一环。为了缩短首次加载时间，前端开发人员需要深入了解多个方面，如资源体积、资源压缩、编译优化等。

    6 年前
  • npm 包 ember-sinon 使用教程

    在前端开发中，我们经常需要进行单元测试和集成测试，而 Sinon.js 是一个流行的 JavaScript 测试框架，它可以模拟 HTTP 请求、模拟定时器、模拟事件等常见场景。

    6 年前
  • 使用 Ember-maybe-import-regenerator-for-testing npm 包的技巧与指导

    在前端开发过程中，我们常常需要测试我们的代码。但是，测试代码也有它的限制。比如，我们在使用 generator 函数的时候，测试代码可能会因为不支持 generator 函数而失败。

    6 年前
  • npm 包 ember-cli-fastboot 使用教程

    简介 Ember-cli-fastboot 是一个开源的 npm 包，它使得使用 Ember.js 开发的应用程序能够在服务器上渲染，而不是必须在浏览器中运行。这意味着可以创建更好的 SEO，更好的性...

    6 年前
  • npm 包 ember-cli-addon-tests 使用教程

    前言 对于前端开发者来说，使用 npm 包是非常常见和重要的一件事情。其中，ember-cli-addon-tests 是一个非常实用的 npm 包，可以帮助我们在开发 Ember.js 插件时快速编...

    6 年前
  • npm 包 ember-fetch 使用教程

    ember-fetch 是一个基于 fetch 规范的轻量级网络请求库，适用于 Ember.js 前端框架。它支持 Promise API、拦截器、请求和响应转换器等功能。

    6 年前
  • npm 包 ember-native-dom-helpers 使用教程

    前言 在开发一个 Web 应用时，我们通常会使用前端框架来加速开发、提高可维护性和性能。Ember 是一个流行的前端框架，它提供了用于管理应用程序状态和数据的强大和高度抽象的工具。

    6 年前
  • npm 包 ember-root-url 使用教程

    前言 ember-root-url 是一个 npm 包，它可以帮助你获取 Ember.js 应用程序的根 URL。如果你使用 Ember.js 开发 Web 应用程序，那么确保应用程序能够正确生成 U...

    6 年前
  • npm 包 Ember-Decorators 使用教程

    什么是 Ember-Decorators？ Ember-Decorators 是一个为 Ember.js 应用提供了基于装饰器的语法糖的 npm 包，它可以帮助开发者更快速、方便、直观地编写 Embe...

    6 年前
  • npm 包 copy-dereference 使用教程

    什么是 copy-dereference？ copy-dereference 是一个 npm 包，专门用于复制 Node.js 对象中的 Circular reference。

    6 年前
  • npm 包 broccoli-filter 使用教程

    npm 包 broccoli-filter 使用教程 简介 broccoli-filter 是一个 npm 包，它提供了一个很方便的 API 用于过滤并转换文件。broccoli-filter 适用于...

    6 年前
  • npm 包 ember-qunit-assert-helpers 的使用教程

    前言 ember-qunit-assert-helpers 是一个方便的测试辅助包，它包含了一些测试时经常使用的断言函数，能够提高测试效率和可读性。本文将介绍如何安装和使用这个包，并提供一些示例代码。

    6 年前

相关推荐

    暂无文章