VueなSPAがiphone4sで表示されない
巷には、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やらの知識が必要になりますが、
これらをほんとうにきちんと理解するのは簡単じゃないですね。
必要になる知識が次々に増えていき、いつまでも追いつけないのじゃない?
と思ってしまうのが辛いです。一歩一歩ですね。
コメントを残す