QA@IT
«質問へ戻る

.babelrcの追加

0
本文
 お力添えのほどよろしくお願いいたします。
 ※.babelrcも追加していますが、こちらは入れるとエラーになります。
 
+### .babelrc
+{
+  "presets": ["react", "es2015"]
+}
 
 ### gulpfile.js
 

webpack4で、jsx内でReactの記述が使えない

webpack4とReact.jsの初心者です。

今回の目的は「component.jsx」でReactの書き方でコンパイルできればと思いのですが、
webpack4をあげてうまく動かなかったのですが、また一から対応して見た所、
以下のエラーが出てしまいました。。

ERROR in ./src/js/jsx/component.jsx
Module build failed (from /Users/kensu/Desktop/web/node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/kensu/Desktop/web/template-file/gulp/src/js/jsx/component.jsx: Unexpected token (20:1)

  10 |  render() {
  11 |      return (
> 12 |          <div>
     |          ^
  13 |              <h1>React.jsのテスト</h1>
  14 |          </div>
  15 |      );

以下に「gulpfile.js」、「webpack.config.js」、「component.jsx」、「package.json」も記述いたしましたので
お力添えのほどよろしくお願いいたします。
※.babelrcも追加していますが、こちらは入れるとエラーになります。

.babelrc

{
"presets": ["react", "es2015"]
}

gulpfile.js

/* ----------------------------------------------------------------------------------
node_modulesに格納されている各プラグインを読み込む
---------------------------------------------------------------------------------- */
var gulp          = require('../../node_modules/gulp');
var browserSync   = require('../../node_modules/browser-sync');
var watch         = require('../../node_modules/gulp-watch');
var sass          = require('../../node_modules/gulp-sass');
var runSequence   = require('../../node_modules/run-sequence');
var plumber       = require('../../node_modules/gulp-plumber');
var notify        = require('../../node_modules/gulp-notify');
var cache         = require('../../node_modules/gulp-cached');
var sourcemaps    = require('../../node_modules/gulp-sourcemaps');
var csso          = require('../../node_modules/gulp-csso');
var postcss       = require('../../node_modules/gulp-postcss');
var gzip          = require('../../node_modules/gulp-gzip');
var cssnext       = require('../../node_modules/postcss-cssnext');
var mqpacker      = require('../../node_modules/css-mqpacker');

//webpack設定
var webpack       = require('../../node_modules/webpack');
var webpackStream = require('../../node_modules/webpack-stream');

// webpack.config.jsの設定を読み込む
var webpackConfig = require('./webpack.config.js');


/* ----------------------------------------------------------------------------------
ファイルの変更を監視して、変更を即座にブラウザ反映
---------------------------------------------------------------------------------- */
gulp.task('browser-sync', function() {
    browserSync.init({
        // Webアプリケーションが動作しているアドレス(例ではIPアドレス)
        proxy: 'templates/' // プロキシを設定
    });
});
gulp.task('bs-reload', function() {
    browserSync.reload();
});

/* ----------------------------------------------------------------------------------
SASSをcssにコンパイル
---------------------------------------------------------------------------------- */
var AUTOPREFIXER_BROWSERS = [
  'last 2 version',
  'ie >= 11',
  'iOS >= 7',
  'Android >= 4.4'
];
gulp.task('sass', function() {
    var processors = [
      cssnext({
            browsers: AUTOPREFIXER_BROWSERS
        })
    ];
    return gulp.src(['src/sass/**/*.scss']).pipe(plumber({
    errorHandler: notify.onError('Error: <%= error.message %>')
    }))
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(csso())//min化
    .pipe(postcss(processors))//postcss化
    .pipe(postcss([mqpacker()]))//メディアクエリ一括化
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sourcemaps.write('./'))
    //.pipe(gzip())//gzip化
    .pipe(gulp.dest('../public/css/'));
});

/* ----------------------------------------------------------------------------------
jsファイルの更新
---------------------------------------------------------------------------------- */
gulp.task('js',function() {
    return gulp.src('../public/js/**/*.js')
    .pipe(plumber())
    .pipe(cache('js-cache'))
    .pipe(gulp.dest( '../public/js/'))
    .pipe(browserSync.stream());
});
gulp.task('webpack', function() {
    return gulp.src('src/js/**/*.js').pipe(plumber({
        errorHandler: notify.onError('Error: <%= error.message %>')
    }))
    .pipe(webpackStream(webpackConfig, webpack))
    //.pipe(gzip())//gzip化
    .pipe(gulp.dest('../public/js/'));
});

/* ----------------------------------------------------------------------------------
ファイルを並列・直列化
---------------------------------------------------------------------------------- */
gulp.task('build_scss', function(done) {
    runSequence('sass','bs-reload', done);
});
gulp.task('build_js', function (done) {
    runSequence('webpack','js','bs-reload', done);
});

/* ----------------------------------------------------------------------------------
ファイルの監視
---------------------------------------------------------------------------------- */
gulp.task('default',['browser-sync'],function() {
    watch(['src/sass/**/*.scss'], function(e) {
        gulp.start(['build_scss']);
    });

    watch(['src/html/**/*'], function(e) {
        gulp.start(['build_html'],'bs-reload');
    });

    watch(['src/js/**/*.js'], function(e) {
        gulp.start(['build_js','bs-reload']);
    });

    watch(['src/js/**/*.jsx'], function(e) {
        gulp.start(['build_js','bs-reload']);
    });

    watch(['../public/images/**/*.+(jpg|gif|png|ico|svg)'], function(e) {
        gulp.start(['bs-reload']);
    });

    gulp.watch('../public/**/*.+(html|php)', ['bs-reload']);
});

webpack.config.js

const path = require('path');
/* ----------------------------------------------------------------------------------
変数定義
---------------------------------------------------------------------------------- */
var webpack = require('../../node_modules/webpack');
var jsRootDir = './src/js/';


/* ----------------------------------------------------------------------------------
コンパイルの仕方を定義
---------------------------------------------------------------------------------- */
var webpackConfig = {
    mode: 'production',
    // インポートファイル(ここに新規ファイルを追加していく)
    entry: {
        main: jsRootDir + 'main.js', // 共通
        index: jsRootDir + 'page/index.js', // トップページ
        component: jsRootDir + 'jsx/component.jsx' // JSXページ
    },
    // ビルド実行して実際に出力されるファイル
    output: {
        filename: '[name].js',
        path: path.join(__dirname, '/dist'),
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    externals: {
        jQuery: 'jQuery'
    },
    node: {
        setImmediate: false
    },
    devtool: 'source-map',
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.AggressiveMergingPlugin(),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        }),
        new webpack.HotModuleReplacementPlugin()
    ]
}
module.exports = webpackConfig;

component.jsx

'use strict';
const $ = require('jquery');
const React = require('react');
const ReactDOM = require('react-dom');


class Foo extends React.Component {
    render() {
        return (
            <div>
                <h1>React.jsのテスト</h1>
            </div>
        );
    }
}

ReactDOM.render(
    <Foo />,
    document.getElementById('example')
);

package.json

{
  "name": "template",
  "version": "0.0.0",
  "description": "template",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode production --open"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "browser-sync": "^2.18.2",
    "css-loader": "^1.0.0",
    "css-mqpacker": "^6.0.2",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-cached": "^1.1.1",
    "gulp-changed": "^1.3.2",
    "gulp-clean-css": "^3.7.0",
    "gulp-compass": "^2.1.0",
    "gulp-concat": "^2.6.1",
    "gulp-csscomb": "^3.0.8",
    "gulp-cssmin": "^0.1.7",
    "gulp-csso": "^3.0.1",
    "gulp-ejs": "^3.1.1",
    "gulp-gzip": "^1.4.1",
    "gulp-htmlhint": "^0.3.1",
    "gulp-imagemin": "^3.1.1",
    "gulp-notify": "^2.2.0",
    "gulp-plumber": "^1.1.0",
    "gulp-postcss": "^7.0.1",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.0.0",
    "gulp-sftp": "^0.1.5",
    "gulp-uglify": "^2.0.0",
    "gulp-util": "^3.0.8",
    "gulp-watch": "^4.3.11",
    "gulp-webpack": "^1.5.0",
    "imagemin-pngquant": "^5.0.0",
    "jquery": "^3.3.1",
    "jsx-loader": "^0.13.2",
    "postcss-cssnext": "^3.1.0",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "rimraf": "^2.6.1",
    "run-sequence": "^1.2.2",
    "style-loader": "^0.23.0",
    "vinyl-ftp": "^0.5.0",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2",
    "webpack-stream": "^4.0.0"
  },
  "dependencies": {
    "ajv": "^6.5.4",
    "animejs": "^2.2.0",
    "del": "^2.2.2",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "imagemin-pngquant": "^5.0.0",
    "slick-carousel": "^1.8.1",
    "terser": "^3.9.3",
    "terser-webpack-plugin": "^1.1.0",
    "webpack-merge": "^4.1.4"
  }
}

webpack4とReact.jsの初心者です。

今回の目的は「component.jsx」でReactの書き方でコンパイルできればと思いのですが、
webpack4をあげてうまく動かなかったのですが、また一から対応して見た所、
以下のエラーが出てしまいました。。

```ここに言語を入力
ERROR in ./src/js/jsx/component.jsx
Module build failed (from /Users/kensu/Desktop/web/node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/kensu/Desktop/web/template-file/gulp/src/js/jsx/component.jsx: Unexpected token (20:1)

  10 | 	render() {
  11 | 		return (
> 12 | 			<div>
     | 			^
  13 | 				<h1>React.jsのテスト</h1>
  14 | 			</div>
  15 | 		);
```

以下に「gulpfile.js」、「webpack.config.js」、「component.jsx」、「package.json」も記述いたしましたので
お力添えのほどよろしくお願いいたします。
※.babelrcも追加していますが、こちらは入れるとエラーになります。

### .babelrc
{
  "presets": ["react", "es2015"]
}

### gulpfile.js

```ここに言語を入力
/* ----------------------------------------------------------------------------------
node_modulesに格納されている各プラグインを読み込む
---------------------------------------------------------------------------------- */
var gulp          = require('../../node_modules/gulp');
var browserSync   = require('../../node_modules/browser-sync');
var watch         = require('../../node_modules/gulp-watch');
var sass          = require('../../node_modules/gulp-sass');
var runSequence   = require('../../node_modules/run-sequence');
var plumber       = require('../../node_modules/gulp-plumber');
var notify        = require('../../node_modules/gulp-notify');
var cache         = require('../../node_modules/gulp-cached');
var sourcemaps    = require('../../node_modules/gulp-sourcemaps');
var csso          = require('../../node_modules/gulp-csso');
var postcss       = require('../../node_modules/gulp-postcss');
var gzip          = require('../../node_modules/gulp-gzip');
var cssnext       = require('../../node_modules/postcss-cssnext');
var mqpacker      = require('../../node_modules/css-mqpacker');

//webpack設定
var webpack       = require('../../node_modules/webpack');
var webpackStream = require('../../node_modules/webpack-stream');

// webpack.config.jsの設定を読み込む
var webpackConfig = require('./webpack.config.js');


/* ----------------------------------------------------------------------------------
ファイルの変更を監視して、変更を即座にブラウザ反映
---------------------------------------------------------------------------------- */
gulp.task('browser-sync', function() {
	browserSync.init({
		// Webアプリケーションが動作しているアドレス(例ではIPアドレス)
		proxy: 'templates/' // プロキシを設定
	});
});
gulp.task('bs-reload', function() {
	browserSync.reload();
});

/* ----------------------------------------------------------------------------------
SASSをcssにコンパイル
---------------------------------------------------------------------------------- */
var AUTOPREFIXER_BROWSERS = [
  'last 2 version',
  'ie >= 11',
  'iOS >= 7',
  'Android >= 4.4'
];
gulp.task('sass', function() {
    var processors = [
      cssnext({
            browsers: AUTOPREFIXER_BROWSERS
        })
    ];
    return gulp.src(['src/sass/**/*.scss']).pipe(plumber({
    errorHandler: notify.onError('Error: <%= error.message %>')
    }))
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(csso())//min化
    .pipe(postcss(processors))//postcss化
    .pipe(postcss([mqpacker()]))//メディアクエリ一括化
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sourcemaps.write('./'))
    //.pipe(gzip())//gzip化
    .pipe(gulp.dest('../public/css/'));
});

/* ----------------------------------------------------------------------------------
jsファイルの更新
---------------------------------------------------------------------------------- */
gulp.task('js',function() {
	return gulp.src('../public/js/**/*.js')
	.pipe(plumber())
	.pipe(cache('js-cache'))
	.pipe(gulp.dest( '../public/js/'))
	.pipe(browserSync.stream());
});
gulp.task('webpack', function() {
    return gulp.src('src/js/**/*.js').pipe(plumber({
        errorHandler: notify.onError('Error: <%= error.message %>')
    }))
    .pipe(webpackStream(webpackConfig, webpack))
    //.pipe(gzip())//gzip化
    .pipe(gulp.dest('../public/js/'));
});

/* ----------------------------------------------------------------------------------
ファイルを並列・直列化
---------------------------------------------------------------------------------- */
gulp.task('build_scss', function(done) {
	runSequence('sass','bs-reload', done);
});
gulp.task('build_js', function (done) {
    runSequence('webpack','js','bs-reload', done);
});

/* ----------------------------------------------------------------------------------
ファイルの監視
---------------------------------------------------------------------------------- */
gulp.task('default',['browser-sync'],function() {
	watch(['src/sass/**/*.scss'], function(e) {
		gulp.start(['build_scss']);
	});

	watch(['src/html/**/*'], function(e) {
		gulp.start(['build_html'],'bs-reload');
	});

	watch(['src/js/**/*.js'], function(e) {
		gulp.start(['build_js','bs-reload']);
	});

    watch(['src/js/**/*.jsx'], function(e) {
        gulp.start(['build_js','bs-reload']);
    });

	watch(['../public/images/**/*.+(jpg|gif|png|ico|svg)'], function(e) {
		gulp.start(['bs-reload']);
	});

	gulp.watch('../public/**/*.+(html|php)', ['bs-reload']);
});
```

### webpack.config.js
```ここに言語を入力
const path = require('path');
/* ----------------------------------------------------------------------------------
変数定義
---------------------------------------------------------------------------------- */
var webpack = require('../../node_modules/webpack');
var jsRootDir = './src/js/';


/* ----------------------------------------------------------------------------------
コンパイルの仕方を定義
---------------------------------------------------------------------------------- */
var webpackConfig = {
    mode: 'production',
    // インポートファイル(ここに新規ファイルを追加していく)
    entry: {
        main: jsRootDir + 'main.js', // 共通
        index: jsRootDir + 'page/index.js', // トップページ
        component: jsRootDir + 'jsx/component.jsx' // JSXページ
    },
    // ビルド実行して実際に出力されるファイル
    output: {
        filename: '[name].js',
        path: path.join(__dirname, '/dist'),
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    externals: {
        jQuery: 'jQuery'
    },
    node: {
        setImmediate: false
    },
    devtool: 'source-map',
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.AggressiveMergingPlugin(),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        }),
        new webpack.HotModuleReplacementPlugin()
    ]
}
module.exports = webpackConfig;
```

### component.jsx

```ここに言語を入力
'use strict';
const $ = require('jquery');
const React = require('react');
const ReactDOM = require('react-dom');


class Foo extends React.Component {
	render() {
		return (
			<div>
				<h1>React.jsのテスト</h1>
			</div>
		);
	}
}

ReactDOM.render(
	<Foo />,
	document.getElementById('example')
);

```

### package.json
```ここに言語を入力
{
  "name": "template",
  "version": "0.0.0",
  "description": "template",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode production --open"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "browser-sync": "^2.18.2",
    "css-loader": "^1.0.0",
    "css-mqpacker": "^6.0.2",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-cached": "^1.1.1",
    "gulp-changed": "^1.3.2",
    "gulp-clean-css": "^3.7.0",
    "gulp-compass": "^2.1.0",
    "gulp-concat": "^2.6.1",
    "gulp-csscomb": "^3.0.8",
    "gulp-cssmin": "^0.1.7",
    "gulp-csso": "^3.0.1",
    "gulp-ejs": "^3.1.1",
    "gulp-gzip": "^1.4.1",
    "gulp-htmlhint": "^0.3.1",
    "gulp-imagemin": "^3.1.1",
    "gulp-notify": "^2.2.0",
    "gulp-plumber": "^1.1.0",
    "gulp-postcss": "^7.0.1",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.0.0",
    "gulp-sftp": "^0.1.5",
    "gulp-uglify": "^2.0.0",
    "gulp-util": "^3.0.8",
    "gulp-watch": "^4.3.11",
    "gulp-webpack": "^1.5.0",
    "imagemin-pngquant": "^5.0.0",
    "jquery": "^3.3.1",
    "jsx-loader": "^0.13.2",
    "postcss-cssnext": "^3.1.0",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "rimraf": "^2.6.1",
    "run-sequence": "^1.2.2",
    "style-loader": "^0.23.0",
    "vinyl-ftp": "^0.5.0",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2",
    "webpack-stream": "^4.0.0"
  },
  "dependencies": {
    "ajv": "^6.5.4",
    "animejs": "^2.2.0",
    "del": "^2.2.2",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "imagemin-pngquant": "^5.0.0",
    "slick-carousel": "^1.8.1",
    "terser": "^3.9.3",
    "terser-webpack-plugin": "^1.1.0",
    "webpack-merge": "^4.1.4"
  }
}

```

質問を投稿

webpack4で、jsx内でReactの記述が使えない

webpack4とReact.jsの初心者です。

今回の目的は「component.jsx」でReactの書き方でコンパイルできればと思いのですが、
webpack4をあげてうまく動かなかったのですが、また一から対応して見た所、
以下のエラーが出てしまいました。。

ERROR in ./src/js/jsx/component.jsx
Module build failed (from /Users/kensu/Desktop/web/node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/kensu/Desktop/web/template-file/gulp/src/js/jsx/component.jsx: Unexpected token (20:1)

  10 |  render() {
  11 |      return (
> 12 |          <div>
     |          ^
  13 |              <h1>React.jsのテスト</h1>
  14 |          </div>
  15 |      );

以下に「gulpfile.js」、「webpack.config.js」、「component.jsx」、「package.json」も記述いたしましたので
お力添えのほどよろしくお願いいたします。
※.babelrcも追加していますが、こちらは入れるとエラーになります。

gulpfile.js

/* ----------------------------------------------------------------------------------
node_modulesに格納されている各プラグインを読み込む
---------------------------------------------------------------------------------- */
var gulp          = require('../../node_modules/gulp');
var browserSync   = require('../../node_modules/browser-sync');
var watch         = require('../../node_modules/gulp-watch');
var sass          = require('../../node_modules/gulp-sass');
var runSequence   = require('../../node_modules/run-sequence');
var plumber       = require('../../node_modules/gulp-plumber');
var notify        = require('../../node_modules/gulp-notify');
var cache         = require('../../node_modules/gulp-cached');
var sourcemaps    = require('../../node_modules/gulp-sourcemaps');
var csso          = require('../../node_modules/gulp-csso');
var postcss       = require('../../node_modules/gulp-postcss');
var gzip          = require('../../node_modules/gulp-gzip');
var cssnext       = require('../../node_modules/postcss-cssnext');
var mqpacker      = require('../../node_modules/css-mqpacker');

//webpack設定
var webpack       = require('../../node_modules/webpack');
var webpackStream = require('../../node_modules/webpack-stream');

// webpack.config.jsの設定を読み込む
var webpackConfig = require('./webpack.config.js');


/* ----------------------------------------------------------------------------------
ファイルの変更を監視して、変更を即座にブラウザ反映
---------------------------------------------------------------------------------- */
gulp.task('browser-sync', function() {
    browserSync.init({
        // Webアプリケーションが動作しているアドレス(例ではIPアドレス)
        proxy: 'templates/' // プロキシを設定
    });
});
gulp.task('bs-reload', function() {
    browserSync.reload();
});

/* ----------------------------------------------------------------------------------
SASSをcssにコンパイル
---------------------------------------------------------------------------------- */
var AUTOPREFIXER_BROWSERS = [
  'last 2 version',
  'ie >= 11',
  'iOS >= 7',
  'Android >= 4.4'
];
gulp.task('sass', function() {
    var processors = [
      cssnext({
            browsers: AUTOPREFIXER_BROWSERS
        })
    ];
    return gulp.src(['src/sass/**/*.scss']).pipe(plumber({
    errorHandler: notify.onError('Error: <%= error.message %>')
    }))
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(csso())//min化
    .pipe(postcss(processors))//postcss化
    .pipe(postcss([mqpacker()]))//メディアクエリ一括化
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sourcemaps.write('./'))
    //.pipe(gzip())//gzip化
    .pipe(gulp.dest('../public/css/'));
});

/* ----------------------------------------------------------------------------------
jsファイルの更新
---------------------------------------------------------------------------------- */
gulp.task('js',function() {
    return gulp.src('../public/js/**/*.js')
    .pipe(plumber())
    .pipe(cache('js-cache'))
    .pipe(gulp.dest( '../public/js/'))
    .pipe(browserSync.stream());
});
gulp.task('webpack', function() {
    return gulp.src('src/js/**/*.js').pipe(plumber({
        errorHandler: notify.onError('Error: <%= error.message %>')
    }))
    .pipe(webpackStream(webpackConfig, webpack))
    //.pipe(gzip())//gzip化
    .pipe(gulp.dest('../public/js/'));
});

/* ----------------------------------------------------------------------------------
ファイルを並列・直列化
---------------------------------------------------------------------------------- */
gulp.task('build_scss', function(done) {
    runSequence('sass','bs-reload', done);
});
gulp.task('build_js', function (done) {
    runSequence('webpack','js','bs-reload', done);
});

/* ----------------------------------------------------------------------------------
ファイルの監視
---------------------------------------------------------------------------------- */
gulp.task('default',['browser-sync'],function() {
    watch(['src/sass/**/*.scss'], function(e) {
        gulp.start(['build_scss']);
    });

    watch(['src/html/**/*'], function(e) {
        gulp.start(['build_html'],'bs-reload');
    });

    watch(['src/js/**/*.js'], function(e) {
        gulp.start(['build_js','bs-reload']);
    });

    watch(['src/js/**/*.jsx'], function(e) {
        gulp.start(['build_js','bs-reload']);
    });

    watch(['../public/images/**/*.+(jpg|gif|png|ico|svg)'], function(e) {
        gulp.start(['bs-reload']);
    });

    gulp.watch('../public/**/*.+(html|php)', ['bs-reload']);
});

webpack.config.js

const path = require('path');
/* ----------------------------------------------------------------------------------
変数定義
---------------------------------------------------------------------------------- */
var webpack = require('../../node_modules/webpack');
var jsRootDir = './src/js/';


/* ----------------------------------------------------------------------------------
コンパイルの仕方を定義
---------------------------------------------------------------------------------- */
var webpackConfig = {
    mode: 'production',
    // インポートファイル(ここに新規ファイルを追加していく)
    entry: {
        main: jsRootDir + 'main.js', // 共通
        index: jsRootDir + 'page/index.js', // トップページ
        component: jsRootDir + 'jsx/component.jsx' // JSXページ
    },
    // ビルド実行して実際に出力されるファイル
    output: {
        filename: '[name].js',
        path: path.join(__dirname, '/dist'),
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    externals: {
        jQuery: 'jQuery'
    },
    node: {
        setImmediate: false
    },
    devtool: 'source-map',
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.AggressiveMergingPlugin(),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        }),
        new webpack.HotModuleReplacementPlugin()
    ]
}
module.exports = webpackConfig;

component.jsx

'use strict';
const $ = require('jquery');
const React = require('react');
const ReactDOM = require('react-dom');


class Foo extends React.Component {
    render() {
        return (
            <div>
                <h1>React.jsのテスト</h1>
            </div>
        );
    }
}

ReactDOM.render(
    <Foo />,
    document.getElementById('example')
);

package.json

{
  "name": "template",
  "version": "0.0.0",
  "description": "template",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode production --open"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "browser-sync": "^2.18.2",
    "css-loader": "^1.0.0",
    "css-mqpacker": "^6.0.2",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-cached": "^1.1.1",
    "gulp-changed": "^1.3.2",
    "gulp-clean-css": "^3.7.0",
    "gulp-compass": "^2.1.0",
    "gulp-concat": "^2.6.1",
    "gulp-csscomb": "^3.0.8",
    "gulp-cssmin": "^0.1.7",
    "gulp-csso": "^3.0.1",
    "gulp-ejs": "^3.1.1",
    "gulp-gzip": "^1.4.1",
    "gulp-htmlhint": "^0.3.1",
    "gulp-imagemin": "^3.1.1",
    "gulp-notify": "^2.2.0",
    "gulp-plumber": "^1.1.0",
    "gulp-postcss": "^7.0.1",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.0.0",
    "gulp-sftp": "^0.1.5",
    "gulp-uglify": "^2.0.0",
    "gulp-util": "^3.0.8",
    "gulp-watch": "^4.3.11",
    "gulp-webpack": "^1.5.0",
    "imagemin-pngquant": "^5.0.0",
    "jquery": "^3.3.1",
    "jsx-loader": "^0.13.2",
    "postcss-cssnext": "^3.1.0",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "rimraf": "^2.6.1",
    "run-sequence": "^1.2.2",
    "style-loader": "^0.23.0",
    "vinyl-ftp": "^0.5.0",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2",
    "webpack-stream": "^4.0.0"
  },
  "dependencies": {
    "ajv": "^6.5.4",
    "animejs": "^2.2.0",
    "del": "^2.2.2",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "imagemin-pngquant": "^5.0.0",
    "slick-carousel": "^1.8.1",
    "terser": "^3.9.3",
    "terser-webpack-plugin": "^1.1.0",
    "webpack-merge": "^4.1.4"
  }
}

webpack4とReact.jsの初心者です。

今回の目的は「component.jsx」でReactの書き方でコンパイルできればと思いのですが、
webpack4をあげてうまく動かなかったのですが、また一から対応して見た所、
以下のエラーが出てしまいました。。

```ここに言語を入力
ERROR in ./src/js/jsx/component.jsx
Module build failed (from /Users/kensu/Desktop/web/node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/kensu/Desktop/web/template-file/gulp/src/js/jsx/component.jsx: Unexpected token (20:1)

  10 | 	render() {
  11 | 		return (
> 12 | 			<div>
     | 			^
  13 | 				<h1>React.jsのテスト</h1>
  14 | 			</div>
  15 | 		);
```

以下に「gulpfile.js」、「webpack.config.js」、「component.jsx」、「package.json」も記述いたしましたので
お力添えのほどよろしくお願いいたします。
※.babelrcも追加していますが、こちらは入れるとエラーになります。


### gulpfile.js

```ここに言語を入力
/* ----------------------------------------------------------------------------------
node_modulesに格納されている各プラグインを読み込む
---------------------------------------------------------------------------------- */
var gulp          = require('../../node_modules/gulp');
var browserSync   = require('../../node_modules/browser-sync');
var watch         = require('../../node_modules/gulp-watch');
var sass          = require('../../node_modules/gulp-sass');
var runSequence   = require('../../node_modules/run-sequence');
var plumber       = require('../../node_modules/gulp-plumber');
var notify        = require('../../node_modules/gulp-notify');
var cache         = require('../../node_modules/gulp-cached');
var sourcemaps    = require('../../node_modules/gulp-sourcemaps');
var csso          = require('../../node_modules/gulp-csso');
var postcss       = require('../../node_modules/gulp-postcss');
var gzip          = require('../../node_modules/gulp-gzip');
var cssnext       = require('../../node_modules/postcss-cssnext');
var mqpacker      = require('../../node_modules/css-mqpacker');

//webpack設定
var webpack       = require('../../node_modules/webpack');
var webpackStream = require('../../node_modules/webpack-stream');

// webpack.config.jsの設定を読み込む
var webpackConfig = require('./webpack.config.js');


/* ----------------------------------------------------------------------------------
ファイルの変更を監視して、変更を即座にブラウザ反映
---------------------------------------------------------------------------------- */
gulp.task('browser-sync', function() {
	browserSync.init({
		// Webアプリケーションが動作しているアドレス(例ではIPアドレス)
		proxy: 'templates/' // プロキシを設定
	});
});
gulp.task('bs-reload', function() {
	browserSync.reload();
});

/* ----------------------------------------------------------------------------------
SASSをcssにコンパイル
---------------------------------------------------------------------------------- */
var AUTOPREFIXER_BROWSERS = [
  'last 2 version',
  'ie >= 11',
  'iOS >= 7',
  'Android >= 4.4'
];
gulp.task('sass', function() {
    var processors = [
      cssnext({
            browsers: AUTOPREFIXER_BROWSERS
        })
    ];
    return gulp.src(['src/sass/**/*.scss']).pipe(plumber({
    errorHandler: notify.onError('Error: <%= error.message %>')
    }))
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(csso())//min化
    .pipe(postcss(processors))//postcss化
    .pipe(postcss([mqpacker()]))//メディアクエリ一括化
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sourcemaps.write('./'))
    //.pipe(gzip())//gzip化
    .pipe(gulp.dest('../public/css/'));
});

/* ----------------------------------------------------------------------------------
jsファイルの更新
---------------------------------------------------------------------------------- */
gulp.task('js',function() {
	return gulp.src('../public/js/**/*.js')
	.pipe(plumber())
	.pipe(cache('js-cache'))
	.pipe(gulp.dest( '../public/js/'))
	.pipe(browserSync.stream());
});
gulp.task('webpack', function() {
    return gulp.src('src/js/**/*.js').pipe(plumber({
        errorHandler: notify.onError('Error: <%= error.message %>')
    }))
    .pipe(webpackStream(webpackConfig, webpack))
    //.pipe(gzip())//gzip化
    .pipe(gulp.dest('../public/js/'));
});

/* ----------------------------------------------------------------------------------
ファイルを並列・直列化
---------------------------------------------------------------------------------- */
gulp.task('build_scss', function(done) {
	runSequence('sass','bs-reload', done);
});
gulp.task('build_js', function (done) {
    runSequence('webpack','js','bs-reload', done);
});

/* ----------------------------------------------------------------------------------
ファイルの監視
---------------------------------------------------------------------------------- */
gulp.task('default',['browser-sync'],function() {
	watch(['src/sass/**/*.scss'], function(e) {
		gulp.start(['build_scss']);
	});

	watch(['src/html/**/*'], function(e) {
		gulp.start(['build_html'],'bs-reload');
	});

	watch(['src/js/**/*.js'], function(e) {
		gulp.start(['build_js','bs-reload']);
	});

    watch(['src/js/**/*.jsx'], function(e) {
        gulp.start(['build_js','bs-reload']);
    });

	watch(['../public/images/**/*.+(jpg|gif|png|ico|svg)'], function(e) {
		gulp.start(['bs-reload']);
	});

	gulp.watch('../public/**/*.+(html|php)', ['bs-reload']);
});
```

### webpack.config.js
```ここに言語を入力
const path = require('path');
/* ----------------------------------------------------------------------------------
変数定義
---------------------------------------------------------------------------------- */
var webpack = require('../../node_modules/webpack');
var jsRootDir = './src/js/';


/* ----------------------------------------------------------------------------------
コンパイルの仕方を定義
---------------------------------------------------------------------------------- */
var webpackConfig = {
    mode: 'production',
    // インポートファイル(ここに新規ファイルを追加していく)
    entry: {
        main: jsRootDir + 'main.js', // 共通
        index: jsRootDir + 'page/index.js', // トップページ
        component: jsRootDir + 'jsx/component.jsx' // JSXページ
    },
    // ビルド実行して実際に出力されるファイル
    output: {
        filename: '[name].js',
        path: path.join(__dirname, '/dist'),
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    externals: {
        jQuery: 'jQuery'
    },
    node: {
        setImmediate: false
    },
    devtool: 'source-map',
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.AggressiveMergingPlugin(),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        }),
        new webpack.HotModuleReplacementPlugin()
    ]
}
module.exports = webpackConfig;
```

### component.jsx

```ここに言語を入力
'use strict';
const $ = require('jquery');
const React = require('react');
const ReactDOM = require('react-dom');


class Foo extends React.Component {
	render() {
		return (
			<div>
				<h1>React.jsのテスト</h1>
			</div>
		);
	}
}

ReactDOM.render(
	<Foo />,
	document.getElementById('example')
);

```

### package.json
```ここに言語を入力
{
  "name": "template",
  "version": "0.0.0",
  "description": "template",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode production --open"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "browser-sync": "^2.18.2",
    "css-loader": "^1.0.0",
    "css-mqpacker": "^6.0.2",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-cached": "^1.1.1",
    "gulp-changed": "^1.3.2",
    "gulp-clean-css": "^3.7.0",
    "gulp-compass": "^2.1.0",
    "gulp-concat": "^2.6.1",
    "gulp-csscomb": "^3.0.8",
    "gulp-cssmin": "^0.1.7",
    "gulp-csso": "^3.0.1",
    "gulp-ejs": "^3.1.1",
    "gulp-gzip": "^1.4.1",
    "gulp-htmlhint": "^0.3.1",
    "gulp-imagemin": "^3.1.1",
    "gulp-notify": "^2.2.0",
    "gulp-plumber": "^1.1.0",
    "gulp-postcss": "^7.0.1",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.0.0",
    "gulp-sftp": "^0.1.5",
    "gulp-uglify": "^2.0.0",
    "gulp-util": "^3.0.8",
    "gulp-watch": "^4.3.11",
    "gulp-webpack": "^1.5.0",
    "imagemin-pngquant": "^5.0.0",
    "jquery": "^3.3.1",
    "jsx-loader": "^0.13.2",
    "postcss-cssnext": "^3.1.0",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "rimraf": "^2.6.1",
    "run-sequence": "^1.2.2",
    "style-loader": "^0.23.0",
    "vinyl-ftp": "^0.5.0",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2",
    "webpack-stream": "^4.0.0"
  },
  "dependencies": {
    "ajv": "^6.5.4",
    "animejs": "^2.2.0",
    "del": "^2.2.2",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "imagemin-pngquant": "^5.0.0",
    "slick-carousel": "^1.8.1",
    "terser": "^3.9.3",
    "terser-webpack-plugin": "^1.1.0",
    "webpack-merge": "^4.1.4"
  }
}

```