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

J'ai une question concernant les meilleures pratiques à inclure node_modulesdans un site Web HTML.

Imaginez que j'ai Bootstrap dans mon node_modulesdossier. Maintenant, pour la version de production du site Web, comment pourrais-je inclure le script Bootstrap et les fichiers CSS situés dans le node_modulesdossier? Est-il judicieux de laisser Bootstrap dans ce dossier et de faire quelque chose comme ceci?

<script src="./node_modules/bootstrap/dist/bootstrap.min.js"></script>

Ou devrais-je ajouter des règles à mon fichier gulp qui copient ensuite ces fichiers dans mon dossier dist? Ou serait-il préférable de laisser gulp supprimer complètement le bootstrap local de mon fichier HTML et le remplacer par la version CDN?

Habituellement, vous ne voulez exposer aucun de vos chemins internes pour la structure de votre serveur au monde extérieur. Ce que vous pouvez faire est de créer une /scriptsroute statique dans votre serveur qui récupère ses fichiers à partir de n'importe quel répertoire où ils se trouvent. Donc, si vos fichiers sont dedans "./node_modules/bootstrap/dist/". Ensuite, la balise de script dans vos pages ressemble à ceci:

<script src="/scripts/bootstrap.min.js"></script>

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

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

Ensuite, toutes les demandes du navigateur /scripts/xxx.jsseront automatiquement récupérées de votre distrépertoire à l'adresse __dirname + /node_modules/bootstrap/dist/xxx.js.

Remarque: les nouvelles versions de NPM placent plus de choses au niveau supérieur, pas imbriquées si profondément, donc si vous utilisez une version plus récente de NPM, les noms de chemin seront différents de ceux indiqués dans la question du PO 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 d'accès à ces fichiers afin de ne pas exposer l'organisation réelle du système de fichiers du serveur au client.

Si vous ne souhaitez pas créer une route statique comme celle-ci, il vaut probablement mieux copier les scripts publics vers un chemin que votre serveur Web traite comme /scriptsou quelle que soit la désignation de niveau supérieur que vous souhaitez utiliser. Habituellement, vous pouvez intégrer cette copie à votre processus de génération / déploiement.

Si vous souhaitez rendre public un seul fichier particulier dans un répertoire et que tout ce qui ne s'y trouve pas, vous pouvez créer manuellement des itinéraires individuels pour chaque fichier plutôt que d'utiliser, express.static()par exemple:

<script src="/bootstrap.min.js"></script>

Et le code pour créer un itinéraire pour cela

app.get('/bootstrap.min.js', function(req, res) {
    res.sendFile(__dirname + '/node_modules/bootstrap/dist/bootstrap.min.js');
});

Ou, si vous souhaitez toujours délimiter les routes pour les scripts avec /scripts, vous pouvez le faire:

<script src="/scripts/bootstrap.min.js"></script>

Et le code pour créer un itinéraire pour cela

app.get('/scripts/bootstrap.min.js', function(req, res) {
    res.sendFile(__dirname + '/node_modules/bootstrap/dist/bootstrap.min.js');
});

J'utiliserais le module path npm puis ferais quelque chose comme ceci:

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

IMPORTANT: nous utilisons path.join pour créer des chemins se joignant en utilisant le système de manière agnostique, c'est-à-dire que sur Windows et Unix, nous avons différents séparateurs de chemin (/ et)

Comme mentionné par jfriend00, vous ne devez pas exposer la structure de votre serveur. Vous pouvez copier vos fichiers de dépendance de projet dans 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

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

Dans mon, gulpfile.jsje lance une simple tâche de copier-coller qui place tous les fichiers dont j'ai besoin dans le ./public/modules/répertoire.

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 qu'il n'est pas automatisé. Cependant, si vous n'avez besoin que de quelques scripts et styles copiés (et conservés dans une liste), cela devrait faire l'affaire.

Le répertoire 'node_modules' ne se trouve peut-être pas dans le répertoire actuel, vous devez donc résoudre le chemin de manière dynamique.

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

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

Le moyen le plus simple d'accorder l'accès public à node_modules est de créer un lien symbolique pointant vers vos node_modules à partir de votre répertoire public. Le lien symbolique fera comme si les fichiers existaient où que le lien soit créé.

Par exemple, si le serveur de noeud 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 / vers / 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 windows:

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

Maintenant, obtenez une demande pour:

node_modules/some/path 

recevra une réponse avec le fichier à l'adresse

/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 en raison d'interférences d'un processus de construction avec gulp ou grunt, vous pouvez ajouter un répertoire séparé pour le lien et ajouter un nouvel appel serveStatic tel que:

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

et dans le noeud, ajoutez:

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

Je n'ai trouvé aucune solution propre (je ne veux pas exposer la source de tous mes modules node_modules) alors j'ai juste écrit 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 pour AUTO-INCLUDE les fichiers dans l'index html. De sorte que lorsque vous ajoutez un fichier dans le dossier, il sera automatiquement récupéré dans le 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++) { %>
   <script src="<%= jsfiles[i] %>"></script>
<% } %>

Voici ce que j'ai configuré sur mon expressserveur:

// app.js
const path = require('path');
const express = require('express');
const expressApp  = express();
const nm_dependencies = ['bootstrap', 'jquery', 'popper.js']; // keep adding required node_modules to this array.
nm_dependencies.forEach(dep => {
  expressApp.use(`/${dep}`, express.static(path.resolve(`node_modules/${dep}`)));
});

<!-- somewhere inside head tag -->
<link rel="stylesheet" href="bootstrap/dist/css/bootstrap.css" />

<!-- somewhere near ending body tag -->
<script src="jquery/dist/jquery.js" charset="utf-8"></script>
<script src="popper.js/dist/popper.js" charset="utf-8"></script>
<script src="bootstrap/dist/js/bootstrap.js" charset="utf-8"></script>

Bonne chance...