様々なブラウザに対応するために

2018年08月02日

はじめてのSymfony4 + Vue.js

様々なブラウザに対応するために

チュートリアル対象バージョン

様々なブラウザに対応するために

サイトを外部へ公開する場合、ブラウザの違いに応じた実装を考慮しなければなりません。この部分を自力で対応するのは流石に現実的ではないので、大抵はツールを導入して運用を行います。 ES5対応であればBabelに代表されるjsトランスパイラ、 CSSのベンダープレフィックスであればAutoprefixerなどがあります。

パッケージ追加

実際にBabelとAutoprefixerを導入してみましょう。下記のコマンドで必要なパッケージをインストールします。

コンソールコマンド

                
                    yarn add --dev babel-preset-env postcss-loader autoprefixer

Babel7系から @babel/preset-env への移行がアナウンスされていますが、執筆時点(2018-08-02)はまだベータ版のためbabel-preset-envで進めます。

各種設定

今回はwebpack-encoreを利用しているので、webpack.config.jsに configureBabel と enablePostCssLoader を追記します。

webpack.config.js

                
                    Encore
                        ...
                        .configureBabel(function(babelConfig) {
                            babelConfig.presets.push('env');
                        })
                        .enablePostCssLoader()
                        ...
                    ;

PostCSSは別途設定が必要なので、postcss.config.jsを作成します。

postcss.config.js

                
                    vim postcss.config.js

                
                    module.exports = {
                        plugins: [
                            require('autoprefixer')
                        ]
                    };

Autoprefixerの対象ブラウザを指定するために、package.jsonに browserslist を追加します。 browserslistは、指定した条件のブラウザリストを返してくれます。設定した閾値がどんなブラウザリストを返すかは、 browserl.ist で調べることができます。

package.json

                
                    {
                        ...
                        "browserslist": [
                            "> 1% in JP",
                            "last 2 versions",
                            "iOS 9"
                        ],
                        ...
                    }

browserslistはBabelでも利用されるのですが、package.jsonに記述する方法はBabel7系からサポートされます。今回導入したのはBabel6系なので、package.jsonのbrowserslistは反映されないので注意してください。