web-dev-qa-db-ja.com

コーヒースクリプトにファイルを含める方法はありますか？

コーヒースクリプトにファイルを含める方法があるかどうかを知りたいです。何かのようなもの #includeはCで、requireはPHPで...

javascriptincludecoffeescript
25
Mathieu Mahé

coffeescript-concat についてはどうですか？

coffeescript-concatは、CoffeeScriptソースファイルを前処理および連結するユーティリティです。

CoffeeScriptコードを別々のユニットに保持し、それらを簡単に実行できるようにします。ソースをすべてまとめて実行したりWebページに埋め込んだりすることなく、ソースを論理的に分離しておくことができます。さらに、coffeescript-concatは、単一のJavascriptファイルに簡単にコンパイルできる単一のソースファイルを提供します。

18
Jason Reis

Node.jsでcoffeescriptを使用する場合（たとえば、コマンドラインツールcoffeeを使用する場合）、JSファイルの場合とまったく同じようにノードのrequire()関数を使用できます。

included-file.coffeeをmain.coffeeに含めたい場合：

included-file.coffee：で、エクスポートするオブジェクトを宣言およびエクスポートします

someVar = ...
exports.someVar = someVar

main.coffeeでは、次のように言うことができます。

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

これにより、クリーンなモジュール化が可能になり、外部コードを含めるときに名前空間の競合が回避されます。

18
jerico

Tl; DR： Browserify 、おそらく Grunt ...のようなビルドツールを使用.

ソリューションレビュー

ビルドツール+プリプロセッサのインポート

ブラウザで単一のJSファイルを実行したい場合は、 Grunt （または Gulp 、または Cake のようなビルドツールを使用することをお勧めします=、または Mimosa 、または その他 ）を使用してCoffeescriptを前処理し、include/require/importモジュールとともに、インクルードファイルをコンパイル済み出力に連結します。次のいずれか：

  • Browserify ：おそらく上昇する標準であり、私の個人的なお気に入りであり、Nodeのexports/requireコードでAPIを使用し、必要なものをすべて抽出して、ブラウザに含まれるファイルに連結します。 Grunt 、 Gulp 、 Mimosa およびその他のほとんどの場合に存在します。今日まで、あなたが互換性を望んでいるなら、おそらくそれが最良の解決策であると考えていますNodeとブラウザ（そしてそれ以外でも）
  • いくつかのRails grunt-sprockets-directives または gulp-include のようなスプロケットのようなソリューションは、CSS pre-プロセッサー（通常、独自のインポートメカニズムがあります）
  • 他のソリューションには grunt-includes または grunt-import が含まれます

スタンドアロンのインポートプリプロセッサ

ビルドツールの複雑さを避けたい場合は、 Browserify スタンドアロン、または coffeescript-concatのようなNodeのrequireに基づいていない代替手段を使用できます。 または Coffee-Stir

[非推奨]非同期動的読み込み（AJAX + eval）

ブラウザ専用に記述していて、AJAXを介してフェッチされた複数のファイルにスクリプトを分散することを気にしない、または実際に望んでいる場合は、次のような無数のツールを使用できます。

  • yepnope.js または Modernizr のyepnopeに基づく.load：yepnopeは、リモートローディングの代わりにビルドツールと連結を使用することを推奨するメンテナーによって廃止されることに注意してください。
  • RequireJS
  • HeadJS
  • jQuery 's $.getScript
  • バニラAJAX + eval
  • [〜＃〜] amd [〜＃〜] の独自の実装
3
Emmanuel Joubaud

この同じ問題を解決するために私が作ったこのライブラリを試してみることができます。 #includeとインクルードするファイルの名前を入力するだけです

#include MyBaseClass.coffee

詳細 http://beastjavascript.github.io/Coffee-Stir/

2
Lpc_dark

私は、「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日現在、このURLで入手できます。

1
chrsc

Railsはこれを行うためにスプロケットを使用し、この構文は https://www.npmjs.org/package/grunt-sprockets-directives に適合しています。私にとってはうまくいきます。

0
aceofspades