2017-06-27

WebPack3.0をさらっと見てみる

まだWebPack2.0すら使いこなせていない感があるけど、3.0が来ましたね。
medium.com

重要そうな所を雑にまとめてみる。英語に強いわけではないので、Google先生の力を目一杯借りてます、誤訳とか誤認識とかも含まれます。
こんなことに使えそう！とかがあれば追記するかも

今回、リリースの目玉機能として発表されたのは2つ。
Scope HoistingとMagic Comment

その1！Scope Hoisting

今まではJSをbundleするときに、同じファイル内でimportしてる各ファイルを機能ごとに分割させるために、さらに別の関数でラップしたりしてた。
でもECMAScriptの構文を利用することで、別の方法で機能分割することができるようになったから今までよりbundleしたファイルのサイズが小さくできるよ！
ということらしい。

その2！Magic Comment

実は2.4とか2.6からあった機能なんだけど、各ページで動的にbundleしたファイルを読み込ませようとするときに1.bundle.jsとかいうチャンク名でしか読み込めなくて結構分かりづらかった。
でも今回からは

import(/* webpackChunkName: "my-chunk-name" */ 'module');

って感じでチャンク名を指定できるようになったよ！
ということらしい。

ほんとにさらっと読んだだけなので、ちゃんと使ってみたりもうちょっとドキュメント読んだりしたらまた別の記事を書くかも

2017-06-05

RequireJSからのリクエストにCookieを仕込みたかった

画像やJS取得などの各種リクエストにCookie情報が不可欠な状況になったので調査しました。

普段通りにScriptタグで読み込んでいるJSのリクエストヘッダーにはブラウザのCookie情報が乗っていた。
でもRequireJSで読み込んでいるJSのリクエストヘッダーにはCookie情報が乗っていなかった。困る。

どうしてRequireJSのほうだけリクエストヘッダーがほぼ空なんだ？？？ということでRequireJSの仕組みを軽く調べました。

RequireJSのファイル読み込み手順をざっくりみる

読み込みたいJSを

Require(['hoge', 'hoeeee.js'], function(){});

とか記述することでファイルの読み込みを開始している。

読み込みが開始されたらRequireJSの中で
まずは事前に設定したRequirejs.config等で書いたモジュール名と実際のパスの関係を紐付けていく。
Rootパスの設定とかも行っている。
その後パスの文字列の補正みたいなことしてて
RequireJS内からHeadタグの中にこんな感じのScriptタグを生成して埋め込んでいく

<script type="text/javascript" async="true" src="http://js/hoeeee.js"></script>

ここまでが読み込みの流れの基本形かな？

さらに読み込み開始前にrequirejs.createNodeのメソッドを上書きすることで、様々な属性もつけることができる。

認証情報の付与設定

で、今回の問題の原因になってたのがこの記述。

var createNode = requirejs.createNode;
requirejs.createNode = function () {
　　var node = createNode.apply(this, arguments);
       // ここの部分↓
　　node.setAttribute('crossorigin', 'anonymous');
　　return node;
};

最初に書いた時は何も考えずにつけてた気がする、よくない。

この記述だと認証情報を付与しない、という設定を追加していることになる。
なのでCookie等の認証に使われる情報がごっそり抜け落ちてしまっていたという感じ。そりゃそうだわ。

認証の設定や種類については「CORS」で検索するといろいろ出てきたので参考になるかと。

今回は該当の箇所を削除することで問題は回避できたけど、現在の環境以外では認証関連は変わるだろうからまた気にかけてあげないとなぁって思ってる。

参考
・http://qiita.com/nanocloudx/items/f49600b705be9d53a9b5
・http://qiita.com/sue71/items/885caeedb02ae6dc48c4

きゅうり畑

気になった技術や勉強したことを書いていく