実現したいこと
gulp4.0.1にてES2015&JSXで書かれたスクリプトをコンパイルしたいです。
発生している問題・エラーメッセージ
error.log
1 2$npx gulp babel 3[15:43:06] Using gulpfile /var/www/html/react_lessons/gulpfile.js 4[15:43:06] Starting 'babel'... 5{ SyntaxError: /var/www/html/react_lessons/react_bginners_guide/es2015/04.09.1xss.js: Unexpected token (5:4) 6 7 3 | var food = 'ラーメン'; 8 4 | ReactDOM.render( 9> 5 | <h2>夕食は{food}</h2>, 10 | ^ 11 6 | document.getElementById('app') 12 7 | ); 13 8 | 14 at Parser.raise (/var/www/html/react_lessons/node_modules/@babel/parser/lib/index.js:6322:17) 15 at Parser.unexpected (/var/www/html/react_lessons/node_modules/@babel/parser/lib/index.js:7638:16) 16 at Parser.parseExprAtom (/var/www/html/react_lessons/node_modules/@babel/parser/lib/index.js:8799:20) 17 at Parser.parseExprSubscripts (/var/www/html/react_lessons/node_modules/@babel/parser/lib/index.js:8385:23) 18 at Parser.parseMaybeUnary (/var/www/html/react_lessons/node_modules/@babel/parser/lib/index.js:8365:21) 19 at Parser.parseExprOps (/var/www/html/react_lessons/node_modules/@babel/parser/lib/index.js:8252:23) 20 at Parser.parseMaybeConditional (/var/www/html/react_lessons/node_modules/@babel/parser/lib/index.js:8225:23) 21 at Parser.parseMaybeAssign (/var/www/html/react_lessons/node_modules/@babel/parser/lib/index.js:8172:21) 22 at Parser.parseExprListItem (/var/www/html/react_lessons/node_modules/@babel/parser/lib/index.js:9449:18) 23 at Parser.parseCallExpressionArguments (/var/www/html/react_lessons/node_modules/@babel/parser/lib/index.js:8592:22) 24 pos: 166, 25 loc: Position { line: 5, column: 4 }, 26 code: 'BABEL_PARSE_ERROR', 27 message: 28 '/var/www/html/react_lessons/react_bginners_guide/es2015/04.09.1xss.js: Unexpected token (5:4)\n\n\u001b[0m \u001b[90m 3 | \u001b[39m\u001b[36mvar\u001b[39m food \u001b[33m=\u001b[39m \u001b[32m\'ラーメン\'\u001b[39m\u001b[33m;\u001b[39m\u001b[0m\n\u001b[0m \u001b[90m 4 | \u001b[39m\u001b[33mReac\u001b[39m\u001b[33m.\u001b[39mrender(\u001b[0m\n\u001b[0m\u001b[31m\u001b[1m>\u001b[22m\u001b[39m\u001b[90m 5 | \u001b[39m \u001b[33m<\u001b[39m\u001b[33mh2\u001b[39m\u001b[33m>\u001b[39m夕食は{food}\u001b[33m<\u001b[39m\u001b[33m/\u001b[39m\u001b[33mh2\u001b[39m\u001b[33m>\u001b[39m\u001b[33m,\1b[39m\u001b[0m\n\u001b[0m \u001b[90m | \u001b[39m \u001b[31m\u001b[1m^\u001b[22m\u001b[39m\u001b[0m\n\u001b[0m \u001b[90m 6 | \u001b[39m document\u001b[33m.\u001b[39mgetElementById(\u001b[32m\'app\'\u001b[39m)\u001b[0m\n\u001b[0m \u001b[90m 7 | \u001b[39m)\u001b[33m;\u001b[39m\u001b[0m\n\u001b[0m \u001b[90m 8 | \u001b[39m\u001b[0m', 29 name: 'SyntaxError', 30 stack: 31 'SyntaxError: /var/www/html/react_lessons/react_bginners_guide/es2015/04.09.1xss.js: Unexpected token (5:4)\n\n\u001b[0m \u001b[90m 3 | \u001b[39m\u001b[36mvar\u001b[39m food \u001b[33m=\u001b[39m \u001b[32m\'ラーメン\'\u001b[39m\u001b[33m;\u001b[39m\u001b[0m\n\u001b[0m \u001b[90m 4 | \u001b[39m\b[33mReactDOM\u001b[39m\u001b[33m.\u001b[39mrender(\u001b[0m\n\u001b[0m\u001b[31m\u001b[1m>\u001b[22m\u001b[39m\u001b[90m 5 | \u001b[39m \u001b[33m<\u001b[39m\u001b[33mh2\u001b[39m\u001b[33m>\u001b[39m夕食は{food}\u001b[33m<\u001b[39m\u001b[33m/\u001b[39m\u001b[33mh2\u001b[39m\u001b[33m>\u001b[39001b[33m,\u001b[39m\u001b[0m\n\u001b[0m \u001b[90m | \u001b[39m \u001b[31m\u001b[1m^\u001b[22m\u001b[39m\u001b[0m\n\u001b[0m \u001b[90m 6 | \u001b[39m document\u001b[33m.\u001b[39mgetElementById(\u001b[32m\'app\'\u001b[39m)\u001b[0m\n\u001b[0m \u001b[90m 7 | \u001b[39m)\u001b[33m;\u001b[39m\u001b[0m\n\u001b[0m \u001b[90m 8 | \u001b[39m\u001b[0m\n at Parser.raise (/var/www/html/react_lessons/node_modules/@babel/parser/lib/index.js:6322:17)\n at Parser.unexpected (/var/www/html/react_lessons/node_modules/@babel/parser/lib/index.js:7638:16)\n at Parser.parseExprAtom (/var/www/html/react_lessons/node_modules/@babel/parser/lib/index.js:8799:20)\n at Parser.parseExprSubscripts (/var/www/html/react_lessons/node_modules/@babel/parser/lib/index.js:8385:23)\n at Parser.parseMaybeUnary (/var/www/html/react_lessons/node_modules/@babel/parser/lib/index.js:8365:21)\n at Parser.parseExprOps (/var/www/html/react_lessons/node_modules/@babel/parser/lib/index.js:8252:23)\n at Parser.parseMaybeConditional (/var/www/html/react_lessons/node_modules/@babel/parser/lib/index.js:8225:23)\n at Parser.parseMaybeAssign (/var/www/html/react_lessons/node_modules/@babel/parser/lib/index.js:8172:21)\n at Parser.parseExprListItem (/var/www/html/react_lessons/node_modules/@babel/parser/lib/index.js:9449:18)\n at Parser.parseCallExpressionArguments (/var/www/html/react_lessons/node_modules/@babel/parser/lib/index.js:8592:22)', 32 __safety: undefined, 33 _stack: undefined, 34 plugin: 'gulp-babel', 35 showProperties: false, 36 showStack: false, 37 fileName: 38 '/var/www/html/react_lessons/react_bginners_guide/es2015/04.09.1xss.js' } 39[15:43:06] Finished 'babel' after 64 ms 40
該当のソースコード
変換したいjsコードは以下です。
compile.js
1 2var food = 'ラーメン'; 3ReactDOM.render( 4 <h2>夕食は{food}</h2>, 5 document.getElementById('app') 6); 7
以下環境関連です。
gulp.js
1 2var gulp = require('gulp'); //gulp本体の読み込み 3var babel = require('gulp-babel'); //gulpプラグインの読み込み 今回はbabel 4 5// babel 6//各処理を実行した結果を.pipe()で次に渡してあげてる 7gulp.task('babel', function () { //このタスクにbabelって名前をつける 8 return gulp.src('./es2015/*.js') //変換したいES2015で記述したファイルを指定 9 .pipe(babel()) //babel()でバベってくれと記述 10 .on('error', console.error.bind(console)) 11 .pipe(gulp.dest('./js')); //gulp.dest()でファイルの書き出し 今回はjsフォルダに 12}); 13
package.json
1 2{ 3 "name": "react", 4 "description": "React is a JavaScript library for building user interfaces.", 5 "version": "15.2.1", 6 "homepage": "https://facebook.github.io/react/", 7 "license": "BSD-3-Clause", 8 "main": "react.js", 9 "repository": { 10 "type": "git", 11 "url": "git+https://github.com/facebook/react.git" 12 }, 13 "dependencies": { 14 "gulp": "^4.0.1", 15 "react": "^15.2.1", 16 "react-dom": "^15.2.1" 17 }, 18 "browserify": { 19 "transform": [ 20 "loose-envify" 21 ] 22 }, 23 "devDependencies": { 24 "@babel/core": "^7.4.4", 25 "@babel/preset-env": "^7.4.4", 26 "babel-cli": "^6.26.0", 27 "babel-core": "^6.26.3", 28 "babel-preset-env": "^1.7.0", 29 "gulp-babel": "^8.0.0" 30 } 31} 32
{ "presets": ["react", "@babel/preset-env"] }
試したこと
.babelrcファイルを削除して
gulp.jsの以下の部分を変更して実行してみましたが結果は同じでした。
changedgulp.js
1 2//.pipe(babel()) 3.pipe(babel({ 4 "presets": ["react", "@babel/preset-env"] 5 })) 6
babeljs.ioのtry it outから変換したいファイルを流すと
コンパイルされました。
質問
足りない設定、プラグイン、修正が必要な箇所
確認すべきことなどご教授いただけましたら幸いです。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。