Легкий сервер разработки , который обслуживает веб -приложение, открывает его в браузере, обновляется при изменении HTML или JavaScript, внедряет изменения CSS с использованием сокетов и имеет запасную страницу, когда маршрут не найден.
Browsersync делает большую часть того, что мы хотим на очень быстрого легкого сервера разработки. Он обслуживает статический контент, обнаруживает изменения, обновляет браузер и предлагает множество настроек.
При создании спа -салона есть маршруты, которые известны только браузеру. Например, /customer/21 может быть маршрутом на стороне клиента для углового приложения. Если этот маршрут введен вручную или связан непосредственно в качестве точки входа углового приложения (он же глубокая ссылка), статический сервер получит запрос, потому что угловой еще не загружается. Сервер не найдет совпадения для маршрута и, таким образом, вернет 404. Желаемое поведение в этом случае состоит в том, чтобы вернуть index.html (или любую начальную страницу приложения, которое мы определили). Browsersync не позволяет автоматически разрешать запасную страницу. Но это позволяет для индивидуального промежуточного программного обеспечения. Вот где вступает lite-server .
lite-server -это простая индивидуальная обертка вокруг BrowserSync, чтобы облегчить обслуживание спа-салонов.
Рекомендуемый метод установки - это локальная установка NPM для вашего проекта:
npm install lite-server --save-dev
yarn add lite-server --dev # or yarn ... и добавить запись «Скрипт» в package.json вашего проекта.
# Inside package.json...
"scripts" : {
"dev" : " lite-server "
}, С приведенной выше записи сценария, вы можете запустить lite-server через:
npm run devДругие параметры запуска локально установленных двоичных файлов NPM обсуждаются в этом стеке. Вопрос о переполнении: как использовать пакет, установленную локально в node_modules
Lite-Server можно использовать с npx
npx lite-serverLite-Server также может быть установлен по всему миру, если предпочтительнее:
npm install --global lite-server
# To run:
lite-server Поведение по умолчанию служит из текущей папки, открывает браузер и применяет HTML5 Route Starkback на ./index.html .
Lite-Server использует BrowserSync и позволяет переопределять конфигурацию через локальный файл bs-config.json или bs-config.js в вашем проекте.
Вы можете предоставить пользовательский путь к своему файлу конфигурации через -c или --config= параметры времени выполнения:
lite-server -c configs/my-bs-config.js Например, чтобы изменить порт сервера, просмотреть пути файлов и базовый каталог для вашего проекта, создайте bs-config.json в папке вашего проекта:
{
"port" : 8000 ,
"files" : [ " ./src/**/*.{html,htm,css,js} " ],
"server" : { "baseDir" : " ./src " }
} Вы также можете предоставить пользовательский путь к своему базовому каталогу --baseDir= параметры времени выполнения:
lite-server --baseDir= " dist " Более сложный пример с модификациями промежуточного программного обеспечения для сервера может быть сделан с помощью файла bs-config.js , который требует module.exports = { ... }; синтаксис:
module . exports = {
server : {
middleware : {
// overrides the second middleware default with new settings
1 : require ( 'connect-history-api-fallback' ) ( {
index : '/index.html' ,
verbose : true ,
} ) ,
} ,
} ,
} ; Файл bs-config.js может также экспортировать функцию, которая получает экземпляр Lite-Server Browsersync в качестве единственного аргумента. Несмотря на необходимость, возвращаемое значение этой функции будет использоваться для расширения конфигурации Lite-Server по умолчанию.
module . exports = function ( bs ) {
return {
server : {
middleware : {
// overrides the second middleware default with new settings
1 : require ( 'connect-history-api-fallback' ) ( {
index : '/index.html' ,
verbose : true ,
} ) ,
} ,
} ,
} ;
} ;Примечание. Имейте в виду, что при использовании переопределения промежуточного программного обеспечения в вашем проекте должен быть установлен конкретный промежуточный модуль. Для приведенного выше примера вам нужно сделать:
npm install connect-history-api-fallback --save-dev... в противном случае вы получите ошибку, похожую на:
Error: Cannot find module ' connect-history-api-fallback ' Другой пример: Чтобы удалить один из средних волн по умолчанию, например, connect-logger , вы можете установить его индекс массива на null :
module . exports = {
server : {
middleware : {
0 : null , // removes default `connect-logger` middleware
} ,
} ,
} ;Список всего набора вариантов браузерканс можно найти в его документах: http://www.browsersync.io/docs/options/
При использовании lite-server для выполнения конечных испытаний мы не захотим регистрировать условно. Мы также можем предотвратить открытие браузера. Эти варианты в bs-config.js замолчают все журналы от lite-server :
open: false
logLevel: "silent" ,
server : {
middleware : {
0 : null
}
} Таким образом, CSS с Angular 2 внедряется, даже если BrowserSync обнаруживает изменение файла на CSS, он не вводит файл через сокеты. Как обходной путь, injectChanges по умолчанию по умолчанию false .
npm installgit checkout -b new-featuregit commit -am 'Added a feature'npm testgit push origin new-featureКод, выпущенный по лицензии MIT.