React,webpack,babel,es6初心者です。
以下のサイトを参考にしてreactでいいねボタンを作ろうとしています。
http://c16e.com/1510161700/
上の記事は少しバージョンが古くエラーが出るのでそれを修正した記事もあったのでそちらも参考にしながら進めていました。
http://qiita.com/wipiano/items/b5a3484c93822cf6b34e
僕が今回入れたもののバージョンは以下のとおりです。
npm 5.0.4
webpack 3.0.0
babel-core 7.1.1
babel-loader 6.25.0
babel-preset-es2015 6.24.1
babel-preset-stage-0 6.24.1
babel-preset-react 6.24.1
react-dom 15.6.1
react 15.6.1
一番上の記事の
<code>npm run build</code>の実行までは上手く行ったのですが、
そこから少し進めて
webpackのwatchタスクを起動して、ビルドを走らせます。
$ npm run watch
のところで躓きました。
実行すると以下のようなエラーが出ます。
npm ERR! missing script: watch npm ERR! A complete log of this run can be found in: npm ERR! /Users/home/.npm/_logs/2017-07-04T08_48_29_147Z-debug.log
調べてみて、webpack@3.0.0にはwatchというコマンドがなくなったのかと思いwebpackでのビルドの方法を調べていたのですが、そもそも
webpackのwatchタスクを起動して、ビルドを走らせます。
$ npm run watch
これが何をしたいのかわからないので調べてながら詰みました。
また
$ npm run webpack -- -v
$ npm run webpack
を実行しても同じようなエラーが出ます。
また関係ないかもしれないですが関係ありそうなコードを載せておきます。
.babelrc
{ "presets": [ "es2015", "react", "stage-0" ] }
package.json
{ "name": "react-like-button", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "rm -rf dist/*.js && webpack", "start": "npm run build && ./start-server.sh", "release": "rm -rf docs/* && npm run build && cp -r dist/* docs/" }, "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.25.0", "babel-loader": "^7.1.1", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "webpack": "^3.0.0" }, "dependencies": { "react": "^15.6.1", "react-dom": "^15.6.1" } }
webpack.config.js
module.exports = { entry: __dirname + "/src/main.js", output: { path: __dirname + "/dist", filename: "like-button.js" }, module: { loaders: [ {test: /\.jsx$/, loader: "babel", query: {presets: ["es2015", "stage-0"]}} ] } };
この「いいねボタン」の記事を読みながら実行に成功できたあとに、実行したコマンドやファイルの中身の1行1行の意味を解析してまとめようと思っていたので、webpackに関しても、babelに関してもほとんど何もわからない状態です。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/07/04 10:13