Настройка webpackи основные настройки
Создание проекта было начато с создания файла package.jsonи описанием в этом файле какие библиотеки будут использованы и команды для сборки проекта. После того как в файл package.jsonбыли добавлены основные библиотеки @angular, была сделана инициализация проекта командой npminit. После этой команды были созданы основные файлы проекта и базовые настройки.
Следующим этап была настройка конфигураций для менеджера пакетов Webpack.
Webpack— это сборщик модулей для современных JavaScript-приложений. Когда Webpack обрабатывает приложение, он рекурсивно создает граф зависимостей, включающий все модули, необходимые приложению, затем упаковывает все эти модули в заданное число файлов — часто всего в один — для загрузки браузером [1].
Были настроены две конфигурации, одна конфигурация служит для сборки developer проекта, а другая конфигурация для production проекта.
Разница между этими сборками в том, что developer сборка служит для того, чтобы разработчику было комфортно читать код в браузерах, делать debug какого-то функционала, создавать какой-то функционал и сразу смотреть что он делает в итоге, без новой сборки проекта.
В то же время production сборка служит для того, чтобы получить уже готовый продукт, который уже можно запускать на сервере. Но у данной сборки нет того функционала что есть у developer сборки.
Одним из примером настройки служит то, что, по стандарту невозможно писать стили в файле с расширением scss. Webpack как раз позволяет настроить чтение данного файла и переопределение его в файл с расширением css.
|
|
|
Пример кода настройки чтения файла с расширением scss:
{
test: /\.scss$/,
loaders: ['raw-loader', 'sass-loader']
},
В данном коде говорится о том, что файл с расширением прочитать при помощи библиотек raw-loaderили sass-loader.
Следующее действие было добавление остальных важных библиотек, при помощи которых был реализован основной функционал.
а) DevExtreme – библиотека при помощи которойможно реализовать разнообразный функционал (выпадающий список, таблица, диаграмма) [1];
б) Translate – библиотека позволяет создать локализацию на выбранных языках [1];
в) Pdfviewer – библиотека позволяет показывать документы с расширением .pdf в онлайн режиме не скачивая данный документ [1];
г) FlexLayout – библиотека позволяет равномерно распределить контент как для больших экранов так и для маленьких [1];
д) Material – библиотека позволяет использовать разные компоненты с стилем MaterialDesign [1];
е) Router – библиотека при помощи которой настраиваются endpoints;
ж) Http – библиотека при помощи которой настраиваются обращения к серверу.
После настройки менеджера пакетов и добавление библиотек, в файле app.module.tsбыли прописаны и настроены библиотеки которые будут использоваться глобально.
|
|
|
Примеркода:
@NgModule({
bootstrap: [ArgusBaseComponent],
declarations: [
ArgusBaseComponent,
ArgusTranslateComponent
],
imports: [
CommonModule,
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
RouterModule.forRoot(ROUTES, {useHash: true}),
TranslateModule.forRoot({
provide: TranslateLoader,
useFactory: (http: Http) => new TranslateStaticLoader(http, './assets/i18n', '.json'),
deps: [Http]
}),
ArgusStartModule,
HttpClientModule,
HttpClientInMemoryWebApiModule.forRoot(
InMemoryDataService, { dataEncapsulation: false, passThruUnknownUrl: true }
),
BrowserAnimationsModule,
ArgusDetailModule
],
providers: [
HttpService
],
})
Вданномкодепоказанокаккакие-либобиблиотекииликомпонентыимпортируютсявданныйфайл. Также в данном файле происходит настройка библиотеки Translateи Router.
Реализация компонента ArgusBaseComponent
После выше сделанных настроек былсозданhtmlфайл, которыйявляетсяотправнойточкойвсеговеб-приложения. В данном файле прописывает самый главный компонент, который будет уже подтягивать остальные компоненты.
Пример кода htmlфайла:
<!DOCTYPEhtml>
<html>
<head>
<base href="/">
<title>Argus</title>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<argus-app></argus-app>
|
|
|
<% if (htmlWebpackPlugin.options.metadata.isDevServer) { %>
<!-- Webpack Dev Server reload -->
<script src="/webpack-dev-server.js"></script>
<% } %>
</body>
</html>
Как видно в теге bodyприсутствует тег argus-base. Данный тег является вызовом главного компонента ArgusBaseComponent.
Пример кода созданного компонента:
@Component({
selector: 'argus-base',
encapsulation: ViewEncapsulation.None,
templateUrl: './tpl/index.html',
styleUrls: [
'./styles/index.scss',
]
})
Тег для компонента указывается в опции selector. По данному селектору вызывается компонент. В опции templateUrlуказывается ссылка на шаблон. В опции styleUrlsуказывается массив ссылок на стили.В опции encapsulationуказывается как использовать глобальные стили. Данные настройки прописываются в каждом компоненте без исключения. Поэтому в дальнейшем эти настройки не будут показываться.
Так как данный компонент является отправной точкой веб-приложения, здесь реализуется обращение к библиотеке routerчерез тега router-outlet. Поэтому были настроены endpointsдля двух основных страниц.
Пример кода настроенных endpoints:
{
path: '',
component: ArgusStartComponent,
},
{
path: 'detail/:id',
component: ArgusDetailComponent
}
В данном описывается что при запуске веб-приложения по стандарту будет запускаться ArgusStartComponent. И если в адресной строке к основному адресу будет добавлен endpointsdetail/:id, то будет запускаться ArgusDetailComponent, а также будет передаваться параметр, который в данном компоненте можно будет получить.
Дата добавления: 2018-08-06; просмотров: 746; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!