Як включити скрипти, розташовані всередині папки node_modules?

У мене є питання щодо найкращої практики щодо включення node_modulesна веб-сайт HTML.

Уявіть, що у мене в node_modulesпапці є Bootstrap . Тепер для виробничої версії веб-сайту, як би я включив скрипт Bootstrap і CSS-файли, розташовані всередині node_modulesпапки? Чи є сенс залишити Bootstrap всередині цієї папки і зробити щось на зразок наступного?

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

Або мені доведеться додати правила до свого файлу gulp, який потім копіює ці файли в мою папку dist? Або найкраще дозволити gulp якось повністю видалити локальний завантажувальний файл з мого HTML-файлу та замінити його версією CDN?

Зазвичай, ви не хочете розкривати будь-який свій внутрішній шлях про те, як ваш сервер структурований до зовнішнього світу. Що ви можете зробити, це зробити /scriptsстатичний маршрут на вашому сервері, який витягує його файли з будь-якого каталогу, в якому вони трапляються. Отже, якщо ваші файли є "./node_modules/bootstrap/dist/". Тоді тег сценарію на ваших сторінках виглядає приблизно так:

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

Якщо ви використовували Express з nodejs, статичний маршрут такий же простий, як і цей:

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

Тоді будь-які запити веб-переглядача від /scripts/xxx.jsавтоматично надходитимуться з вашого distкаталогу за адресою __dirname + /node_modules/bootstrap/dist/xxx.js.

Примітка: новіші версії NPM ставлять більше речей на найвищий рівень, не вкладені настільки глибоко, тому якщо ви використовуєте більш нову версію NPM, то імена шляхів будуть іншими, ніж зазначено у запитанні ОП та в поточній відповіді. Але, концепція все одно та сама. Ви дізнаєтесь, де файли знаходяться фізично на вашому серверному накопичувачі, і ви зробите app.use()з, express.static()щоб зробити псевдо-шлях до цих файлів, щоб ви не піддавали клієнту фактичну організацію файлової системи сервера.

Якщо ви не хочете робити такий статичний маршрут, то вам, мабуть, краще просто скопіювати загальнодоступні скрипти на шлях, який ваш веб-сервер трактує як /scriptsабо будь-яке позначення верхнього рівня, яке ви хочете використовувати. Зазвичай ви можете зробити це копіювання частиною процесу збирання / розгортання.

Якщо ви хочете опублікувати лише один конкретний файл у загальнодоступному каталозі, а не все, що знаходиться в ньому, з ним, ви можете вручну створити окремі маршрути для кожного файлу, а не використовувати express.static()такі, як:

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

І код для створення маршруту для цього

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

Або, якщо ви хочете все-таки розмежувати маршрути для сценаріїв /scripts, ви можете зробити це:

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

І код для створення маршруту для цього

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

Я б використав модуль npm path, а потім зробив щось подібне:

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

ВАЖЛИВО: ми використовуємо path.join для приєднання шляхів до системного агностичного шляху, тобто у Windows та Unix у нас є різні роздільники шляху (/ і)

Як зазначає jfriend00, ви не повинні виставляти структуру вашого сервера. Ви можете скопіювати файли залежності вашого проекту на щось подібне public/scripts. Ви можете зробити це дуже легко за допомогою dep-linker, як це:

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

Якщо ви хочете швидкого та простого рішення (і у вас встановлений глоток).

У своєму виконанні gulpfile.jsя запускаю просту задачу для копіювання, яка вміщує будь-які файли, які мені можуть знадобитися, в ./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']);

Мінусом цього є те, що він не автоматизований. Однак якщо все, що вам потрібно, - це кілька скопійованих (і збережених у списку) декількох сценаріїв та стилів, це повинно зробити цю роботу.

Каталог 'node_modules' може не бути в поточному каталозі, тому вам слід вирішити шлях динамічно.

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

Я хочу оновити це питання простішим рішенням. Створіть символічне посилання на node_modules.

Найпростіший спосіб надати публічний доступ до node_modules - це створити символічне посилання, що вказує на ваші node_modules з вашого загальнодоступного каталогу. Символьне посилання зробить це так, ніби файли існують там, де створено посилання.

Наприклад, якщо сервер вузлів має код для обслуговування статичних файлів

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

і __dirname посилається на / path / to / app, щоб ваші статичні файли подавалися з / path / to / app / dist

і node_modules знаходиться у / path / to / app / node_modules, тоді створіть подібне посилання на mac / linux:

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

або так у Windows:

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

Тепер отримайте запит на:

node_modules/some/path 

отримає відповідь із файлом за адресою

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

що насправді файл у

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

Якщо ваш каталог за адресою / path / to / app / dist не є безпечним місцеположенням, можливо, через втручання в процес збирання з gulp або grunt, ви можете додати окремий каталог для посилання та додати новий serveStatic call, такий як:

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

і у вузлі додайте:

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

Я не знайшов чистих рішень (я не хочу виставляти джерело всіх своїх node_modules), тому я просто написав сценарій Powershell, щоб скопіювати їх:

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

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

Я зробив наведені нижче зміни для автоматичного включення файлів в індексі html. Так що коли ви додасте файл у папку, він автоматично вибирається з папки, без того, щоб ви включали файл у 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>
<% } %>

Це те, що я встановив на своєму expressсервері:

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

Щасти...