FujjimaBlog

webpackについて（備忘録）

2019/08/12 22:32

htmlのheadにてlodashを<a class="keyword" href="http://d.hatena.ne.jp/keyword/cdn">cdn</a>経由で使用するためのリンクを貼っつける bodyでindex.js<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A5%D7%A5%C8">スクリプト</a>を使用するための記述を追加するindex.js内では、htmlのbodyに追加するdivの中身を生成して追加する webpackを使うと、index.htmlで必要とされるデータ（画像、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A5%D7%A5%C8">スクリプト</a>など）を、個々でサーバーに取得要求しなければならず、 時間がかかってしまうことを解決できる。 npm installした「lodash」をローカルで使うように修正。 npm installした後、index.js内にimport文を書く。src/index.jsを、webpacjkがバンドルして、その成果物「main.js」をdist/に出力する。 なので、index.html側でmain.jsを使用できるように、body内で <code>main.js</code>を読み込んでいる。 <ul> <li>webpack.config.jsについて</li> </ul>config.jsをwebpackに使ってもらうには、exportしないといけない npxコマンドについて ローカルにインストールしたnpmパッケージを、「npx」と入力することで実行可能。 npxはnpmにバンドルされているため、個別のインストールは不要。ひとまず、下記コマンドで対応した。 <pre class="code" data-lang="" data-unlink># 開発環境 npm run dev # 本番環境 npm run build</pre>

2019/08/03 16:23

JSでのnull判定とかundifined判定とか色々あるが、lodashのライブラリに便利なものがあったのでメモ。 <ul> <li>nullかどうかを判定</li> </ul><pre class="code JS" data-lang="JS" data-unlink>_.isNull(value)</pre> <ul> <li>null, およびundifined判定に使える</li> </ul><pre class="code JS" data-lang="JS" data-unlink>_.isNil(value)</pre> 上二つのメソッドは、要はそれぞれ<code>val == null</code>,<code>val === null</code>の判定をしているということですね。 DB上の値をフロントに返す際に、<a class="keyword" href="http://d.hatena.ne.jp/keyword/nil">nil</a>であれば何も返さないという実装にしていることがあるが、そうするとReact側で対応している変数には<code>undifined</code>が入ってしまう。 そこで、null、もしくはundifinedかを検出できる2個目のメソッドが便利という話でした。 参考にしたサイト <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Flodash.com%2Fdocs%2F4.17.15%23isNil" title="Lodash Documentation" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://lodash.com/docs/4.17.15#isNil">lodash.com</a></cite>