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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Q&A

解決済

1回答

1766閲覧

package.json読み込みError

jointeratail

総合スコア12

Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

0グッド

0クリップ

投稿2018/09/13 12:10

問題に至るまでの経緯

Node.jsとBabelを利用してローカルでJSXを変換しよう!(Reactの練習)
初期ファイルの設定だ!(以下初期ファイル)
./
├── /src
│ └── app.jsx
├── /dest
└── index.html
Nodeモジュールのインストール
npm init -y ←package.jsonの生成
npm install --save-dev babel-cli babel-preset-react babel-preset-es2015

package.jsonのscriptsにbuildコマンドを追加して、最後にpackage.jsonと同階層にBableで変換するプリセット(今回はreactのみ)を指定した「.babelrc」という設定ファイルを作成して、

npm run build

Hello woldが出るぞ!!

結果↓

npm ERR! file E:\Practice\package.json npm ERR! code EJSONPARSE npm ERR! JSON.parse Failed to parse json npm ERR! JSON.parse Unexpected string in JSON at position 166 while parsing '{ npm ERR! JSON.parse "name": "Practice", npm ERR! JSON.parse "version": "1.' npm ERR! JSON.parse Failed to parse package.json data. npm ERR! JSON.parse package.json must be actual JSON, not just JavaScript.

もうだめみたい←いまここ

詳しいファイルの階層と中身

./
├── /src
│ └── app.jsx
├── /dest
└── index.html
├──node_modules
├──package.json
├──package-lock.json

index.html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>React Tutorial</title> </head> <body> <div id="app"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script> <script src="dest/app.js"></script> </body> </html

app.jsx

ReactDOM.render( <h1>Hello, world!</h1> document.getElementById('app') );

.babelrc

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

package.json

{ "name": "Practice", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" "build": "babel src -d dest" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-cli": "^6.26.0", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1" } }

雑談

Reactを始めようと思ったのは今日のこと。DiscordというアプリがReactとFluxというアーキテクチャーから開発されていることを知った自分。よしやるか!
Virtual DOM、JSXふむふむ。ブラウザ上でJSXの変換してHello worldはできたぞ!
次はNode.jsとBabelを利用してローカルでJSXを変換するか。そして、問題は突然起こった。
Hello worldごときに手間取るとは。。。←死亡
Node.jsがサーバーサイドとクライアントサイドで同じ言語を使用できるからハッピーという記事をみて頑張ろうと思いました。

ご指摘やなにか役立つ知識などご教授いただければ

ご協力感謝します。

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

package.jsonのscriptsを手動で書きましたね?????
ほら、testキーの行の最後にカンマ入れ忘れてますよ。

"scripts": { "test": "echo \"Error: no test specified\" && exit 1" "build": "babel src -d dest" },

JSONはJavaScriptの値として即使える柔軟なファイルフォーマットですが、
末尾カンマの仕様等、多少融通の効かない古い仕様です。
(JSONのバージョン6とかあったはずだけど何時普及するんだろう…)

慣れるまでは目を皿のようにしながら頑張ってください。

投稿2018/09/13 12:14

miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jointeratail

2018/09/13 12:21

タタタ。。。タイポはここだけの秘密でお願いします;;
miyabi-sun

2018/09/13 12:25

大丈夫です、私も100回くらいやらかしてますし、他のNodeerも多分30回くらいはやらかしてます。 それくらいJSONファイルを手作業で触るとすぐに壊れます。 そのうちすぐ気付けるようになると思うので気にせず頑張ってください、そしてJSONファイルを触ったら確認する癖を付けるようにしてくださいね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問