как собирать js файлы с тринспилятором

стоит задача имеющиеся в директории файлы js транспилировать в код для старых браузеров, включая IE 11. Проект на PHP. Что делал:

  1. Ставил bubel 7.14 - файлы нормально перегоняются и сохраняются в отдельной папке. Но т.к. простой режим без плагинов не добавляет функции браузерного АПИ, то при добавлении плагинов возникла проблема с полученными файлами в CommonJS формате: require(...) выкидывает ошибку в браузере.
  2. Для решения проблемы поставил rollup.js. Но он обрабатывает пофайлово, для чего я файлы обработанные в 1 случае объеденил в 1 файл (concat - использовал gulp: проблема возникла с одинаковыми именами), также просто ставил плагин bubel для rollup.js

Понимаю, что я где-то ошибаюсь, но понять не могу где. И возможно-ли вообще множество файлов перегонять под старый браузер или проще просто полифилы загружать прямо на страницу (с заменой синтаксиса в бабеле)?

Буду рад любой подсказке, т.к. гугление и яндексение не дает пониминия в этих вещах.

package.json

  "name": "",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "babel:create": "npx babel ./public_html/resources/js --out-dir ./public_html/resources/build/js",
    "babel:watch": "npx babel ./public_html/resources/js --out-dir ./public_html/resources/build/js --watch",
    "bundle": "npx rollup --config",
    "watch": "rollup ./public_html/resources/build/main.js --file  ./public_html/resources/build/bundle.js --format iife --watch",
    "build": "rollup ./public_html/resources/build/main-tmp.js --file  ./public_html/resources/build/bundle.js --format iife",
    "help": "rollup --help",
    "clean": "rm dist/bundle.js",
    "start": "parcel src/index.html",
    "build-prod": "parcel build src/index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.13.16",
    "@babel/core": "^7.14.0",
    "@babel/plugin-external-helpers": "^7.12.13",
    "@babel/plugin-transform-parameters": "^7.13.0",
    "@babel/plugin-transform-runtime": "^7.13.15",
    "@babel/preset-env": "^7.14.1",
    "@babel/runtime": "^7.12.17",
    "@babel/runtime-corejs3": "^7.14.0",
    "@rollup/plugin-babel": "^5.3.0",
    "@rollup/plugin-buble": "^0.21.3",
    "core-js": "^3.12.1",
    "gulp": "^3.9.1",
    "gulp-babel": "^8.0.0",
    "gulp-cli": "^1.4.0",
    "gulp-concat": "^2.6.1",
    "gulp-rollup": "^2.17.0",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-sync": "^0.1.4",
    "npm": "^7.12.0",
    "regenerator-runtime": "^0.13.7",
    "rollup": "^2.47.0",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-stream": "^1.24.1",
    "vinyl-buffer": "^1.0.1",
    "vinyl-source-stream": "^2.0.0"
  }
}

babel.config.json

  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "ie": "11",
          "edge": "12",
          "firefox": "43",
          "chrome": "4",
          "safari": "9"
        }
      }
    ]
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime"],
    ["@babel/plugin-external-helpers"],
    ["@babel/plugin-transform-parameters"]
  ]
}

gulpfile.js

const babel = require('gulp-babel');
const rollup = require('gulp-rollup');
const concat = require('gulp-concat');
const sourcemaps = require('gulp-sourcemaps');

function babelBuild() {
    gulp.src('./public_html/resources/js/**/*.js')
        .pipe(sourcemaps.init())
        .pipe(babel({
            "presets": [
                [
                    "@babel/env",
                    {
                        "targets": {
                            "ie": "11",
                            "edge": "12",
                            "firefox": "43",
                            "chrome": "4",
                            "safari": "9"
                        }
                    }
                ]
            ],
            "plugins": [
                ["@babel/plugin-transform-runtime"],
                ["@babel/plugin-external-helpers"],
                ["@babel/plugin-transform-parameters"]
            ]
        }))
        .pipe(concat('main-tmp.js'))
        .pipe(sourcemaps.write("."))
        .pipe(gulp.dest('./public_html/resources/build/js'));
}

function rollupBuild(){
    gulp.src('./public_html/resources/build')
        .pipe(rollup({
            input: './public_html/resources/build/main-tmp.js',
            output: {
                file: './public_html/resources/build/bundle.js',
                format: 'iife'
            }
        }))
        .pipe(gulp.dest('./public_html/resources/build'));
}

exports.babelBuild = babelBuild;
exports.default = gulp.series(babelBuild, rollupBuild);

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