Базовое приложение с Angular2 + Bootstrap4 + Webpack

В этой статье я объясню вам, как мы можем написать базовое приложение с помощью Angular2, Bootstrap4 (любой scss) и Webpack.

Когда вы смотрите на этот туториал, первое, что приходит на ум, почему именно webpack?

TL;DR Почему webpack предпочтительнее system js

Предпосылка

В этом руководстве я предположил, что вы настроили среду узла.

Если это не так, установите NodeJS в своей системе.

Настраивать

Мы начнем с самых основ, чтобы создать этот проект. Сначала мы создадим каталог с именем fifi-pet-shop.

Теперь создайте package.json и обновите зависимости, упомянутые ниже.

Подробнее о package.json.

Следующими шагами будет установка этих зависимостей. Вы можете запустить эту команду для установки пакетов.

npm install

Как видите, есть несколько пакетов, начинающихся с типов . Это тип определения машинописного текста, который потребуется во время компиляции.

npm start: эту команду можно использовать для среды разработки.

npm test: если вы хотите запустить свои тестовые примеры, вы можете попробовать эту команду.

npm run build: эта команда потребуется для сборки приложения для производственных целей.

Двигаясь вперед, предполагая, что вы закончили настройку пакетов package.json и npm.

Следующим шагом является написание конфигурационных файлов webpack.

В этом приложении я возьму три файла конфигурации: dev, prod и common.

Конфигурация разработки: этот файл будет использоваться для среды разработки.

prod config: этот файл будет использоваться для рабочей среды.

общая конфигурация: в этом файле будут все конфигурации, которые можно использовать в обеих средах.

Давайте посмотрим на эти файлы

webpack.common.js

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

DefinePlugin: используется для предоставления значения переменной в глобальной области во время выполнения.

CopyWebpackPlugin: используется для копирования ресурсов из одного места в другое. В этом приложении мы используем для копирования несколько изображений и CSS, чтобы сделать их доступными во время выполнения.

ProgressBarPlugin: предназначен для предоставления некоторого уведомления в виде индикатора выполнения на консоли, когда мы собираем наше приложение.

ProvidePlugin: используется для создания псевдонима для файлов lib и предоставления его значения при доступе с его псевдонимом.

Например, когда мы говорим $, это означает, что в нем будут ссылки на jQuery .

CommonChunkPlugin: используется для создания чанков, надеюсь, вы читали об использовании webpack вместо system js.

Загрузчики: назначаются для конкретной работы. Например,

{
                test: /\.ts$/,
                loaders: [
                    'awesome-typescript-loader',
                    'angular2-template-loader',
                    'angular2-router-loader'
                ]
            },

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

Подробнее о загрузчиках вы можете прочитать .

Как я уже упоминал выше, у нас будет еще два файла для среды dev и prod.

Вы можете создать много разных файлов или объединить их все. Я разделил их, чтобы сделать их многословными.

webpack.dev.js

У меня есть инструкция по настройке среды, мое приложение должно работать на порту 3000 и т. д.

webpack.prod.js

Настройка Bootstrap4

Следующим шагом будет настройка начальной загрузки с помощью webpack. Для этого нам нужно несколько погрузчиков, которые будут соответствовать нашим требованиям.

{
                test: /\.scss$/,
                exclude: /node_modules/,
                loaders: [ 'raw-loader', 'sass-loader?sourceMap' ]
            },
            { test: /\.(woff2?|ttf|eot|svg)$/, loader: 'file-loader' },
            // Bootstrap 4
            { test: /bootstrap\/dist\/js\/umd\//, loader: 'imports?jQuery=jquery' },
            { test: /\.css$/, loader: 'style-loader!css-loader' }

Они уже являются частью нашего webpack.common.js.

Если вы посмотрите на package.json, у нас есть два пакета bootsrap-loader и [email protected].

Это означает, что наше приложение будет использовать bootstrap4 alpha4. Чтобы использовать этот bootstrap css и js, нам нужен этот плагин bootstrap-loader.

В качестве следующего шага нам нужен файл конфигурации, который будет использовать компонент начальной загрузки в приложении. Это файл .bootstarprc.

.bootstraprc

Итак, мы закончили работу с веб-пакетом bootstrap4. В качестве следующего шага необходимо настроить наши файлы angular2.

У меня есть три отдельных файла: main.ts, polyfills.ts и vendor.ts.

main.ts:

Этот файл используется для начальной загрузки приложения.

polyfills.ts

Сюда входят сторонние файлы и библиотеки, которые будут использоваться для запуска приложения или необходимы для разработки.

vendor.ts

Этот файл содержит зависимости, которые потребуются для запуска приложения.

Итак, мы закончили с нашей настройкой. Вам может понадобиться несколько файлов, таких как index.html, app.module.ts (которые потребуются main.ts для начальной загрузки приложения).

Вы можете найти весь исходный код здесь.

И мы закончили с нашим первым базовым приложением с Angular2 + Bootstrap4 + Webpack.

Если вам понравилось, нажмите ❤️ ниже, чтобы другие люди увидели это здесь, на Medium.