Как сделать так, чтобы проекты инсталлились не на системном, а на дополнительном диске (npm i)?

Aetae, забыл написать. Ещё я пробовал обновить до последней версии все пакеты проекта, однако что-то там в пакете gulp-imagemin ему не понравилось. require() перестал поддерживать, а на import тоже ругается (SyntaxError: Cannot use import statement outside a module)
https://www.npmjs.com/package/gulp-imagemin

PS D:\OSPanel\domains\my-site-bak> gulp
Error [ERR_REQUIRE_ESM]: require() of ES Module D:\OSPanel\domains\my-site-bak\node_modules\gulp-imagemin\index.js from D:\OSPanel\domains\my-site-bak\gulpfile.js not supported.
Instead change the require of index.js in D:\OSPanel\domains\my-site-bak\gulpfile.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (D:\OSPanel\domains\my-site-bak\gulpfile.js:62:16)
    at async Promise.all (index 0) {
  code: 'ERR_REQUIRE_ESM'
}

Как сделать так, чтобы проекты инсталлились не на системном, а на дополнительном диске (npm i)?

Aetae,
По первому варианту (на на node js 14.18.1 пока не откатывал).
В общем, сборка компиллится норм, но вот эти все ворнинги дико смущают.

PS D:\OSPanel\domains\my-site> npm i
npm WARN deprecated natives@1.1.6: This module relies on Node.js's internals and will break at some point. Do not use it, and update to graceful-fs@4.x.
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated debug@4.1.1: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated debug@4.1.1: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated debug@4.1.1: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.      
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated wow.js@1.2.2: deprecated in favour of aos (Animate On Scroll)
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.

added 1521 packages, and audited 1522 packages in 28s

87 packages are looking for funding
  run `npm fund` for details       

47 vulnerabilities (32 moderate, 15 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.

----------------------------------------------------------------

D:\OSPanel\domains\my-site> npm audit fix
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: babel-loader@8.2.3
npm ERR! Found: webpack@4.46.0
npm ERR! node_modules/webpack
npm ERR!   dev webpack@"^4.46.0" from the root project
npm ERR!   peer webpack@">=2" from babel-loader@8.2.3
npm ERR!   node_modules/babel-loader
npm ERR!     dev babel-loader@"^8.2.2" from the root project
npm ERR!   3 more (terser-webpack-plugin, webpack-stream, terser-webpack-plugin)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@">=2" from babel-loader@8.2.3
npm ERR! node_modules/babel-loader
npm ERR!   dev babel-loader@"^8.2.2" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: webpack@5.64.3
npm ERR! node_modules/webpack
npm ERR!   peer webpack@">=2" from babel-loader@8.2.3
npm ERR!   node_modules/babel-loader
npm ERR!     dev babel-loader@"^8.2.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\Vlad\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     <a href="https://drive.google.com/file/d/1mTRCv8fRYxn-eVj3sGiuD2p8hH5n8t0L/view?usp=sharing">C:\Users\Vlad\AppData\Local\npm-cache\_logs\2021-11-24T12_27_46_797Z-debug.log</a>

--------------------------------------------------------------

PS D:\OSPanel\domains\my-site> gulp
[15:44:51] Using gulpfile D:\OSPanel\domains\my-site\gulpfile.js
[15:44:51] Starting 'default'...
[15:44:51] Starting 'build'...
[15:44:51] Starting 'clean_build'...
[15:44:51] Finished 'clean_build' after 19 ms
[15:44:51] Starting 'html_build'...
[15:44:51] Starting 'js_build'...
[15:44:51] Starting 'css_build'...
[15:44:51] Starting 'php_build'...
[15:44:51] Starting 'fonts_build'...
[15:44:51] Starting 'icons_build'...
[15:44:51] Starting 'image_build'...
Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(20em, 16)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
12 │ $fa-fw-width:          (20em / 16);
   │                         ^^^^^^^^^
   ╵
    node_modules\@fortawesome\fontawesome-free\scss\_variables.scss 12:25  @import
    node_modules\@fortawesome\fontawesome-free\scss\fontawesome.scss 5:9   @import
    assets\src\style\_variables.scss 6:9                                   @import
    assets\src\style\main.scss 27:9                                        root stylesheet

Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(4em, 3)

More info and automated migrator: https://sass-lang.com/d/slash-div

  ╷
6 │   font-size: (4em / 3);
  │               ^^^^^^^
  ╵
    node_modules\@fortawesome\fontawesome-free\scss\_larger.scss 6:15     @import
    node_modules\@fortawesome\fontawesome-free\scss\fontawesome.scss 8:9  @import
    assets\src\style\_variables.scss 6:9                                  @import
    assets\src\style\main.scss 27:9                                       root stylesheet

Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(3em, 4)

More info and automated migrator: https://sass-lang.com/d/slash-div

  ╷
7 │   line-height: (3em / 4);
  │                 ^^^^^^^
  ╵
    node_modules\@fortawesome\fontawesome-free\scss\_larger.scss 7:17     @import
    node_modules\@fortawesome\fontawesome-free\scss\fontawesome.scss 8:9  @import
    assets\src\style\_variables.scss 6:9                                  @import
    assets\src\style\main.scss 27:9                                       root stylesheet

Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($fa-li-width * 5, 4)

More info and automated migrator: https://sass-lang.com/d/slash-div

  ╷
6 │   margin-left: $fa-li-width * 5/4;
  │                ^^^^^^^^^^^^^^^^^^
  ╵
    node_modules\@fortawesome\fontawesome-free\scss\_list.scss 6:16        @import
    node_modules\@fortawesome\fontawesome-free\scss\fontawesome.scss 10:9  @import
    assets\src\style\_variables.scss 6:9                                   @import
    assets\src\style\main.scss 27:9                                        root stylesheet

[15:44:58] Finished 'css_build' after 7.09 s
[15:44:58] Finished 'html_build' after 7.5 s
[15:44:58] Finished 'php_build' after 7.59 s
[15:45:00] Finished 'fonts_build' after 9.15 s
[15:45:00] Finished 'icons_build' after 9.56 s
[15:45:03] gulp-imagemin: Minified 0 images
[15:45:03] Finished 'image_build' after 12 s
[15:45:04] Version: webpack 4.46.0
Built at: 24.11.2021 15:45:04
                   Asset      Size     Chunks             Chunk Names
            gsap-site.js   304 KiB  gsap-site  [emitted]  gsap-site
gsap-site.js.LICENSE.txt  1.99 KiB             [emitted]
                 main.js  2.97 MiB       main  [emitted]  main
     main.js.LICENSE.txt  95.6 KiB             [emitted]
Entrypoint main = main.js
Entrypoint gsap-site = gsap-site.js
[15:45:04] Finished 'js_build' after 14 s
[15:45:04] Finished 'build' after 14 s
[15:45:04] Starting 'webserver'...
[15:45:04] Starting 'watch'...
[Browsersync] Proxying: http://my-site
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.53:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -------------------------------------

Как сделать так, чтобы проекты инсталлились не на системном, а на дополнительном диске (npm i)?

Aetae, Нет. Я с таким вообще никогда не сталкивался. Мне npm нужен для сборки фронтэнда.

Как сделать так, чтобы проекты инсталлились не на системном, а на дополнительном диске (npm i)?

Aetae,

Удалил package-lock.json
Нифига :(
Вот лог: https://drive.google.com/file/d/1CSE5VMsM4MwTITiaD...

Какие нюансы работы самозанятым?

mletov, Проще купить на старости лет парочку квартир и сдавать, чем рассчитывать на пенсию от государства ;)

Как сделать так, чтобы проекты инсталлились не на системном, а на дополнительном диске (npm i)?

Aetae,

Поставил Python 2.7.18
Проекты всё равно не инсталлятся.
Лог: https://drive.google.com/file/d/1nq7pLCGxnYMuq1W0K...
package.json: https://drive.google.com/file/d/1uzaVf5JD_cU3fPCXq...

D:\OSPanel\domains\vbstarterkit-site> python -v
# installing zipimport hook
import zipimport # builtin
# installed zipimport hook
# C:\Python27\lib\site.pyc matches C:\Python27\lib\site.py
import site # precompiled from C:\Python27\lib\site.pyc
# C:\Python27\lib\os.pyc matches C:\Python27\lib\os.py
import os # precompiled from C:\Python27\lib\os.pyc
import errno # builtin
import nt # builtin
# C:\Python27\lib\ntpath.pyc matches C:\Python27\lib\ntpath.py
import ntpath # precompiled from C:\Python27\lib\ntpath.pyc
# C:\Python27\lib\stat.pyc matches C:\Python27\lib\stat.py
import stat # precompiled from C:\Python27\lib\stat.pyc
# C:\Python27\lib\genericpath.pyc matches C:\Python27\lib\genericpath.py
import genericpath # precompiled from C:\Python27\lib\genericpath.pyc
# C:\Python27\lib\warnings.pyc matches C:\Python27\lib\warnings.py
import warnings # precompiled from C:\Python27\lib\warnings.pyc
# C:\Python27\lib\linecache.pyc matches C:\Python27\lib\linecache.py
import linecache # precompiled from C:\Python27\lib\linecache.pyc
# C:\Python27\lib\types.pyc matches C:\Python27\lib\types.py
import types # precompiled from C:\Python27\lib\types.pyc
# C:\Python27\lib\UserDict.pyc matches C:\Python27\lib\UserDict.py
import UserDict # precompiled from C:\Python27\lib\UserDict.pyc
# C:\Python27\lib\_abcoll.pyc matches C:\Python27\lib\_abcoll.py
import _abcoll # precompiled from C:\Python27\lib\_abcoll.pyc
# C:\Python27\lib\abc.pyc matches C:\Python27\lib\abc.py
import abc # precompiled from C:\Python27\lib\abc.pyc
# C:\Python27\lib\_weakrefset.pyc matches C:\Python27\lib\_weakrefset.py
import _weakrefset # precompiled from C:\Python27\lib\_weakrefset.pyc
import _weakref # builtin
# C:\Python27\lib\copy_reg.pyc matches C:\Python27\lib\copy_reg.py
import copy_reg # precompiled from C:\Python27\lib\copy_reg.pyc
# C:\Python27\lib\traceback.pyc matches C:\Python27\lib\traceback.py
import traceback # precompiled from C:\Python27\lib\traceback.pyc
# C:\Python27\lib\sysconfig.pyc matches C:\Python27\lib\sysconfig.py
import sysconfig # precompiled from C:\Python27\lib\sysconfig.pyc
# C:\Python27\lib\re.pyc matches C:\Python27\lib\re.py
import re # precompiled from C:\Python27\lib\re.pyc
# C:\Python27\lib\sre_compile.pyc matches C:\Python27\lib\sre_compile.py
import sre_compile # precompiled from C:\Python27\lib\sre_compile.pyc
import _sre # builtin
# C:\Python27\lib\sre_parse.pyc matches C:\Python27\lib\sre_parse.py
import sre_parse # precompiled from C:\Python27\lib\sre_parse.pyc
# C:\Python27\lib\sre_constants.pyc matches C:\Python27\lib\sre_constants.py
import sre_constants # precompiled from C:\Python27\lib\sre_constants.pyc
import _locale # builtin
# C:\Python27\lib\locale.pyc matches C:\Python27\lib\locale.py
import locale # precompiled from C:\Python27\lib\locale.pyc
import encodings # directory C:\Python27\lib\encodings
# C:\Python27\lib\encodings\__init__.pyc matches C:\Python27\lib\encodings\__init__.py
import encodings # precompiled from C:\Python27\lib\encodings\__init__.pyc
# C:\Python27\lib\codecs.pyc matches C:\Python27\lib\codecs.py
import codecs # precompiled from C:\Python27\lib\codecs.pyc
import _codecs # builtin
# C:\Python27\lib\encodings\aliases.pyc matches C:\Python27\lib\encodings\aliases.py
import encodings.aliases # precompiled from C:\Python27\lib\encodings\aliases.pyc
import operator # builtin
# C:\Python27\lib\functools.pyc matches C:\Python27\lib\functools.py
import functools # precompiled from C:\Python27\lib\functools.pyc
import _functools # builtin
# C:\Python27\lib\encodings\cp1251.pyc matches C:\Python27\lib\encodings\cp1251.py
import encodings.cp1251 # precompiled from C:\Python27\lib\encodings\cp1251.pyc
Python 2.7.18 (v2.7.18:8d21aa21f2, Apr 20 2020, 13:19:08) [MSC v.1500 32 bit (Intel)] on win32
Type "help", "copyright", "credits" or "license" for more information.
>>>

Какие нюансы работы самозанятым?

mletov, от компании де-факто получаешь одно, де-юре как самозанятый рисуешь другое, отсюда и 1/4 отправляешь своей БЖ. Ну а ребенку покупаешь потом сам, что хочешь. В итоге ты контролируешь ситуацию, а не твоя БЖ. Если отношения с БЖ нормальные, то не надо этим заморачиваться.

Как сделать так, чтобы проекты инсталлились не на системном, а на дополнительном диске (npm i)?

Aetae, Сорян! Вот лог –
https://drive.google.com/file/d/1jdxmcmfXcp5GqBMHI...

Как сделать так, чтобы проекты инсталлились не на системном, а на дополнительном диске (npm i)?

Lynn «Кофеман», Жесть И какой теперь выход?

Как сделать так, чтобы проекты инсталлились не на системном, а на дополнительном диске (npm i)?

Поставил lts https://nodejs.org/en/download/
Инсталлирую проекты –и снова куча ошибок.
И главное, что папка node_modules создаётся и начинают ставится какие-то пакеты, а потом папка удаляется.
Лог очень большой (6312 строк).

Так это надо было раньше с lts создавать проекты что-ли?
А теперь что делать то? ☹☹☹ Проекты то запустить надо!

Вставить в input значение введенное ранее?

Если по-серьёзному, то как-то так :)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Radio</title>
  <style>
    body {
      min-width: 100vw;
      min-height: 100vh;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    input {
      margin: 10px;
    }
  </style>
</head>

<body>
  <div class="text-btns">
    <input type="text" name="name" id="name">
    <input type="text" name="surname" id="surname">
  </div>
  <div class="radio-btns">
    <input type="radio" name="shippingMethod" value="sdek" class="shippingMethod" checked>
    <input type="radio" name="shippingMethod" value="rupost" class="shippingMethod">
    <input type="radio" name="shippingMethod" value="pickup" class="shippingMethod">
  </div>

  <script>
    const inputName = document.getElementById('name');
    const inputSurname = document.getElementById('surname');

    [...document.querySelectorAll('[name="shippingMethod"]')].map((method) => {
      method.addEventListener('change', () => {
        if (method.value === 'pickup') {
          nameCurrentValue = inputName.value;
          surnameCurrentValue = inputSurname.value;
          inputName.value = inputSurname.value = 'самовывоз';
        } else {
          inputName.value = nameCurrentValue;
          inputSurname.value = surnameCurrentValue;
        }
      });
    });
  </script>
</body>

</html>

Как автоматически увеличивать количество дней на JavaScript?

Спасибо. Осталось только дописать:

let secNextDate = Date.parse(nextDate) / 1000;

Как автоматически увеличивать количество дней на JavaScript?

Алексей Ярков, именно

Gulp-rigger. Почему выскакивает ошибка при импорте в шаблон субшаблона?

Vyach Gor, Короче, тут вот в чём дело.
Используя gulp-rigger, надо делать на манер SPA как в React –
т.е. один вход для html.

Я забыл поправить путь к сорсу для gulp.src!
У меня было вот так: 'assets/src/**/*.html'
Т.о. Gulp тянул все html-файлы в сборку.

А когда я прописал путь вот так: 'assets/src/index.html',
то вуаля! Всё работает! :)
Я оставил вот так: 'assets/src/*.html',
на случай дополнительных страниц.

Так что ларчик просто открывался. Ничего там в ригере они не правили.
Если ты посмотришь свой gulpfile.js, то увидишь, что у тебя скорее всего тоже в этом была проблема.

Сам задал вопрос, сам и ответил на него – это в моём репертуаре )))

Gulp-rigger. Почему выскакивает ошибка при импорте в шаблон субшаблона?

Vyach Gor, на скринах виден путь. Всё в одной папке. Я кажется догадываюсь в чем тут дело. Но я отъехал. Приеду, проверю свою гипотезу и отпишу!

Gulp-rigger. Почему выскакивает ошибка при импорте в шаблон субшаблона?

Хм.. Забавно. Рад, что вас это заинтересовало. Давайте разбираться.

Сейчас запустил второй проект, всё работает
Вот инфа по нему:

"dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.2",
    "@popperjs/core": "^2.8.3",
    "animate.css": "^3.7.0",
    "bootstrap": "^5.0.0-beta2",
    "caniuse-lite": "^1.0.30001168",
    "chart.js": "^2.9.4",
    "font-awesome": "^4.7.0",
    "fslightbox": "^3.2.2",
    "highlight.js": "^10.6.0",
    "jquery": "^3.5.1",
    "simplebar": "^5.3.0",
    "swiper": "^6.4.11",
    "wow.js": "^1.2.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.10",
    "babel-loader": "^8.2.2",
    "browser-sync": "^2.26.13",
    "browserslist": "^4.16.3",
    "del": "^6.0.0",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^6.1.0",
    "gulp-cache": "^1.1.2",
    "gulp-clean-css": "^4.3.0",
    "gulp-htmlmin": "^5.0.1",
    "gulp-if": "^3.0.0",
    "gulp-imagemin": "^6.2.0",
    "gulp-newer": "^1.4.0",
    "gulp-plumber": "^1.2.1",
    "gulp-rename": "^1.4.0",
    "gulp-rigger": "^0.5.8",
    "gulp-sass": "^4.1.0",
    "gulp-sourcemaps": "^2.6.5",
    "imagemin-jpeg-recompress": "^6.0.0",
    "imagemin-pngquant": "^8.0.0",
    "terser-webpack-plugin": "^4.2.3",
    "webpack": "^4.46.0",
    "webpack-stream": "^6.1.1"
  }

// html build
function html_build () {
    return gulp.src(path.src.html) // get all html files
        .pipe(plumber()) // gulp plugins bug tracking
        .pipe(rigger()) // templates import
        .pipe(gulpif(prodMode, htmlMin({
            sortAttributes: true,
            sortClassName: true,
            collapseWhitespace: true
        })))
        .pipe(gulp.dest(path.build.html)) // build html
        .pipe(browserSync.reload({ stream: true })); // browser-sync reload
}

Я сам сетап составлял который мне нужен был для проекта. Т.е. это не чей-то, а мой стартеркит. И там вложенный импорт работал. Я даже не задумывался о том, что он может не работать.

React. Почему элемент в компоненте становится пустым?

Вообще, происходит куча непонятной мне ерунды. У меня вообще гамбургер уехал за пределы штатного скрол-бара.


Пожалуй, сделаю я проект по-старинке, а параллельно буду осваивать React. Не получится так сходу. В результате не преуспею ни там, ни там.

React. Почему элемент в компоненте становится пустым?

Buck, А как импортировать скрипты, работающие с реальным DOM? Что-то в инете какая-то разрозненная инфа, обобщить которую и сделать выводы очень сложно.

React. Почему элемент в компоненте становится пустым?

Это что-то связанное с жизнью компонента? Меня очень интересует вопрос каким образом скрипты, написанные для работы с реальным DOM, использовать в React! Я взял новый проект и решил сразу обкатать его на React, благо не горит, и есть возможность практиковаться. Я бы выполнил это проект за неделю, пользуясь старыми добрыми системами сборки типа Gulp или Webpack, а может и Parcel, чтоб не сильно морочиться. Но я решил восполнить пробел, связанный с React, но кажется, что простым нахрапом его не возьмёшь ))
В общем.. Как свои старые обкатанные скрипты интегрировать в React?

React. Почему элемент в компоненте становится пустым?

Владимир,

У меня почему-то, когда я пытаюсь использовать рефы, происходит аналогичная ситуация!

import './Header.scss';
import React from 'react';

function Header() {
  let menu = React.createRef();
  let menuBtn = React.createRef();
  let hamburgerMenu = React.createRef();
  
  console.log('menuBtn: ', menuBtn);

  return (
    <>
      <div className="menu" ref={ menu }>
        <div className="hamburger-wrapper" ref={ menuBtn }>
          <div className="hamburger-menu" ref={ hamburgerMenu }></div>
        </div>
       { /* ... */}

В консоле получаю:

menu:  Object { current: null } Header.js:11
menuBtn:  Object { current: null }Header.js:12
hamburgerMenu:  Object { current: null }