-ao- ramune blog

©2021 unio / GO2直営からふるラムネ
はじめてのSymfony4 + Vue.js
チュートリアル対象バージョン
2018年08月02日

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

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

サイトを外部へ公開する場合、ブラウザの違いに応じた実装を考慮しなければなりません。 この部分を自力で対応するのは流石に現実的ではないので、大抵はツールを導入して運用を行います。 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に configureBabelenablePostCssLoader を追記します。

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は反映されないので注意してください。

プロフィール画像
なかのひと:unio

数十年前の牧歌的なインターネッツが好きだった、永遠のモラトリアム人。 ただ、モラトリアムしててもお金は増えないので、しゃかいの厳しさを斜め後ろから眺めつつほそぼそと生活しています。

[広告]