有没有办法在咖啡脚本中包含文件？

Posted 2023-02-22

【中文标题】有没有办法在咖啡脚本中包含文件？

【英文标题】：Is there a way to include file in coffee script?

【发布时间】：2011-12-04 19:27:05

【问题描述】：

我想知道是否有办法在咖啡脚本中包含文件。 类似于 C 中的 #include 或 php 中的 require...

【问题讨论】：

见***.com/questions/6150455/…

【参考方案1】：

coffeescript-concat怎么样？

coffeescript-concat 是一个预处理和连接的实用程序 CoffeeScript 源文件。

它可以很容易地将您的 CoffeeScript 代码保存在单独的单元中，并且 仍然可以轻松运行它们。你可以保持你的源在逻辑上分开 没有将它们放在一起运行或嵌入的挫败感 一个网页。此外，coffeescript-concat 会给你一个 可以轻松编译为单个 javascript 文件的源文件。

【讨论】：

Jason 是正确的：您需要查看外部工具来执行此操作。这不是语言中包含的功能。

我不推荐coffeescript-concat，改为查看npmjs.org/package/grunt-sprockets-directives

【参考方案2】：

我发现在处理它们之前使用“gulp-concat”来合并我的咖啡脚本就可以了。它可以通过 npm 轻松安装到您的项目中。

npm install gulp-concat

然后编辑你的 gulpfile.js：

var gulp = require('gulp')
,coffee = require('gulp-coffee')
,concat = require('gulp-concat');

gulp.task('coffee', function()
  gulp.src('src/*.coffee')
    .pipe(concat('app.coffee')
    .pipe(coffee(bare: true).on('error', gulp.log))
    .pipe(gulp.dest('build/')
)

这是我在 gulp 将其处理为最终构建 Javascript 之前用于连接所有咖啡脚本的代码。唯一的问题是文件按字母顺序处理。您可以明确说明要处理的文件以实现您自己的文件顺序，但您会失去添加动态 .coffee 文件的灵活性。

gulp.src(['src/file3.coffee', 'src/file1.coffee', 'src/file2.coffee'])
  .pipe(concat('app.coffee'))
  .pipe(coffee(bare: true).on('error', gulp.log))
  .pipe(gulp.dest('build/')

gulp-concat 自 2015 年 2 月 25 日起可在此网址获得。

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。

干杯！我是新来这里做贡献的。我会编辑这个。

【参考方案3】：

你可以试试我制作的这个库来解决同样的问题coffee-stir 它非常简单。 只需输入#include 和要包含的文件的名称

#include MyBaseClass.coffee

了解详情 http://beastjavascript.github.io/Coffee-Stir/

【讨论】：

Coffee-stir 有几个缺点：1）它在处理后添加了多余的文本，因此您可以在管道中使用它（或者您必须以某种方式删除最后一行）2）它可以' t 直接编译成.JS

你是对的。如果我使用“require”它包括两个文件。

【参考方案4】：

Tl;DR：Browserify，可能使用像 Grunt 这样的构建工具...

解决方案审查

构建工具+导入预处理器

如果您想要在浏览器中运行单个 JS 文件，我建议使用像 Grunt（或 Gulp，或 Cake，或 Mimosa，或 any other）这样的构建工具预处理您的 Coffeescript，以及一个 include/require/import 模块，该模块会将包含的文件连接到您的编译输出中，例如以下之一：

Browserify：可能是上升的标准，也是我个人最喜欢的，让您可以在代码中使用 Node 的 exports/require API，然后将所需的所有内容提取并连接到浏览器包含的文件中。存在于Grunt、Gulp、Mimosa 以及可能大多数其他的。时至今日，我认为，如果您希望同时兼容 Node 和浏览器（甚至不兼容），这可能是最好的解决方案 一些类似 Rails Sprocket 的解决方案，如 grunt-sprockets-directives 或 gulp-include 也可以与 CSS 预处理器以一致的方式工作（尽管这些预处理器通常有自己的导入机制） 其他解决方案包括grunt-includes 或grunt-import

独立的导入预处理器

如果您希望避免构建工具的额外复杂性，您可以使用独立的Browserify，或不基于Node 的require 的替代方案，例如coffeescript-concat 或Coffee-Stir

[不推荐]异步动态加载（AJAX + eval）

如果您是专门为浏览器编写的，并且不介意，或者说真的希望您的脚本分布在通过 AJAX 获取的多个文件中，您可以使用多种工具，例如：

yepnope.js 或 Modernizr 的 .load 基于 yepnope：请注意，yepnope 现在已被其维护者弃用，他们建议使用构建工具和连接而不是远程加载 RequireJS HeadJS jQuery's $.getScript 原版 AJAX + 评估 你自己实现的AMD

【参考方案5】：

Rails 使用 sprockets 来执行此操作，并且此语法已适应 https://www.npmjs.org/package/grunt-sprockets-directives。很适合我。

【参考方案6】：

如果您将 coffeescript 与 node.js 一起使用（例如，使用命令行工具 coffee 时），那么您可以像使用 JS 文件一样使用 node 的 require() 函数。

假设您想在main.coffee 中包含included-file.coffee：

在included-file.coffee：声明并导出要导出的对象

someVar = ...
exports.someVar = someVar

然后你可以在main.coffee 中说：

someVar = require('included-file.coffee').someVar

这为您提供了清晰的模块化，并在包含外部代码时避免了命名空间冲突。

【讨论】：

如果不使用另一个插件 js 文件，你是怎么克服不进入浏览器的？

@Lpc_dark：这个解决方案是关于服务器上的 node.js。它在 node.js 不可用的浏览器中不起作用，除非您执行类似***.com/questions/5081191/… 的操作（不过我自己还没有尝试过）。

我发现这篇文章对这个解决方案很有用：Where Does Node.js And Require() Look For Modules?