問題に至るまでの経緯
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がサーバーサイドとクライアントサイドで同じ言語を使用できるからハッピーという記事をみて頑張ろうと思いました。
ご指摘やなにか役立つ知識などご教授いただければ
ご協力感謝します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/13 12:21
2018/09/13 12:25