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

Question

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

Answer 1

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

假设您要在main.coffee included-file.coffee main.coffee ：

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

someVar = ...
exports.someVar = someVar

在main.coffee您可以说：

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

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

Answer 2

coffeescript-concat怎么样？

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

它使您可以轻松地将CoffeeScript代码保存在单独的单元中，并且仍可轻松运行它们。 您可以保持源在逻辑上分离，而不必将它们放在一起运行或嵌入到网页中。 此外，coffeescript-concat将为您提供单个源文件，可以轻松编译为单个Javascript文件。

Answer 3

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

解决方案评论

构建工具+导入预处理器

如果您想要的是在浏览器中运行的单个JS文件，我建议使用像Grunt （或Gulp ，或Cake ，或Mimosa或任何其他 ）的构建工具来预处理您的Coffeescript，以及包含/ 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的$.getScript
• Vanilla AJAX + eval
• 你自己实施的AMD

Answer 4

你可以尝试这个库来解决同样的问题咖啡 - 搅拌它非常简单。 只需键入#include以及要包含的文件的名称

#include MyBaseClass.coffee

有关详细信息，请访问http://beastjavascript.github.io/Coffee-Stir/

Answer 5

我发现在处理它们之前使用“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/')

2015年2月25日的gulp-concat可在此网址获取。

Answer 6

Rails使用sprockets来执行此操作，此语法已适用于https://www.npmjs.org/package/grunt-sprockets-directives 。 对我来说效果很好。