Comment inclure des scripts situés dans le dossier node_modules?

En règle générale, vous ne souhaitez pas exposer vos chemins internes quant à la structure de votre serveur par rapport au monde extérieur. Vous pouvez créer une route statique /scripts dans votre serveur qui récupère ses fichiers à partir du répertoire dans lequel ils se trouvent. Donc, si vos fichiers sont dans "./node_modules/bootstrap/dist/" . Ensuite, la balise de script dans vos pages ressemble à ceci:

Si vous utilisiez express avec nodejs, une route statique est aussi simple que cela:

 app.use('/scripts', express.static(__dirname + '/node_modules/bootstrap/dist/')); 

Ensuite, toutes les requêtes de navigateur de /scripts/xxx.js seront automatiquement extraites de votre répertoire dist .

Remarque: les versions plus récentes de NPM placent plus de choses au niveau supérieur, et ne sont pas nestedes si profondément que si vous utilisez une version plus récente de NPM, les noms de chemin seront différents de ceux indiqués dans la question OP et dans la réponse actuelle. Mais le concept est toujours le même. Vous découvrez où les fichiers se trouvent physiquement sur votre lecteur de serveur et vous créez un app.use() avec express.static() pour créer un pseudo-chemin vers ces fichiers afin de ne pas exposer l’organisation du système de fichiers du serveur à le client.

Si vous ne voulez pas créer une route statique comme celle-ci, il est préférable de copier les scripts publics sur un chemin que votre serveur Web considère comme /scripts ou sur la désignation de niveau supérieur que vous souhaitez utiliser. Généralement, vous pouvez effectuer cette copie dans votre processus de génération / déploiement.

Je voudrais utiliser le module chemin npm, puis faire quelque chose comme ceci:

 var path = require('path'); app.use('/scripts', express.static(path.join(__dirname, 'node_modules/bootstrap/dist'))); 

Comme mentionné par jfriend00, vous ne devriez pas exposer votre structure de serveur. Vous pouvez copier vos fichiers de dépendance de projet sur quelque chose comme public/scripts . Vous pouvez le faire très facilement avec dep-linker comme ceci:

 var DepLinker = require('dep-linker'); DepLinker.copyDependenciesTo('./public/scripts') // Done 

Le répertoire ‘node_modules’ peut ne pas se trouver dans le répertoire en cours, vous devez donc résoudre le chemin de manière dynamic.

 var bootstrap_dir = require.resolve('bootstrap') .match(/.*\/node_modules\/[^/]+\//)[0]; app.use('/scripts', express.static(bootstrap_dir + 'dist/')); 

Je souhaite mettre à jour cette question avec une solution plus simple. Créez un lien symbolique vers node_modules.

Le moyen le plus simple d’accorder un access public à node_modules est de créer un lien symbolique pointant vers vos node_modules depuis votre répertoire public. Le lien symbolique fera comme si les fichiers existaient partout où le lien est créé.

Par exemple, si le serveur de noeuds a du code pour servir des fichiers statiques

 app.use(serveStatic(path.join(__dirname, 'dist'))); 

et __dirname fait référence à / path / to / app afin que vos fichiers statiques soient servis depuis / path / to / app / dist

et node_modules se trouve dans / path / to / app / node_modules, puis créez un lien symbolique comme celui-ci sur mac / linux:

 ln -s /path/to/app/node_modules /path/to/app/dist/node_modules 

ou comme ça sur les fenêtres:

 mklink /path/to/app/node_modules /path/to/app/dist/node_modules 

Maintenant une demande pour:

 node_modules/some/path 

recevra une réponse avec le fichier à

 /path/to/app/dist/node_modules/some/path 

qui est vraiment le fichier à

 /path/to/app/node_modules/some/path 

Si votre répertoire dans / path / to / app / dist n’est pas un emplacement sûr, peut-être à cause des interférences d’un processus de génération avec gulp ou grunt, vous pouvez append un répertoire séparé pour le lien et append un nouvel appel

 ln -s /path/to/app/node_modules /path/to/app/newDirectoryName/node_modules 

et dans le noeud append:

 app.use(serveStatic(path.join(__dirname, 'newDirectoryName'))); 

Je n’ai trouvé aucune solution propre (je ne veux pas exposer la source de tous mes node_modules), alors je viens d’écrire un script Powershell pour les copier:

 $deps = "leaflet", "leaflet-search", "material-components-web" foreach ($dep in $deps) { Copy-Item "node_modules/$dep/dist" "static/$dep" -Recurse } 

J’ai fait les changements ci-dessous à AUTO-INCLUDE les fichiers dans l’index html. Ainsi, lorsque vous ajoutez un fichier dans le dossier, il sera automatiquement extrait du dossier, sans que vous ayez à inclure le fichier dans index.html

 //// THIS WORKS FOR ME ///// in app.js or server.js var app = express(); app.use("/", express.static(__dirname)); var fs = require("fs"), function getFiles (dir, files_){ files_ = files_ || []; var files = fs.readdirSync(dir); for (var i in files){ var name = dir + '/' + files[i]; if (fs.statSync(name).isDirectory()){ getFiles(name, files_); } else { files_.push(name); } } return files_; } //// send the files in js folder as variable/array ejs = require('ejs'); res.render('index', { 'something':'something'........... jsfiles: jsfiles, }); ///-------------------------------------------------- ///////// in views/index.ejs --- the below code will list the files in index.ejs <% for(var i=0; i < jsfiles.length; i++) { %>  <% } %> 

Dans mon application Angular 2, je l’ai dans mon fichier Index.html:

Voici le fichier complet:

                     Loading...   

Si vous voulez une solution rapide et facile (et vous avez installé Gulp).

Dans mon gulpfile.js une tâche de copie simple qui place tous les fichiers dont j’ai besoin dans le répertoire ./public/modules/ .

 gulp.task('modules', function() { sources = [ './node_modules/prismjs/prism.js', './node_modules/prismjs/themes/prism-dark.css', ] gulp.src( sources ).pipe(gulp.dest('./public/modules/')); }); gulp.task('copy-modules', ['modules']); 

L’inconvénient est que ce n’est pas automatisé. Cependant, si tout ce dont vous avez besoin est quelques scripts et styles copiés (et conservés dans une liste), cela devrait faire l’affaire.