Webpack＋babelでのIE11対応について
WEB
Google botでコンテンツが表示されていなかった
Search consoleにあるFetch as googleで確認したところ、下の画像の様に文字列がレンダリングされてなかった・・・
今までブラウザでの使用比率5%以下は対象外で活動してきて、今回のブログでもjsをES6で書いています。
もちろんWebpackとbabelを使用しているので問題ないだろうと思っていました。
結果は上の通り全く対応できていなかったです・・・・・・
ということで今回はES6で書いたjsをGoogle botでも表示できる様に変更します。
webpackで使用するbabel-presetを追加します。
|
1 2 |
yarn run babel-preset-es2016 yarn run babel-preset-es2017 |
これでpackage.jsonにpresetが記述されます。
さらにwebpack.configを下記に変更します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
const path = require('path'); module.exports = { // エントリーポイントの設定 entry: './js/app.js', // 出力の設定 output: { // 出力するファイル名 filename: '../js/bundle.js', // 出力先のパス（v2系以降は絶対パスを指定する必要がある） path: path.join(__dirname, 'js') }, module:{ loaders:[{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query:{ presets:['es2015','es2016','es2017'] } }, { test: /\.vue$/, loader: [ 'vue-loader' ] }, { test: /\.css$/, loader: 'style-loader!css-loader!' }, { test: /\.(eot|svg|woff|ttf|gif)$/, loader: 'url-loader' } ] }, resolve: { extensions: ['*', '.js', '.css'], alias: { // vue.js のビルドを指定する vue: 'vue/dist/vue.min.js', // slick: 'slick-carousel/slick/', } } }; |
これでbundle.jsがGoogle botに対応できる様になります。
ちなみにIE11ではオブジェクトにforEachを使用しているとエラーでjsそのものが止まるので表示されなくなるという事もありましたw
いやー、今回は焦りましたけど、いい勉強になりました。
