webpackとbabelとgulpとreactを使用した際のIE10の対応

現在webpackとbabelとreactを使用した際のIE10の対応で
シンタックスエラーとxmlhttprequestがうまくいかず困っております。

構文エラーとCORSエラーが出ておりますがIE１１では問題なく動作しており
CORSエラーも他ドメインは許可にしているので出ない予定です。

gulpfile.js

js
1var gulp        = require('gulp');
2var watch       = require('gulp-watch');
3var plumber     = require('gulp-plumber');
4var notify      = require('gulp-notify')
5var browserSync = require('browser-sync').create();
6var webpack       = require('webpack');
7var webpackStream = require('webpack-stream');
8var webpackConfig = require('./webpack.config.js');
9
10gulp.task('compile', function () {
11    return gulp.src([
12        './src/js/index.js',
13    ])
14    .pipe(plumber({errorHandler: notify.onError('<%= error.message %>')}))
15    .pipe(webpackStream(webpackConfig), null, function(err, stats){
16        if(stats.compilation.errors.length > 0){
17            notify({
18                title: 'webpack error',
19                message: stats.compilation.errors[0].error
20            });
21        }
22    })
23    .pipe(gulp.dest('dist'))
24})
25
26gulp.task('browser-sync', function () {
27    browserSync.init({
28        server: {
29            baseDir: "./"
30        }
31    });
32});
33
34gulp.task('watch', function () {
35    watch(['./src/js/**/**.js'], function () {
36        gulp.start(['compile']);
37        browserSync.reload();
38    });
39    watch(['./**/*.html', './dist/**/*.js', './css/**/*.css'], function () {
40        browserSync.reload();
41    });
42});
43
44gulp.task('default', ['compile', 'browser-sync', 'watch']);
45

webpack.config.js

js
1module.exports = {
2    mode: 'development',
3    devtool: 'source-map',
4    entry: ['@babel/polyfill', './src/js/index.js'],
5    output: {
6        path: '/dist',
7        filename: 'search.js'
8    },
9    module: {
10        rules: [
11            {
12                test: /.(js|jsx)$/, // 対象となるファイルの拡張子（正規表現可）
13                exclude: /node_modules/, // 除外するファイル/ディレクトリ（正規表現可）
14                loader: 'babel-loader', // 使用するloader
15                query: {
16                    presets: ['es2015', 'react']
17                }
18            }
19        ]
20    }
21}
22

package.json

json
1{
2  "name": "app",
3  "version": "1.0.0",
4  "description": "",
5  "main": "index.js",
6  "scripts": {
7    "test": "echo \"Error: no test specified\" && exit 1"
8  },
9  "keywords": [],
10  "author": "",
11  "license": "ISC",
12  "devDependencies": {
13    "babel-core": "^6.26.3",
14    "babel-loader": "^7.1.5",
15    "babel-preset-es2015": "^6.24.1",
16    "babel-preset-react": "^6.24.1",
17    "browser-sync": "^2.26.3",
18    "gulp": "^3.9.1",
19    "gulp-notify": "^3.2.0",
20    "gulp-plumber": "^1.2.0",
21    "gulp-watch": "^5.0.1",
22    "webpack": "^4.26.0",
23    "webpack-stream": "^5.1.1"
24  },
25  "dependencies": {
26    "@babel/polyfill": "^7.0.0",
27    "fast-xml-parser": "^3.12.7",
28    "formdata-polyfill": "^3.0.13",
29    "react": "^16.6.3",
30    "react-dom": "^16.6.3",
31    "superagent": "^3.8.2"
32  }
33}
34

行動規範の内容に同意します

回答1件

自己解決

node_modules内が除外されてるのが原因でした。

webpack.config.js

js
1module.exports = {
2    mode: 'development',
3    devtool: 'source-map',
4    entry: ['@babel/polyfill', './src/js/index.js'],
5    output: {
6        path: '/dist',
7        filename: 'search.js'
8    },
9    module: {
10        rules: [
11            {
12                test: /.(js|jsx)$/, // 
13                //exclude: /node_modules/, // ここが除外されていたので中のES2015は変換されていなかった
14                loader: 'babel-loader', // 
15                query: {
16                    presets: ['es2015', 'react']
17                }
18            }
19        ]
20    }
21}