Тема: Налаштування Babel в symfony
Привіт всім.
Не можу налаштувати конвертацію js коду з ES6 в ES5.
Створив файл .babelrc в корені проекту
Добавляв в нього:
{
presets: [
['env', {
modules: false,
targets: {
browsers: '> 1%',
uglify: true
},
useBuiltIns: true
}]
]
}
це описано в цій документації https://symfony.com.ua/doc/current/fron … babel.html
але нічого не конвертується. Файли які генеруються всеодно містять let а не var.
Тобто конвертація на скільки я розумію не працює.
Також пробував створювати файлик .babelrc з таким вмістом:
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"ie": "10"
},
"useBuiltIns": false
}
]
]
}
теж саме, помилок ніяких не видає а генерація файлів через yarn проходить успішно
webpack.config.js:
const Encore = require('@symfony/webpack-encore');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ConcatPlugin = require("webpack-concat-plugin");
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addStyleEntry('ie9', ['./assets/less/vr.ie9.less'])
.addStyleEntry('style_no_reset', ['./assets/scss/style_no_reset.scss'])
.addStyleEntry('style', ['./assets/scss/style.scss'])
.addStyleEntry('general', ['./assets/css/general.css'])
.addStyleEntry('vr.slides', ['./assets/less/vr.slides.less'])
.addStyleEntry('style_invoice', ['./assets/scss/style_invoice.scss'])
.addStyleEntry('style-booking', ['./assets/scss/style-booking.scss'])
.addStyleEntry('style-hp', ['./assets/scss/style-hp.scss'])
.addStyleEntry('select2-core', ['./assets/js/components/select2/src/scss/core.scss'])
.addStyleEntry('base-css', [
'./assets/js/chosen/chosen.css',
'./assets/css/simplrform.css',
'./assets/css/magnific-popup.css',
'./assets/js/bootstrap-datepicker/css/bootstrap-datepicker3.standalone.min.css',
'./assets/css/daterangepicker.css',
'./assets/css/animate.min.css',
'./assets/less/vr.messaging.less',
'./assets/less/vr.attachments.less',
'./assets/less/vr.myprofile.less',
'./assets/css/mobile-styles.css',
'./assets/css/fa/css/font-awesome.css'
])
.addEntry('new-relic-monitoring', './assets/js/new-relic-monitoring.js')
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
.enableSassLoader()
.enableLessLoader()
.autoProvidejQuery()
.addPlugin(new CopyWebpackPlugin(
[
{from: './assets/images', to: 'static'},
{from: './assets/js', to: 'js'},
{from: './assets/css', to: 'css'},
{from: './assets/media', to: 'media'},
{from: './assets/manifest', to: 'manifest'}
]
))
.addPlugin(new ConcatPlugin(
{
uglify: Encore.isProduction(),
sourceMap: false,
fileName: "vr-base.js",
filesToConcat: [
'./assets/js/vr/vr.js',
'./assets/js/vr/vr.user-preferences.js',
'./assets/js/vr/vr.account.js',
'./assets/js/vr/vr.cta.js',
'./assets/js/vr/vr.confirm-dialog.js',
'./assets/js/vr/vr.tutorials.js',
'./assets/js/vr/vr.forms.js',
'./assets/js/vr/vr.stepper.js',
'./assets/js/vr/vr.my-venues.js',
'./assets/js/vr/vr.favorites.js',
'./assets/js/vr/vr.venue-list.js',
'./assets/js/vr/vr.top-menu.js',
'./assets/js/vr/vr.venue-search.js',
'./assets/js/vr/vr.roundups.js',
'./assets/js/vr/vr.booking.js',
'./assets/js/vr/vr.messaging.js',
'./assets/js/vr/vr.login.js',
'./assets/js/vr/vr.tracking.js',
'./assets/js/vr/vr.hpsdk.js',
'./assets/js/vr/vr.stories.js',
'./assets/js/vr/vr.user-gatherings.js',
'./assets/js/vr/vr.header.js',
'./assets/js/vr/vr.destinations.js',
'./assets/js/vr/vr.doubleclick.js',
'./assets/js/vr/vr.modal.js',
'./assets/js/vr/vr.room-blocks.js',
'./assets/js/vr/vr.coco-form.js',
]
})
)
.addPlugin(new ConcatPlugin(
{
uglify: Encore.isProduction(),
fileName: 'app-base.js',
filesToConcat: [
'./assets/js/jquery.history.js',
'./assets/js/trash.js',
'./assets/js/jquery.magnific-popup.min.js',
'./assets/js/pinterest.js',
'./assets/js/uniform/jquery.uniform.min.js',
'./assets/js/chosen/chosen.jquery.min.js',
'./assets/js/moment.min.js',
'./assets/js/hoverIntent.js',
'./assets/js/flexslider.min.js',
'./assets/js/cookie.js',
'./assets/js/scripts.js',
'./assets/js/jquery.inview.js',
'./assets/js/custom.js',
'./assets/js/mobile.js',
'./assets/js/global-ajax.js',
'./assets/js/jquery.imageloader.js',
'./assets/js/jquery.validate.min.js',
'./assets/js/bootstrap-datepicker/js/bootstrap-datepicker.min.js',
'./assets/js/daterangepicker.js',
'./assets/js/jquery.touch.js',
'./assets/js/range-multiple.min.js',
'./assets/js/components/slick-carousel/slick/slick.min.js',
'./assets/js/components/select2/dist/js/select2.min.js',
'./assets/js/components/fancybox/lib/jquery.mousewheel-3.0.6.pack.js',
'./assets/js/components/fancybox/source/jquery.fancybox.pack.js',
'./assets/js/components/iCheck/icheck.min.js',
'./assets/js/libs/jquery.mask.min.js',
'./assets/js/components/tooltipster/dist/js/tooltipster.bundle.min.js',
'./assets/js/vr-scripts.js',
'./assets/js/jquery.sticky.js'
]
}
))
;
module.exports = Encore.getWebpackConfig();
package.json:
{
"devDependencies": {
"bootstrap-datepicker": "^1.5.0",
"webpack-notifier": "^1.6.0"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev --progress",
"watch": "encore dev --watch",
"build": "encore production --progress"
},
"dependencies": {
"@symfony/webpack-encore": "^0.22.0",
"copy-webpack-plugin": "^4.6.0",
"core-js": "3",
"jquery": "1.11.3",
"jquery-migrate": "1.2.1",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"node-sass": "^4.11.0",
"package": "^1.0.1",
"sass-loader": "^7.0.1",
"url-loader": "^1.1.2",
"webpack-concat-plugin": "^3.0.0"
}
}
Якщо в файл .babelrc написати щось некоректне, то компіляція не завершується, вибиває помилку компіляції, це значить що цей файл задіюється