ピースペース

VueなSPAがiphone4sで表示されない

leave a comment »

巷には、Babelで始めるモダンなJavaScript!みたいな紹介があふれております。
import  from~とrequire(‘~’)のどっちがモダンか?は微妙ですが、
コードのパクリ元で使われていたのでモダンかどうかも考えずに使っておりました>ES6

VS2017とChrome@PCで作成していて全く気付かなかったのですが、
ieとiOS9以前safariではSPAのレンダリングが行われず真っ白なページが表示されてしまいました。
ブラウザデバッグしてみると、ところどころでES6なコードがひっかかっているようです。

ん?それってwebpack&babel-loaderが良きに計らってくれるはずじゃなかったの!
たしかに、import文は気にせず処理されているようです。
しかし、iOSでひっかかったのはconst文です。
いや流石にそれは変換してくれるはずでしょう>babel

なので、たぶん自分のwebpack.config.jsのどこかに問題がありそうな気がします。
しかしそれが意味もわからずどこかからパクってきたものなので何が悪いかわかりません。
webで調査を始めると新旧玉石混交した情報で余計に混乱します。

test: /\.vue$/,
loader: ‘vue-loader’,
options: {
  loaders: {
    ‘js’: ‘babel-loader’
  }
}

このbabel-loaderが正常に働いてない気がします。
それはもしかするとvue-loaderのせいかもしれません。
が、なにもはっきりしたことは言えません。

昨日は何も問題がないと思えたVue.jsですがこの辺りは問題と言えば問題な気がします。
地道に人力Babelしようと思っています。
開発もVS2017→VS2015になり、
VS2015のエディタはES6に優しくない気がするのでちょうど良かったかもしれません。

追伸

原因はbabelのpresetsオプションが指定されていなかったからかもしれなくて、
.babelrcファイルを追加したところ解決されたような気がします。
原因を調べるために、vue-cliが作成する環境をみてみましたが、早々にくじけました。
vueモジュールをビルドするために、webpackやらbabelやらの知識が必要になりますが、
これらをほんとうにきちんと理解するのは簡単じゃないですね。
必要になる知識が次々に増えていき、いつまでも追いつけないのじゃない?
と思ってしまうのが辛いです。一歩一歩ですね。

Written by nasu38yen

2017年12月20日 @ 8:39 AM

カテゴリー: 未分類

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。