Cum pentru a include script-uri situate în interiorul node_modules folder?

De obicei, nu't vreau pentru a expune orice internă căi pentru modul în care server-ul dvs. este structurat în lumea de afară. Ce poți face cu un /script rută statică în server care preia fișierele sale din orice director se întâmplă să locuiască în. Deci, în cazul în care fișierele sunt în "./node_modules/bootstrap/dist/". Apoi, script-ul tag-ul în paginile dvs. arată ca aceasta:

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

Dacă ați fost folosind express cu nodejs, o rută statică este la fel de simplu ca acest lucru:

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

Apoi, orice browser cereri de la /scripts/xxx.js va fi automat preluat de la dist director la__dirname + /node_modules/bootstrap/dist/xxx.js`.

Notă: versiunile mai Noi de NPM pun mai multe lucruri la nivel de top, nu cuibărit atât de adânc, așa că, dacă utilizați o versiune mai nouă de NPM, atunci calea numele va fi diferit decât cel indicat în OP's de întrebare și de răspuns curent. Dar, conceptul este încă același. Vei afla în cazul în care fișierele sunt localizate fizic pe server conduce vehicule și de a face o aplicație.utilizarea()cuexpress.static()` pentru a face o pseudo-calea pentru aceste fișiere, astfel încât tu nu't expunerea efectivă server de fișiere de sistem organizației clientului.

Dacă tu nu't doresc să facă o rută statică place acest lucru, atunci're, probabil, mai bine doar copierea publice script-uri pentru a o cale care serverul web nu trata ca `/script-uri sau orice nivel de top denumire doriți să o utilizați. De obicei, puteți face acest lucru copierea parte de a construi/desfășurarea procesului.

Dacă doriți pentru a face doar un anumit fișier publice într-un director și nu tot ceea ce a găsit în acel director cu ea, atunci puteți crea manual rutele individuale pentru fiecare fișier, mai degrabă decât utiliza express.static (), cum ar fi:

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

Și codul pentru a crea un traseu pentru care

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

Sau, daca vrei sa mai delimita trasee pentru script-uri cu /script, ai putea face acest lucru:

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

Și codul pentru a crea un traseu pentru care

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

Mi-ar folosi calea npm module și apoi face ceva de genul asta:

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

După cum sa menționat de către jfriend00 tu nu ar trebui să-ți expui server structura. Ai putea copia proiectului de dependență fișiere la ceva de genul publice/script-uri`. Puteți face acest lucru foarte rapid cu dep-linker astfel:

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

Directorul 'node_modules' nu poate fi în directorul curent, așa că ar trebui să soluționeze calea de dinamic.

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

Dacă doriți o soluție rapidă și ușoară (și ai înghițitură instalat).

În gulpfile.jseu conduc un simplu copy paste sarcina care pune orice fișiere s-ar putea nevoie de în./publice/modulele/` director.

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']);

Dezavantajul la acest lucru este că e't automatizate. Cu toate acestea, dacă tot ce ai nevoie este de câteva scripturi și stiluri de copiat peste (și păstrate într-o listă), acest lucru ar trebui să facă treaba.

Vreau sa fac update la această întrebare cu o soluție mai ușoară. Creați un link simbolic la node_modules.

Cel mai simplu mod de a acorda accesul public la node_modules este de a crea o legătură simbolică arătând spre node_modules din cadrul director public. Symlink-ul va face ca în cazul în care există fișiere oriunde link-ul este creat.

De exemplu, dacă nodul server are cod pentru a servi fișiere statice

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

și __dirname se referă la /path/to/app, astfel încât fișierele statice sunt servite la /path/to/app/dist

și node_modules este la /path/to/app/node_modules, apoi a crea o legătură simbolică ca asta de pe mac/linux:

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

sau ca asta de pe windows:

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

Acum o cerere pentru:

node_modules/some/path 

va primi un răspuns cu dosarul la

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

care este de fapt fișierul de la

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

Dacă directorul de la /path/to/app/dist nu este un loc sigur, poate cauza interferențe de la un proces de a construi cu înghițitură sau mormăit, apoi ați putea adăuga un director separat pentru link-ul și se adaugă o nouă serveStatic apel, cum ar fi:

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

și în nod se adaugă:

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

Am't găsi orice soluții curate (I nu't doriți să expuneți sursa tuturor mea node_modules) asa ca am scris un script Powershell pentru a le copia:

$deps = "leaflet", "leaflet-search", "material-components-web"

foreach ($dep in $deps) {
    Copy-Item "node_modules/$dep/dist" "static/$dep" -Recurse
}

Am făcut mai jos modificări la AUTO-INCLUD fișiere în index html. Așa că, atunci când adăugați un fișier în folderul acesta va fi automat preluat de la dosar, fără a fi nevoie pentru a include fișierul în 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>
<% } %>

Aceasta este ceea ce am de configurare pe "express" server:

// 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>