色々な事情でCDNのVue.jsを使っているのですが、CDN版のBabelを使おうとした場合に上手くいかなかった
ES2015の記法で書いていたのでIE11で動きません。当然と言えば当然なので普段は無視してるんですけど、今回は社内画面じゃなくて社外向けの画面のためIE対応もする必要がありました
CDN版のBabelもある事は知っていたので適応させてみる
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
new Vue({
el: '...',
components: {
fugahoge: ...
}
})
</script>
そうしてみると次のエラー。
[Vue warn]: Error in created hook: "ReferenceError: i is not defined"
found in
---> <Fugahoge>
うわ~これ何がエラーなのかわからないやつだ、Fugahogeコンポーネントの中身は読み込まれているのですがリファレンスエラーが起きているのでJSが動きません。
しかも、ブラウザ側で変換してるんでめっちゃ重いんですよこれ。描画速度が0.8秒くらいから1.5秒くらいまで跳ね上がりました(エラー出てる状態だからかもしれないですが)
やっぱり設計的によくないのでCDN版のBabelを使うことは断念。現状この画面以外IE11対応するつもりはないので、気合でES2015記法から古い記法に編集して戻しました。
そもそもCDN版のVue.jsとかBabelは使わない方がいいですね。勉強になりました。
解決策わかる方いましたらお待ちしています。