<div className='content'>
<Routes>
<Route path='/movies/*' element={<Movies/>}/>
<Route path='/movie/:id' element={<Movie/>}/> // <------- новый компонент
<Route path='/customers' element={<Customers/>}/>
<Route path='/rentals' element={<Rentals/>}/>
</Routes>
</div>document.getElementById('suggest').addEventListener('change', function(e) {
let address = e.target.value.trim() // убирает пробелы в начале и конце
geocode(address)
console.log(address)
})document.getElementById('suggest').addEventListener('change', function(e) {
let address = e.target.value.trim() // убирает пробелы в начале и конце
geocode(address)
console.log(value)
})function draw() {
drawBackground();
drawBird();
drawPipe();
// и тд
}
function drawBackground() {
if (!isGameEnd) {
score < 20 ? drawFirstBack() : drawSecondBack();
}
// и тд
}
function drawBird() {
moveBird();
checkOnCollision();
// и тд
}<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div class="itemToSlider" style="background: white; height: 200px;"></div>
<div class="itemToSlider" style="background: red; height: 200px;"></div>
<div class="itemToSlider" style="background: green; height: 200px;"></div>
<div class="itemToSlider" style="background: blue; height: 200px;"></div>
<div class="itemToSlider" style="background: yellow; height: 200px;"></div>
<div class="itemToSlider" style="background: magenta; height: 200px;"></div>
<div class="itemToSlider" style="background: gray; height: 200px;"></div>
<script src="src/index.js"></script>
</body>
</html>const elements = document.querySelectorAll(".itemToSlider");
let i = 0;
const elements = document.querySelectorAll(".itemToSlider");
let i = 0;
setTimeout(function tick() {
if (i < elements.length) {
elements.item(i).scrollIntoView();
i++;
} else {
i = 0;
elements.item(i).scrollIntoView();
}
setTimeout(tick, 1000);
}, 1000);var gulp = require("gulp");
var browserify = require("browserify");
var source = require("vinyl-source-stream");
var watchify = require("watchify");
var tsify = require("tsify");
var fancy_log = require("fancy-log");
var paths = {
pages: ["src/*.html"],
};
var watchedBrowserify = watchify(
browserify({
basedir: ".",
debug: true,
entries: ["src/main.ts"],
cache: {},
packageCache: {},
}).plugin(tsify)
);
gulp.task("copy-html", function () {
return gulp.src(paths.pages).pipe(gulp.dest("dist"));
});
function bundle() {
return watchedBrowserify
.bundle()
.on("error", fancy_log)
.pipe(source("bundle.js"))
.pipe(gulp.dest("dist"));
}
gulp.task("default", gulp.series(gulp.parallel("copy-html"), bundle));
watchedBrowserify.on("update", bundle);
watchedBrowserify.on("log", fancy_log);
1. разбил проект на две части
2. использовал cross-env и gulp
3. прописал gulpfile.js с логикой:
4. package.json:
благо, что сборка react приложений доступна без лишних маневров и использования react-scripts :)
а использование .env (окружений) больше подходит, как я посмотрел, для сборки под разные виды публикации (разработка с полной структурой, тестирования с выдачей ошибок, production для релиза)