Как заставить работать core-js wepback из другой директории после запуска проекта?

Question

Я создал директорию со сборщиком gulp в корне своих проектов. И когда нужно поработать над проектом, я просто в терминале захожу в папку со сборщиком и запускаю gulp.

Код из gulpfile.

"use strict";

const gulp = require("gulp");
const webpack = require("webpack-stream");
const sass = require('gulp-sass');
const autoprefixer = require("gulp-autoprefixer");
const sourcemaps = require('gulp-sourcemaps');
const wait = require('gulp-wait'), notify = require("gulp-notify");
const browserSync = require("browser-sync");

// let siteUrl = 'http://wc-estore.host1670806.hostland.pro/';
// let siteDir = '../wc-estore/';

// let siteUrl = 'http://gadda.cf/';
// let siteDir = '../bs-gadda/';

// let siteUrl = 'http://gadda.cf/';
// let siteDir = '../vue/';

// let siteDir = '../gsap/';
// let siteDir = '../javascript-petricenco/';

// let siteUrl = 'http://javascript-petricenco.host1670806.hostland.pro/';
// let siteDir = '../javascript-petricenco/';

let siteUrl = 'http://zuccato.cf/';
let siteDir = '../bs-zuccato/';

// const siteDir = '../bs-bunavestire/';
// const siteUrl = 'http://wp-bunavestire.host1670806.hostland.pro/';

//let siteDir = '../js-movies/';

// let siteUrl = 'http://dev.ilcaffecheaspettavi.it/';
// let siteDir = '../bs-alytaly/';

// let siteUrl = 'http://bassoservizi.cf/';
// let siteDir = '../bs-bassoservizi/';

//let siteUrl = 'http://consorziostorm.cf/';
//let siteDir = '../bs-consorzio/';

// let siteUrl = 'https://myrewind.it/';
// let siteDir = '../bs-rewind/';

// let siteUrl = 'http://bertan.ml/';
// let siteDir = '../bs-bertan/';

//let siteUrl = 'http://proseccoborgoluce.cf//';
//let siteDir = '../bs-proseccobordoluce/';

let isDev = true;
let webpackConfig = {
    output: {
        filename: "webpack.js"
    },
    watch: false,
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [['@babel/preset-env', {
                            debug: true,
                            corejs: 3,
                            useBuiltIns: "usage"
                        }]]
                    }
                }
            }
        ]
    },
    mode: isDev ? 'development' : 'production',
    devtool: isDev ? 'eval-source-map' : 'none',
};

gulp.task('webpack', function () {
    return gulp.src(siteDir + 'assets/js/main.js')
        .pipe(webpack(webpackConfig))
        .pipe(gulp.dest(siteDir + 'assets/js/'))
        .pipe(browserSync.reload({
            stream: true
        }));
});

gulp.task("scss", function () {
    return gulp.src(siteDir + 'assets/scss/my.scss')
        // .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(wait(500))
        .pipe(sass({
            outputStyle: 'expanded',
            allowEmpty: true
        }).on('error', notify.onError(function (error) {
            return 'An error occurred while compiling sass.\nLook in the console for details.\n' + error;
        })))
        .pipe(autoprefixer({
            cascade: false
        }))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(siteDir + 'assets/css/'))
        .pipe(browserSync.reload({stream: true}));
});

gulp.task("watch", function () {
    gulp.watch(siteDir + 'assets/scss/**/*.scss', gulp.series('scss'));
    gulp.watch(siteDir + 'assets/js/modules/**/*.js', gulp.series('webpack'));
});

gulp.task('browser-sync', function () {
    browserSync.init({
        proxy: {
            target: siteUrl,
            ws: true
        },
        reloadDelay: 1000
    });

    // browserSync.init({
    //  server: {
    //      baseDir: siteDir
    //  },
    //  notify: true
    // });
    gulp.watch(siteDir + "**/*.html").on('change', browserSync.reload);
    gulp.watch(siteDir + "**/*.php").on('change', browserSync.reload);
    gulp.watch(siteDir + "**/*.css").on('change', browserSync.reload);
    gulp.watch(siteDir + "**/*.js").on('change', browserSync.reload);
});

// gulp.task('default', gulp.series('browser-sync'));
// gulp.task('default', gulp.parallel('scss', 'watch', 'browser-sync'));
// gulp.task('default', gulp.parallel('watch', 'browser-sync'));
gulp.task('default', gulp.series('webpack', 'scss', gulp.parallel('watch', 'browser-sync')));

А вот содержимое 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.7.4",
    "@babel/preset-env": "^7.7.4",
    "babel": "^6.23.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "browser-sync": "^2.26.12",
    "core-js": "^3.4.2",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-notify": "^3.2.0",
    "gulp-sass": "^4.1.0",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-wait": "0.0.2",
    "webpack": "^4.41.2",
    "webpack-stream": "^5.2.1"
  }
}

Проблема в том, что если я начинаю использовать код из es6, forEach, аргументы по-умолчанию, то core-js ругается, что не может найти node-modules.

[/node_modules]
 @ ../bs-zuccato/assets/js/modules/gsap/address.js 1:0-24 4:2-6
 @ ../bs-zuccato/assets/js/main.js
../bs-zuccato/assets/js/modules/gsap/features-items.js
Module not found: Error: Can't resolve 'gsap/ScrollTrigger' in '/home/serii/Sites/bs-zuccato/assets/js/modules/gsap'
resolve 'gsap/ScrollTrigger' in '/home/serii/Sites/bs-zuccato/assets/js/modules/gsap'
  Parsed request is a module
  using description file: /home/serii/Sites/bs-zuccato/package.json (relative path: ./assets/js/modules/gsap)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /home/serii/Sites/bs-zuccato/assets/js/modules/gsap/node_modules doesn't exist or is not a directory
      /home/serii/Sites/bs-zuccato/assets/js/modules/node_modules doesn't exist or is not a directory
      /home/serii/Sites/bs-zuccato/assets/js/node_modules doesn't exist or is not a directory
      /home/serii/Sites/bs-zuccato/assets/node_modules doesn't exist or is not a directory
      /home/serii/Sites/bs-zuccato/node_modules doesn't exist or is not a directory
      /home/serii/Sites/node_modules doesn't exist or is not a directory
      /home/serii/node_modules doesn't exist or is not a directory
      /home/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
[/home/serii/Sites/bs-zuccato/assets/js/modules/gsap/node_modules]
[/home/serii/Sites/bs-zuccato/assets/js/modules/node_modules]
[/home/serii/Sites/bs-zuccato/assets/js/node_modules]
[/home/serii/Sites/bs-zuccato/assets/node_modules]
[/home/serii/Sites/bs-zuccato/node_modules]
[/home/serii/Sites/node_modules]
[/home/serii/node_modules]
[/home/node_modules]
[/node_modules]
 @ ../bs-zuccato/assets/js/modules/gsap/features-items.js 2:0-47 4:22-35
 @ ../bs-zuccato/assets/js/main.js
Details:
    domainThrown: true

Я переместил gulpfile.js и package.json в свой проект и установил зависимости и код работает без ошибок.

Проблема в том, что node_modules весит 150мб, и если его внедрить в каждый проект, то это будет значительный вес.

Можно как-то прописать путь к node_modules из папку gulp(который находится в корне всех проектов) в самом проекте.

Заранее благодарен за ответ.

БЛОГ НА HUSL

Как заставить работать core-js wepback из другой директории после запуска проекта?

Ответы (0 шт):