Am si eu o intrebare privind cele mai bune practici pentru includerea node_modules
într-un site HTML.
Imaginați-am Bootstrap în interiorul meu node_modules
folder. Acum pentru versiunea de producție a site-ului, cum aș include Bootstrap script și CSS fișiere situat în interiorul node_modules
folder? Are sens să plece Bootstrap în interiorul acel folder și de a face ceva, cum ar fi următoarele?
<script src="./node_modules/bootstrap/dist/bootstrap.min.js"></script>
Sau ar trebui să adăugați reguli pentru a-mi înghițitură de fișiere care apoi copiați aceste fișiere în folderul dist? Sau ar fi mai bine să înghită cumva elimina complet locală bootstrap din fișier HTML și înlocuiți-l cu CDN versiune?
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()cu
express.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>
Noroc...