web-dev-qa-db-fra.com

Est-il possible d'inclure un fichier dans le script café?

J'aimerais savoir s'il existe un moyen d'inclure un fichier dans un script de type café… .. Quelque chose comme #include en C ou require en PHP ...

javascriptincludecoffeescript
24
Mathieu Mahé

Que diriez-vous de coffeescript-concat ?

coffeescript-concat est un utilitaire permettant de prétraiter et de concaténer Fichiers source CoffeeScript.

Il est facile de conserver votre code CoffeeScript dans des unités séparées et toujours les exécuter facilement. Vous pouvez garder votre source logiquement séparée sans la frustration de mettre tout cela ensemble pour courir ou intégrer une page web. De plus, coffeescript-concat vous donnera un seul fichier source qui sera facilement compilé en un seul fichier Javascript.

17
Jason Reis

Si vous utilisez coffeescript avec node.js (par exemple, lorsque vous utilisez l'outil de ligne de commande coffee), vous pouvez utiliser la fonction require() du nœud exactement comme pour un fichier JS.

Supposons que vous souhaitiez inclure included-file.coffee dans main.coffee:

Dans included-file.coffee: déclarez et exportez les objets que vous souhaitez exporter

someVar = ...
exports.someVar = someVar

Dans main.coffee, vous pouvez alors dire:

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

Cela vous donne une modularisation propre et évite les conflits d'espaces de noms lors de l'inclusion de code externe.

17
jerico

Tl; DR: Browserify , éventuellement avec un outil de construction tel que Grunt ...

Examen des solutions

Outil de construction + pré-processeur d'importation

Si vous souhaitez exécuter un seul fichier JS dans le navigateur, nous vous recommandons d’utiliser un outil de construction tel que Grunt (ou Gulp , ou Cake ou Mimosa , ou tout autre ) pour pré-traiter votre Coffeescript, avec un module include/require/import qui concaténera les fichiers inclus dans votre sortie compilée, comme l'un de ceux-ci:

  • Browserify : probablement la norme montante et mon favori personnel, vous permet d’utiliser l’API exports/require de Node dans votre code, puis d’extraire et de concaténer tout ce qui est nécessaire dans un fichier intégrable au navigateur. Existe pour Grunt , Gulp , Mimosa et probablement la plupart des autres. À ce jour, je pense que c’est probablement la meilleure solution si vous recherchez la compatibilité entre Node et le navigateur (et même autrement).
  • Certaines solutions de type Rails Sprocket telles que grunt-sprockets-directives ou gulp-include fonctionneront également de manière cohérente avec les pré-processeurs CSS (bien que ceux-ci aient généralement leurs propres mécanismes d'importation)
  • D'autres solutions incluent grunt-includes ou grunt-import

Pré-processeur d'importation autonome

Si vous préférez éviter la complexité supplémentaire d'un outil de construction, vous pouvez utiliser Browserify stand-alone, ou des alternatives non basées sur la variable require de Node, comme coffeescript-concat ou Coffee-Stir

[Non recommandé] Chargement dynamique asynchrone (AJAX + eval)

Si vous écrivez exclusivement pour le navigateur et que cela ne vous gêne pas, ou si vous voulez vraiment, que votre script soit réparti sur plusieurs fichiers récupérés via AJAX, vous pouvez utiliser une multitude d'outils tels que:

  • yepnope.js ou Modernizr . Chargement basé sur yepnope: Veuillez noter que yepnope est maintenant déconseillé par son responsable, qui recommande d'utiliser des outils de compilation et la concaténation au lieu du téléchargement.
  • RequireJS
  • HeadJS
  • jQuery 's's $.getScript
  • Vanille AJAX + eval
  • votre propre implémentation de AMD
3
Emmanuel Joubaud

Vous pouvez essayer cette librairie que j'ai faite pour résoudre le même problème coffee-stir 

#include MyBaseClass.coffee

Pour plus de détails http://beastjavascript.github.io/Coffee-Stir/

2
Lpc_dark

J'ai trouvé que le fait d'utiliser "gulp-concat" pour fusionner mes scripts de café avant de les traiter a fait l'affaire. Il peut être facilement installé sur votre projet avec npm.

npm install gulp-concat

Puis éditez votre fichier 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/')
})

C'est le code que j'ai utilisé pour concaténer tous mes scripts café avant que gulp ne le traite dans la version finale de Javascript. Le seul problème est que les fichiers sont traités par ordre alphabétique. Vous pouvez indiquer explicitement le fichier à traiter pour obtenir votre propre ordre de fichiers, mais vous perdez la flexibilité d'ajouter des fichiers dynamiques .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 à partir du 25 février 2015 est disponible à cette adresse.

1
chrsc

Pour ce faire, Rails utilise des pignons et cette syntaxe a été adaptée pour https://www.npmjs.org/package/grunt-sprockets-directives Fonctionne bien pour moi.

0
aceofspades