Экспресс: Как использовать шрифт с потрясающим шрифтом в качестве статического контента?

Я использую Express для размещения статического контента на своем сайте и хочу добавить FontAwesome (npm install font-awesome). Однако в css Font-Awesome ссылки на файлы шрифтов дополняются строкой запроса, содержащей информацию о версиях, которую экспресс не понимает.

Кто-нибудь сталкивался с этим и нашел решение? Есть ли простой способ заставить экспресс игнорировать qs для статического контента?

var express = require('express')
var app = express()

app.use('/static', express.static('./node_modules/font-awesome/css'))
app.use('/static', express.static('./node_modules/font-awesome/fonts'))

// response 200 | /static/font-awesome.min.css
// error 404    | /static/fontawesome--webfont.woff?v=4.6.3

Обновление Как указывает @Denys Séguret, это не те вопросы, как я думал. Фактический запрос для /fonts/fontawesome--webfont.woff?v=...

Решение

app.use('/fonts', express.static('./node_modules/font-awesome/fonts'))

node.js express static-content
person Aage Torleif    schedule 25.07.2016    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Когда ваш браузер запрашивает /static/fontawesome--webfont.woff?v=4.6.3, сервер может игнорировать часть ?v=xxx. И это то, что делает модуль express.static. Смысл этой части в том, чтобы запретить браузерам и прокси-серверам использовать старую версию файла.

Так что проблема не там, где вы думаете. Проблема в том, что вы сопоставляете статический route с двумя серверами. Первый не находит файл и выдает ошибку 404.

(Грязное) Решение 1:

Измените сопоставление

app.use('/static', express.static('./node_modules/font-awesome'))

и измените URL-адреса:

/static/fonts/fontawesome--webfont.woff?v=4.6.3

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

Решение 2:

Создайте статический каталог (имя не имеет значения) и поместите содержимое каталогов ./node_modules/font-awesome/css и ./node_modules/font-awesome/fonts, а затем просто сопоставьте его с помощью

app.use('/static', express.static('./static'));
person Denys Séguret    schedule 25.07.2016
comment
Спасибо, теперь я вижу, что он ищет шрифт в /fonts/fontawesome-webfont.ttf?v=... - person Aage Torleif; 25.07.2016
comment
Вы никогда не должны этого делать. Я не согласен. Если вы заблокируете определенный сегмент зависимости, я не вижу проблем с использованием его в качестве статического пути, даже если node_modules не отмечен. - person Patrick Roberts; 25.07.2016
comment
@PatrickRoberts Даже если вы думаете, что можете сделать это безопасно из-за блокировки semver, нет смысла обслуживать полный модуль узла. Меньшее, что можно сказать, это то, что это чрезмерно лениво и грязно. - person Denys Séguret; 25.07.2016
comment
@DenysSéguret это действительно зависит от модуля узла. Я согласен, что было бы намного лучше обслуживать только папки dist внутри модуля, поскольку ни один конечный пользователь никогда не должен нуждаться в доступе к таким вещам, как его package.json, но если модуль node отформатирован аналогично пакету Bower, то обслуживание только папки папки dist на самом деле гораздо предпочтительнее и чище, чем их проверка в вашем проекте. Подумайте о CDN. Они существуют для экстернализации статических файлов. Если вы считаете, что не проверять статическую папку — это грязно, то по этому аргументу CDN также являются грязным решением. - person Patrick Roberts; 25.07.2016