BabelとPostCSS、ESLintとstylelintの設定をpackage.jsonに詰め込んでみる
UI開発者 郡司Web開発の効率化や品質向上のために日々多くのツールやパッケージが登場しています。
Web開発を行う時に「このツールも使おう、あのパッケージも使ってみよう！」といろいろ導入した結果、ディレクトリ内に設定ファイルが溢れ返ってしまい管理が大変になることがあります。
Node.jsで作成されたパッケージの中にはpackage.json内に設定が記述できるものがあります。
今回はWeb開発でよく使われている以下のパッケージの設定をpackage.json内に書く方法をご紹介します。
- JavaScriptのトランスパイルを行う「Babel」
- CSSをJavaScriptを用いて変換する「PostCSS」
- JavaScriptの構文チェックを行う「ESLint」
- CSSの構文チェックを行う「stylelint」
サンプルのディレクトリ構造
今回使用するサンプルのディレクトリ構造は以下になります。
./
├─package.json
├─postcss.config.js
│
├─public
│ ├─css
│ │ └style.css
│ │
│ └─js
│ └script.js
│
└─src
├─css
│ ├style.css
│ │
│ └vendor
│ └normalize.css
│
└─js
└script.js
必要なnpmのインストール
では早速、package.jsonを生成して各パッケージをインストールしましょう。
npm install eslint stylelint stylelint-config-standard postcss-cli autoprefixer postcss-import babel-cli babel-preset-env@2.0.0-beta.0 --save-dev
package.jsonの追記
インストールが完了したら、package.jsonに以下を追記します。
{
"name": "sample",
～～～ 省略 ～～～
"scripts": {
"postcss": "postcss ./src/css/style.css -c ./postcss.config.js -o ./public/css/style.css",
"babel": "babel ./src/js/script.js -o ./public/js/script.js",
"stylelint": "stylelint ./src/css/**/*.css !./src/css/vendor/*.css",
"eslint": "eslint ./src/js/**"
},
"browserslist": [
"last 1 versions"
],
"babel": {
"presets": [
[
"env",
{
"modules": false,
"useBuiltIns": "usage",
"debug": true
}
]
]
},
"postcss": {
"map": true,
"plugins": {
"postcss-import": {},
"autoprefixer": {}
}
},
"eslintConfig": {
"extends": "eslint:recommended",
"env": {
"browser": true
},
"rules": {
"semi": "error"
}
},
"stylelint": {
"extends": "stylelint-config-standard",
"rules": {
"color-hex-length": "long"
}
}
}
package.json内に任意の名前のフィールドを設け、その中に各パッケージの設定を書いていきます。
- Babelは、.babelrcという設定ファイルを作成せず、babelという名前のフィールドを作成し、設定を記述します
- PostCSSは、postcss.config.jsという設定ファイルを作成して、postcssという名前のフィールドを作成し、設定を記述します
- ESLintは、.eslintrcという設定ファイルを作成せず、eslintConfigという名前のフィールドを作成し、ルールを記述します
- stylelintは、.stylelintrcという設定ファイルを作成せず、stylelintという名前のフィールドを作成し、ルールを記述します
また、browserslistというフィールドを作成して、対象ブラウザを指定するとAutoprefixerの設定やBabelの設定に対象ブラウザを書く必要が無くなります。対象ブラウザの記述方法はこちらをご参照ください。
BabelとPostCSSの注意点
package.json内に設定を記述するにあたって、BabelとPostCSSでは注意が必要です。
PostCSSはpostcss.config.jsファイルを別途作成する必要があります。postcss.config.jsファイルの中で、package.jsonに記述された設定をプロパティ値として与えています。
postcss.config.jsファイル：
module.exports = (ctx) => ({
map: ctx.map
plugins: [
require('postcss-import')({}),
require('autoprefixer')({})
]
});
Babelに関しては、新しいJavaScriptの文法や機能に対応していない環境でも使用できるように変換するbabel-preset-envが、現時点の安定版ではbrowserslistを読み込むことができません。
利用可能となるのはバージョン2.0からになりますので、今回のサンプルでもバージョン2.0をインストールしています。
しかし、筆者の環境ではアロー関数が対応していない環境を対象に入れるとbabel-preset-envでエラーが出るなど不安定な部分もあり、まだ実務で使用するには早い印象を受けました。
まとめ
本来ならルートディレクトリに3つファイルが存在するはずでしたが、package.json内に記述することで管理するファイルが減りました。
他の人へ引き継ぎする際に、ファイルが多かったりすると説明する側も説明を受ける側もどっちも大変だったりします。また、1箇所で管理できれば開発環境をアップデートした際にも更新の見落としが減るでしょう。
他にも、ESDocというJavaScriptのドキュメント作成ツールも、package.jsonに設定を記述することができたりします。もしかしたら、お使いのパッケージの設定がpackage.jsonでも設定可能となっているかもしれません。
しかし、複数人で開発する場合などは開発者ごとに自由に設定を変更できないデメリットもありますので、開発者の人数によっては設定ファイルを分けたほうが効率がよい場合もあります。
これを機会にpackage.json内に設定に記述するパッケージと、他の開発者のためにあえて設定ファイルを分けるパッケージなど、先を見越した開発環境の作成を行っていきましょう。