Javascript 有没有办法在咖啡脚本中包含文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7718121/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a way to include file in coffee script?
提问by Mathieu Mahé
I'd like to know if there is a way to include a file in a coffee script.
Something like #includein C or requirein PHP...
我想知道是否有办法在咖啡脚本中包含文件。像#include在 C 或requirePHP 中的东西......
采纳答案by Jason Reis
How about coffeescript-concat?
coffeescript-concatis a utility that preprocesses and concatenates CoffeeScript source files.
It makes it easy to keep your CoffeeScript code in separate units and still run them easily. You can keep your source logically separated without the frustration of putting it all together to run or embed in a web page. Additionally, coffeescript-concat will give you a single sourcefile that will easily compile to a single Javascript file.
coffeescript-concat是一个预处理和连接 CoffeeScript 源文件的实用程序。
它可以很容易地将您的 CoffeeScript 代码保存在单独的单元中，并且仍然可以轻松地运行它们。您可以在逻辑上保持源代码分离，而不必担心将它们放在一起运行或嵌入到网页中。此外，coffeescript-concat 将为您提供一个源文件，可以轻松编译为单个 Javascript 文件。
回答by jerico
If you use coffeescript with node.js (e.g. when using the commandline tool coffee) then you can use node's require()function exactly as you would for a JS-file.
如果您将 coffeescript 与 node.js 一起使用（例如在使用命令行工具时coffee），那么您可以require()完全像使用 JS 文件一样使用 node 的功能。
Say you want to include included-file.coffeein main.coffee:
假设您想包含included-file.coffee在main.coffee：
In included-file.coffee: declare and export objects you want to export
在included-file.coffee：声明和导出要导出的对象
someVar = ...
exports.someVar = someVar
In main.coffeeyou can then say:
在main.coffee你然后说：
someVar = require('included-file.coffee').someVar
This gives you clean modularization and avoids namespace conflicts when including external code.
这为您提供了干净的模块化，并在包含外部代码时避免了命名空间冲突。
回答by ejoubaud
Tl;DR: Browserify, possibly with a build tool like Grunt...
Tl;DR: Browserify，可能使用像Grunt这样的构建工具......
Solutions review
解决方案
Build tool + import pre-processor
构建工具+导入预处理器
If what you want is a single JS file to be run in the browser, I recommend using a build tool like Grunt(or Gulp, or Cake, or Mimosa, or any other) to pre-process your Coffeescript, along with an include/require/import module that will concatenate included files into your compiled output, like one of these:
如果您想要在浏览器中运行单个 JS 文件，我建议使用像Grunt（或Gulp、Cake、Mimosa或任何其他）这样的构建工具来预处理您的 Coffeescript，以及一个包含/将包含的文件连接到编译输出中的 require/import 模块，例如以下之一：
- Browserify: probably the rising standard and my personal favourite, lets you to use Node's
exports/requireAPI in your code, then extracts and concatenates everything required into a browser includable file. Exists for Grunt, Gulp, Mimosaand probably most others . To this day I reckon it is probably the best solution if you're after compatibility both Node and the browser (and even otherwise) - Some Rails Sprocket-like solutions like grunt-sprockets-directivesor gulp-includewill also work in a consistent way with CSS pre-processors (though those generally have their own importing mechanisms)
- Other solutions include grunt-includesor grunt-import
- Browserify：可能是不断上升的标准，也是我个人的最爱，让您可以
exports/require在代码中使用 Node 的API，然后将所需的所有内容提取并连接到浏览器可包含的文件中。存在于Grunt、Gulp、Mimosa和大多数其他程序中。直到今天，我认为如果您追求 Node 和浏览器的兼容性（甚至其他方面），这可能是最好的解决方案 - 一些类似于 Rails Sprocket 的解决方案，如grunt-sprockets-directives或gulp-include也将与 CSS 预处理器以一致的方式工作（尽管它们通常有自己的导入机制）
- 其他解决方案包括grunt-includes或grunt-import
Standalone import pre-processor
独立导入预处理器
If you'd rather avoid the extra-complexity of a build tool, you can use Browserifystand-alone, or alternatives not based on Node's requirelike coffeescript-concator Coffee-Stir
如果您想避免构建工具的额外复杂性，您可以使用Browserify独立，或不基于 Node 的替代方案，require如coffeescript-concat或Coffee-Stir
[Not recommended] Asynchronous dynamic loading (AJAX + eval)
[不推荐] 异步动态加载（AJAX + eval）
If you're writing exclusively for the browser and don't mind, or rather really want, your script being spread across several files fetched via AJAX, you can use a myriad of tools like:
如果您专门为浏览器编写代码并且不介意，或者更确切地说是真的想要，您的脚本分布在通过 AJAX 获取的多个文件中，您可以使用无数的工具，例如：
回答by Lpc_dark
You can try this library I made to solve this same problem coffee-stir its very simple. Just type #include and the name of the file that you want to include
你可以试试我为解决同样的问题而制作的这个库，咖啡搅拌非常简单。只需键入#include 和要包含的文件的名称
#include MyBaseClass.coffee
For details http://beastjavascript.github.io/Coffee-Stir/
回答by chrsc
I found that using "gulp-concat" to merge my coffee scripts before processing them did the trick. It can be easily installed to your project with npm.
我发现在处理它们之前使用“gulp-concat”合并我的咖啡脚本可以解决问题。它可以使用 npm 轻松安装到您的项目中。
npm install gulp-concat
npm install gulp-concat
Then edit your gulpfile.js:
然后编辑你的 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/')
})
This is the code I used to concatenate all my coffee scripts before gulp processed it into the final build Javascript. The only issue is the files are processed in alphabetical order. You can explicitly state which file to process to achieve your own file order, but you lose the flexibility of adding dynamic .coffee files.
这是我用来在 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-concatas of February 25th, 2015 is available at this url.
2015 年 2 月 25 日的gulp-concat可在此网址获得。
回答by aceofspades
Rails uses sprockets to do this, and this syntax has been adapted to https://www.npmjs.org/package/grunt-sprockets-directives. Works well for me.
Rails 使用链轮来执行此操作，并且此语法已适应https://www.npmjs.org/package/grunt-sprockets-directives。对我来说效果很好。
