как собирать js файлы с тринспилятором
стоит задача имеющиеся в директории файлы js транспилировать в код для старых браузеров, включая IE 11. Проект на PHP. Что делал:
- Ставил bubel 7.14 - файлы нормально перегоняются и сохраняются в отдельной папке. Но т.к. простой режим без плагинов не добавляет функции браузерного АПИ, то при добавлении плагинов возникла проблема с полученными файлами в CommonJS формате: require(...) выкидывает ошибку в браузере.
- Для решения проблемы поставил 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);