002 Настраиваем сборку проекта и разбираемся с ТЗ
Условия проекта:
- Только нативный JS
- Никаких ошибок в консоли
- Переменные и названия классов без кириллицы и транслита
- Проект должен быть построен на модульной структуре
- Работоспособность в любом современном браузере (Chrome, Firefox, Opera, IE11, Edge, Safari)
- Анимации
- ES6
Таким образом выглядит пакедж:
browserslistбудет отвечать за тот % браузеров, который нужно поддерживать (больше 1 процента и живые)- так же будет установлен
gulpв качестве раннера задач по запуску сборки и отслеживанию
package.json
{
"name": "window",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"browserslist": [
"> 1%",
"not dead"
],
"devDependencies": {
"@babel/core": "^7.21.0",
"@babel/preset-env": "^7.20.2",
"babel": "^6.23.0",
"babel-core": "^6.26.3",
"babel-loader": "^9.1.2",
"browser-sync": "^2.28.3",
"core-js": "^3.29.1",
"gulp": "^4.0.2",
"webpack": "^5.76.1",
"webpack-stream": "^7.0.0"
}
}И далее нам нужно будет настроить таскраннер gulp
gulpfile.js
'use strict';
// импортируем галп
const gulp = require('gulp');
// импортируем вебпак
const webpack = require('webpack-stream');
// импортируем синхронизатор с браузером
const browsersync = require('browser-sync');
// это папка, где будет храниться результат
const dist = './dist/';
// этот таск галпа будет стримить html-файл
gulp.task('copy-html', () => {
return gulp.src('./src/index.html').pipe(gulp.dest(dist)).pipe(browsersync.stream());
});
// этот таск будет вызывать вебпак, чтобы собрать проект
gulp.task('build-js', () => {
return gulp
// берём основной файл
.src('./src/js/main.js')
// выполняем задачу вебпака
.pipe(
webpack({
// режим разработки
mode: 'development',
// название выходного файла
output: {
filename: 'script.js',
},
// без отслеживания
watch: false,
// дополнительно генерировать сурс-мэпы для работы в девтулзе
devtool: 'source-map',
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
// подключаем лоадер
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
debug: true,
// подключаем работу полифилов через corejs модуль
corejs: 3,
useBuiltIns: 'usage',
},
],
],
},
},
},
],
},
}),
)
.pipe(gulp.dest(dist))
// обновляем синхронизатор при завершении операции
.on('end', browsersync.reload);
});
// этот таск будет копировать ассеты в дист
gulp.task('copy-assets', () => {
return gulp
// берём из src все ассеты из всех папок
.src('./src/assets/**/*.*')
// перемещаем их просто в папку ассетов
.pipe(gulp.dest(dist + '/assets'))
// перезагружаем синхронизатор
.on('end', browsersync.reload);
});
// этот таск будет вотчить за изменениями в файлах
gulp.task('watch', () => {
browsersync.init({
server: './dist/',
port: 4000,
notify: true,
});
gulp.watch('./src/index.html', gulp.parallel('copy-html'));
gulp.watch('./src/assets/**/*.*', gulp.parallel('copy-assets'));
gulp.watch('./src/js/**/*.js', gulp.parallel('build-js'));
});
// этот таск будет вызывать все таски
gulp.task('build', gulp.parallel('copy-html', 'copy-assets', 'build-js'));
// этот таск будет собирать проект в продакшен
gulp.task('build-prod-js', () => {
return gulp
.src('./src/js/main.js')
.pipe(
webpack({
mode: 'production',
output: {
filename: 'script.js',
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
corejs: 3,
useBuiltIns: 'usage',
},
],
],
},
},
},
],
},
}),
)
.pipe(gulp.dest(dist));
});
// этот таск будет для разработки - следить за проектом и собирать его
gulp.task('default', gulp.parallel('watch', 'build'));