Q&A
.babelrcはどのように設定しています？
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" } }
回答1件
0
自己解決
こちら自己解決しました。
根本的にnpmから**@babel/preset-react**インストールをして
webpack.config.jsのmoduleの中身を下記のように修正します。
module: { rules: [ { test: /.(js|jsx)$/, exclude: /node_modules/, use: [ { loader: 'babel-loader', options: { presets: [ ['@babel/react'], ['@babel/env', { "targets": { "ie": 11 }, "useBuiltIns": "usage" } ] ] } } ] } ] },
そして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/preset-react": "^7.0.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-combine-media-queries": "^0.2.0", "gulp-compass": "^2.1.0", "gulp-concat": "^2.6.1", "gulp-connect-php": "0.0.8", "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": { "@fancyapps/fancybox": "^3.5.1", "@types/jquery.cookie": "^1.4.31", "ajv": "^6.5.4", "animejs": "^2.2.0", "babel-preset-stage-0": "^6.24.1", "babel-preset-stage-1": "^6.24.1", "del": "^2.2.2", "extract-text-webpack-plugin": "^4.0.0-beta.0", "grapesjs": "^0.14.33", "imagemin-pngquant": "^5.0.0", "jquery.cookie": "^1.4.1", "jquery.easing": "^1.4.1", "react": "^16.5.2", "slick-carousel": "^1.8.1", "terser": "^3.9.3", "terser-webpack-plugin": "^1.1.0", "webpack-merge": "^4.1.4" }, "private": true }
@babel/preset-reactをインストールして活用しないといけませんでした、
また**.babelrcの設定ファイルは必要なく全てwebpack.config.js**で対応しました。
投稿2018/10/12 02:34
総合スコア18
あなたの回答
tips
プレビュー
