こんにちは
ReactJSを使ってみたいのですが、どういうわけかUnexpected token <
と出てきてしまい、React特有のタグを認識して読み込んでくれず、webpackのコンパイルがうまくいきません。仕組みとしては、まずコンパイルする対象を./public/src
したのディレクトリに以下のように配置して
//以下は./public/srcの下に位置しています /js --- /mainForPC.js /jsx --- /hello.jsx
mainForPC.jsとhello.jsxに、以下のコードを記載しました。
//mainForPC.js const HELLO = require('../jsx/hello.jsx');
//hello.jsx const React = require('react'); const ReactDOM = require('react-dom'); const Hello = React.createClass({ render(){ return( <div>Hello {this.props.name}</div> ); } }) ReactDOM.render( <Hello name="react" />, document.getElementById('content') )
そしてこのmainForPC.js
ファイルをgulpを介してwebpackでコンパイルしています。
//gulpfile.babel.js const gulp = require('gulp'); const requireDir = require('require-dir'); requireDir('./gulp/tasks', {recurse: true}); const config = require('./gulp/config.js'); gulp.task('watch', ()=>{ //gulp.watch(path.join(config.sourcedir, '**/*.js'), ['conpile_js']); gulp.watch(`${config.js.srcDir}/**/*.js`, ['conpile_js']); }); gulp.task('default', ['conpile_js','watch']);
//config.js const originSourceDir = './public/src'; const originBuildDir = './public/build'; module.exports = { srcDir: originSourceDir, bldDir: originBuildDir, webpack: { entry: { mainForPC: `${originSourceDir}/js/mainForPC.js` }, output: { path: __dirname, filename: "[name].js" } }, resolve: { extensions: ['','.js'] }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loaders: ['babel', 'eslint-loader'] }, { test: /\.jsx$/, loaders: ['babel', 'eslint-loader'] } ] } };
一応package.jsonとbabelrcも載せておきます。
//package.json { "name": "ReactProject", "version": "0.0.0", "private": true, "scripts": { "start": "nodemon --exec babel-node --use_strict ./bin/www" }, "dependencies": { "body-parser": "~1.13.2", "cookie-parser": "~1.3.5", "debug": "~2.2.0", "express": "~4.13.1", "jade": "~1.11.0", "morgan": "~1.6.1", "pug": "^0.1.0", "serve-favicon": "~2.3.0", "socket.io": "^1.4.6" }, "devDependencies": { "babel-cli": "^6.9.0", "babel-core": "^6.9.1", "babel-loader": "^6.2.4", "babel-preset-es2015": "^6.9.0", "babel-preset-react": "^6.5.0", "babel-preset-stage-0": "^6.5.0", "es6-promise": "^3.2.1", "eslint-loader": "^1.3.0", "gulp": "^3.9.1", "gulp-eslint": "^2.0.0", "gulp-if": "^2.0.1", "gulp-notify": "^2.2.0", "gulp-plumber": "^1.1.0", "gulp-uglify": "^1.5.3", "gulp-webpack": "^1.5.0", "react": "^15.1.0", "react-dom": "^15.1.0", "require-dir": "^0.3.0" } } //babelrc { "presets": ["es2015", "stage-0", "react"] }
文章が長くて申し訳ないのですが、何か心当たりがある方、もしくはもっと簡単な方法がある方、是非とも教えてください。
よろしくお願いいたします。
以下追加
gulpタスクが記載してあるcompile_jsファイルの中身を追加しました。
const gulp = require('gulp'); const gulpif = require('gulp-if'); const plumber = require('gulp-plumber'); const notify = require('gulp-notify'); const uglify = require('gulp-uglify'); const webpack = require('gulp-webpack'); //階層はconfig.jsファイルの一階層下にあるので const config = require('../config'); gulp.task('conpile_js', ()=>{ gulp.src(config.srcDir + '/js') .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") })) .pipe(webpack(config.webpack)) .pipe(gulpif(config.js.uglify, uglify())) .pipe(gulp.dest(config.bldDir + '/js')); });
回答1件
あなたの回答
tips
プレビュー