最低限のjavascript開発環境を作って公開した
三行
- yarn, gulp, babel, webpack, React, ESlintを使って,最低限のjavascript開発環境を作った
- 最低限 = ES6で書いたものがコンパイルされてブラウザで見れる状態
- 最適な環境なのかはわからないが,とりあえず開発できる
作ったもの
使い方
$ git clone https://github.com/johshisha/js_development $ cd js_development $ yarn $ yarn start $ open http://localhost:8080/webpack-dev-server/index.html
buildの仕方
$ yarn start build
参考文献
基本的にこれを参考にさせてもらった
これの8章までに webpack-dev-server を加えた形
qiita.com
webpack-dev-server
dackdive.hateblo.jp
補助:
Webpack-stream WITH Gulp WITH webpack-dev-server?? · Issue #121 · shama/webpack-stream · GitHub
usage with gulp
HMR
詰まった点
Hot Module Replacement (HMR)がうまく動作しない
webpack-dev-serverでHMRをしようとおもい, hot: true
にしたが,うまく動作しなかった
HMR: リロードせずとも,変更のあった部分だけ更新してくれる機能
原因
設定が正しく出来ていなかった解決法
github.com
それでもHot Module Replacement (HMR)がうまく動作しない
こういう変更をリロード無しで更新してくれることを期待していた
Before
const App = () => ( <div> Hello world! </div> );
After
const App = () => ( <div> Hello world!!!!!!!!!!!!!!!!! </div> );
原因
HMRを万能なものと思いすぎていた
すべての変更に対応しているわけではなく,HMRに対応している変更としていない変更がある解決法
ファイルを分割してReact ComponentにすることでComponent内の変更はHMRに対応することができた
このあたりの仕組みまでは理解できていないので,理解する必要がある.
↓こんな感じに分割した https://github.com/johshisha/js_development/blob/master/src/client/Message.jsx
class Message extends Component { render() { return ( <div> Hello world! </div> ); } }
コンポーネントとか期待してたのに, undefined
が返ってきてるじゃん!というエラー
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
原因
importの仕方を間違っていた解決法
- import { Message } from './Message'; + import Message from './Message';