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

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

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

  

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

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

      

    Если вы использовали express с nodejs, статический маршрут прост как это:

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

    Затем любые запросы браузера из /scripts/xxx.js будут автоматически /scripts/xxx.js из вашего каталога dist .

    Примечание. Новые версии NPM помещают больше вещей на верхний уровень, не вложенные настолько глубоко, поэтому, если вы используете более новую версию NPM, тогда имена путей будут отличаться от указанных в вопросе OP и в текущем ответе. Но концепция все та же. Вы узнаете, где файлы физически расположены на вашем сервере, и вы создаете app.use() с помощью функции app.use() чтобы создать псевдо-путь к этим файлам, чтобы вы не подвергли действительную организацию файловой системы сервера клиент.


    Если вы не хотите создавать статический маршрут, подобный этому, то вам, вероятно, лучше просто копировать публичные сценарии в путь, который ваш веб-сервер обрабатывает как /scripts или любое другое название верхнего уровня, которое вы хотите использовать. Обычно вы можете выполнить эту часть процесса сборки / развертывания.

    Я бы использовал модуль 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 

    Теперь получите запрос на:

     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 

    и в узле add:

     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 } 

    Я сделал следующие изменения для AUTO-INCLUDE файлов в индекс 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++) { %>  <% } %> 

    В моем приложении Angular 2 у меня есть это в моем файле Index.html:

       

    Вот полный файл:

         TripMate - PPS                Loading...   

    Если вам нужно быстрое и простое решение (и у вас установлен gulp).

    В моем 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']); 

    Недостатком этого является то, что он не автоматизирован. Однако, если вам нужно всего несколько скриптов и стилей, скопированных (и сохраненных в списке), это должно выполнить эту работу.

    Давайте будем гением компьютера.