Как включить скрипты, расположенные внутри папки модулей узла?

у меня есть вопрос относительно лучшей практики для включения node_modules в HTML-сайт.

представьте, что у меня есть Bootstrap внутри моего node_modules папка. Теперь для дистрибутивной версии веб-сайта (живая версия), как бы я включил скрипт начальной загрузки и файлы CSS, расположенные внутри node_modules папка? Имеет ли смысл оставить Bootstrap внутри этой папки и сделать что-то вроде следующего?

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

или мне придется добавить правила в мой файл gulp, который затем скопируйте эти файлы в мою папку dist? Или было бы лучше, чтобы gulp каким-то образом полностью удалил локальный загрузочный файл из моего HTML-файла и заменил его версией CDN?

9 211
node.js npm twitter-bootstrap node-modules

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 будет автоматически извлечен из вашего

229

Я бы использовал модуль path npm, а затем сделал что-то вроде этого:

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

Как уже упоминалось jfriend00, вы не должны раскрывать свою структуру сервера. Вы можете скопировать файлы зависимостей проекта в что-то вроде public/scripts. Вы можете сделать это очень легко С dep-linker такой:

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

каталог 'node_modules' может быть не в текущем каталоге, поэтому вы должны решить путь динамически.

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

Я хочу обновить этот вопрос с более простым решением. Создайте символическую ссылку на 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')));
3

Я не нашел никаких чистых решений (я не хочу раскрывать источник всех моих node_modules), поэтому я просто написал сценарий Powershell, чтобы скопировать их:

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

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

Я сделал следующие изменения для автоматического включения файлов в индекс 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>
<% } %>
1

в моем приложении 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>
1

если вы хотите быстрое и простое решение (и у вас установлен глоток).

в своем gulpfile.js Я запускаю простую задачу copy paste, которая помещает любые файлы, которые мне могут понадобиться в

1