質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.49%

  • React.js

    1141questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

  • gulp

    338questions

    gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

  • webpack

    334questions

Reactをwebpackでコンパイルできません

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,366

dialbird

score 329

こんにちは

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'));
});
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • k.tada

    2016/06/14 17:04

    gulpの`conpile_js`のタスクの内容も貼ってもらえますか?どのようにコンパイルしてるかがわからないです。

    キャンセル

  • dialbird

    2016/06/14 19:41 編集

    k.tadaさん
    ご返答ありがとうございます

    失礼いたしました。`conpile_js`の中身を追加します!

    キャンセル

回答 1

checkベストアンサー

0

webpackの設定であるresolvemoduleの位置がおかしいように見えます。以下のようにconfig.jsを修正してください。

//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'] }
            ]
        }
    },
};

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/15 10:03

    horse_n_deerさん
    ご返答ありがとうございます。

    単純なところを見落としておりました。ありがとうございます!

    キャンセル

同じタグがついた質問を見る

  • React.js

    1141questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

  • gulp

    338questions

    gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

  • webpack

    334questions