Как включить скрипты, расположенные внутри папки node modules?
у меня есть вопрос, касающийся лучшей практики для включения node_modules
на веб-сайт HTML.
представьте, что у меня есть Bootstrap внутри моего node_modules
папка. Теперь для версии дистрибутива веб-сайта (живая версия), как бы я включил скрипт Bootstrap и CSS-файлы, расположенные внутри node_modules
папка? Имеет ли смысл оставить Bootstrap внутри этой папки и сделать что-то вроде следующего?
<script src="./node_modules/bootstrap/dist/bootstrap.min.js></script>
или мне нужно добавить правила в мой файл gulp, который затем скопируйте эти файлы в мою папку dist? Или лучше всего позволить gulp как-то полностью удалить локальный загрузочный файл из моего HTML-файла и заменить его версией CDN?
9 ответов
обычно вы не хотите выставлять какие-либо из ваших внутренних путей для того, как ваш сервер структурирован для внешнего мира. Что вы можете сделать /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
будет автоматически извлечен из вашего
Я бы использовал модуль path npm, а затем сделал бы что-то вроде этого:
var path = require('path');
app.use('/scripts', express.static(path.join(__dirname, 'node_modules/bootstrap/dist')));
Как упоминалось в jfriend00, вы не должны выставлять свою структуру сервера. Вы можете скопировать файлы зависимостей проекта в что-то вроде public/scripts
. Вы можете сделать это очень легко С dep-linker такой:
var DepLinker = require('dep-linker');
DepLinker.copyDependenciesTo('./public/scripts')
// Done
каталог "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
теперь запрос get для:
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, такой как:
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. Таким образом, при добавлении файла в папку он будет автоматически выбран из папки, без необходимости включать файл в индекс.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>
<% } %>
в моем приложении Angular 2 у меня есть это в моем индексе.HTML-файл:
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
вот полный файл:
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<title>TripMate - PPS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err) { console.error(err); });
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
если вы хотите быстрое и простое решение (и у вас установлен gulp).
в своем gulpfile.js
Я запускаю простую задачу вставки копии, которая помещает любые файлы, которые мне могут понадобиться в