最低限の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

blog.mismithportfolio.com

詰まった点

Hot Module Replacement (HMR)がうまく動作しない

webpack-dev-serverでHMRをしようとおもい， hot: trueにしたが，うまく動作しなかった
HMR: リロードせずとも，変更のあった部分だけ更新してくれる機能

原因
設定が正しく出来ていなかった
解決法
github.com

それでもHot Module Replacement (HMR)がうまく動作しない

f:id:johshisha:20171013045720p:plain こういう変更をリロード無しで更新してくれることを期待していた

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';

三行