【 javascript 】 Replace Autoprefixer browsers option to Browserslist config 対処法

この記事めちゃくちゃ当てはまりすぎてびっくりしました。。 "市場価値"といったことばのみならず、抽象的なワードを追いかけないように気をつけなきゃ。
「自分の市場価値を高めたい」と言う人ほどコモディディ化しちゃってる問題 - Work,Live,Thinking - Medium

ということでwww
Autoprefixer を使ったらエラーが出たので解決方法をまとめました。

Autoprefixer とは

• 対象のブラウザを指定すると、必要なベンタープレフィックスを追加したり削除してくれる。
• postCSSの一つの機能として存在する。

対象ブラウザの指定

github.com

Githubに書かれいてる通りで
特定のブラウザを指定したり、それぞれの国のシェア95％をカバーするようになど
指定のバリエーションがめちゃめちゃ豊富です。

警告出た。

コンパイルの際に警告が出るようになりました。

  Replace Autoprefixer browsers option to Browserslist config.
  Use browserslist key in package.json or .browserslistrc file.

  Using browsers option can cause errors. Browserslist config 
  can be used for Babel, Autoprefixer, postcss-normalize and other tools.

  If you really need to use option, rename it to overrideBrowserslist.

  Learn more at:
  https://github.com/browserslist/browserslist#readme
  https://twitter.com/browserslist

...何やら命令されてますね。

  Replace Autoprefixer browsers option to Browserslist config.   
  Use browserslist key in package.json or .browserslistrc file.  

「ブラウザオプションの代わりにブラウザリスト設定に置き換えろ
package.json か browserslistrc の browerslist key を使え」

  Using browsers option can cause errors. Browserslist config     
  can be used for Babel, Autoprefixer, postcss-normalize and other tools.     

「ブラウザオプションがエラーになる場合も、Browserslist config なら対応できる。
BabelでもAutoprefixer, postcss-normalizeでもなんでもかかってこい。」

Browserslistをゴリ押ししてますね。

解決法

• gulpfile.jsの以下の文を消去します。

.pipe(autoprefixer(
     //  {browsers: ["last 3 versions",
     //                      "ie >= 9",
     //                      "Android >= 4",
     //                      "ios_saf >= 8"]
     //  }
)) 

• package.jsonに新しく"browserslist"キーを追加します。

   "browserslist": [
      "last 3 versions",
      "ie 9",
      "ie 10",
      "android >= 4",
      "ios_saf >=8"

エラーもなくなりスッキリしました。

テストも無事にあと二教科を迎え気合が入ってきました。

最近はブログちょっとサボりつつあるのですが、
まだまだ始まったばっかり、稚拙でも情報不足でも描き続けましょう！！