S
S
Sergey Burduzha2020-09-26 12:34:05
JavaScript
Sergey Burduzha, 2020-09-26 12:34:05

Why doesn't es6 work in ie11?

Good afternoon.
I mostly do layout and want to use new js features and get away from jquery.
I installed babel gulp webpack-stream and the code I write works in microsoft edge, but not in ie 11.
Problem with default settings.

let divide = function(first, second = 10) {
  return first / second;
};
export default divide;


package.json
"devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "babel-loader": "^8.1.0",
    "browser-sync": "^2.26.12",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-debug": "^4.0.0",
    "gulp-newer": "^1.4.0",
    "gulp-notify": "^3.2.0",
    "gulp-plumber": "^1.2.1",
    "gulp-pug": "^4.0.1",
    "gulp-sass": "^4.1.0",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-wait": "0.0.2",
    "rimraf": "^3.0.2",
    "webpack": "^4.44.2",
    "webpack-stream": "^6.1.0"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "gsap": "^3.5.1",
    "jquery": "^3.5.1"
  }


gulpfile.js
'use strict';

let gulp = require('gulp'),
  sass = require('gulp-sass'),
  autoprefixer = require("gulp-autoprefixer"),
  sourcemaps = require('gulp-sourcemaps'),
  wait = require('gulp-wait'),
  pug = require('gulp-pug'),
  //settings
  newer = require("gulp-newer"),
  debug = require("gulp-debug"),
  notify = require("gulp-notify"),
  plumber = require("gulp-plumber"),
  browserSync = require('browser-sync').create(),
  rimraf = require("rimraf");
const webpack = require('webpack-stream');

let webpackConfig = {
  output: {
    filename: "main.js"
  },
  module: {
    rules: [
      {
        test: "/\.js$/",
        loader: "babel-loader",
        exclude: "/node_modules/"
      }
    ]
  }
};

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

gulp.task('pug', function () {
  return gulp.src('src/pug/pages/*.pug')
    .pipe(debug({title: "pug"}))
    .pipe(pug({
      pretty: true
    }))
    .pipe(gulp.dest('build/'))
    .pipe(browserSync.reload({
      stream: true
    }));
  // .pipe(notify("Change html"));
});
gulp.task("scss", function () {
  return gulp.src('src/assets/sass/my.scss')
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(wait(500))
    .pipe(sass({
      outputStyle: 'expanded'
    }).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('build/assets/css/'))
    .pipe(browserSync.reload({
      stream: true
    }));
  // .pipe(notify("Change css"));
});
gulp.task("libs", function () {
  return gulp.src('src/assets/libs/**/*.*', {since: gulp.lastRun('libs')})
    .pipe(newer('src/assets/libs/**/*.*'))
    .pipe(gulp.dest('build/assets/libs'))
    .on('end', browserSync.reload);
});
gulp.task("favicon", function () {
  return gulp.src("src/favicon.ico")
    .pipe(gulp.dest("build/"))
    .on('end', browserSync.reload);
});
gulp.task("fonts", function () {
  return gulp.src('src/assets/fonts/**/*.*', {since: gulp.lastRun('fonts')})
    .pipe(newer('build/assets/fonts'))
    .pipe(gulp.dest('build/assets/fonts'))
    .on('end', browserSync.reload);
});
gulp.task("alljs", function () {
  return gulp.src('src/assets/js/*.js')
    .pipe(gulp.dest('build/assets/js'))
    .pipe(browserSync.reload({
      stream: true
    }));
});
gulp.task("audio", function () {
  return gulp.src('src/assets/audio/**/*.*')
    .pipe(gulp.dest('build/assets/audio/'))
    .pipe(browserSync.reload({
      stream: true
    }));
});
gulp.task("image", function () {
  return gulp.src('src/assets/i/**/*.*', {since: gulp.lastRun('image')})
    .pipe(newer('build/assets/i'))
    .pipe(debug({title: "image"}))
    .pipe(gulp.dest('build/assets/i'))
    .pipe(browserSync.reload({
      stream: true
    }));
});
gulp.task("clean", function (cb) {
  return rimraf('build/', cb);
});
gulp.task("watch", function () {
  browserSync.init({
    server: {
      baseDir: "./build/"
    },
    notify: true
  });
  gulp.watch('src/assets/sass/**/*.scss', gulp.series('scss'));
  gulp.watch('src/pug/**/*.pug', gulp.series('pug'));
  gulp.watch('src/assets/js/**/*.js', gulp.series('webpack'));
  gulp.watch(['src/assets/i/**/*.*'], gulp.series("image"));
  gulp.watch(['src/assets/libs/**/*.*'], gulp.series("libs"));
  gulp.watch(['src/assets/fonts/**/*.*'], gulp.series("fonts"));
  gulp.watch(['src/assets/audio/**/*.*'], gulp.series("audio"));
});
let build = gulp.series('clean', gulp.parallel('webpack', 'pug', 'scss', 'alljs', 'fonts', 'audio', 'image', 'libs', 'favicon'));

gulp.task('build', build);

gulp.task('default', gulp.series(
  'clean',
  gulp.parallel('build', 'watch')
));


.babelrc at the root of the site
{
  "presets": [
    "env"
  ]
}


I have included core-js but haven't installed it yet.

Please help me figure it out.

Thanks in advance.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
V
Vladislav Lyskov, 2020-09-26
@Vlatqa

It's probably because ie11 doesn't support es6, right?

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question