はじめに ¶

2020年6月19日にベータ版が公開された Parcel 2。
Parcel (v1) にはなかった設定ファイルの追加など Zero Configuration の強みを継承しつつ、カスタマイズもしやすくなっています。

この記事では、まだ公式パッケージが用意されていない stylelint のソースコードバリデーションを行う Validator を作成する手順をご紹介します。

Validator の構成 ¶

まずは、公式ドキュメントと既存の ESLint Validator でプラグインがどのような構成になっているのかを確認してみましょう。

公式ドキュメント ¶

GitHub parcel-bundler/parcel https://github.com/parcel-bundler/parcel

ESLint Validator の構成 ¶

stylelint Validator の作成 ¶

ESLint Validator の構成を参考にしつつ、 stylelint Validator を作成します。
完成した stylelint Validator は次のリポジトリで公開しています。

https://github.com/lollipop-onl/parcel-validator-stylelint

ファイル構成 ¶

この記事では、ESLint Validator に準拠した次のようなファイル構成で開発を行います。
ソースコードを/src/StylelintValidator.js、出力先を/src/StylelintValidator.jsとします。

Plain Text.
│   # 出力ディレクトリ
├── lib/
│   └── StylelintValidator.js
│   # ソースコード
├── src/
│   └── StylelintValidator.js
├── .babelrc
└── package.json

開発環境を用意する ¶

この記事では @babel/cli で .js のソースコードをコンパイルするような開発環境を用意します。

yarn init ¶

まずは、yarn initを実行してpackage.jsonを作成しましょう。

Plain Text$ yarn init

確認項目はmainのみ出力ファイルであるlib/StylelintValidator.jsを指定してください。
それ以外は任意の値を設定すれば大丈夫です。

package.json{
  "name": "@lollipop-onl/parcel-validator-stylelint",
  "version": "1.0.0",
  "description": "Parcel 2 validator of stylelint",
  "main": "lib/StylelintValidator.js",
  "repository": "https://github.com/lollipop-onl/parcel-validator-stylelint",
  "author": "lollipop-onl <lollipop@simochee.net>",
  "license": "MIT",
  "private": false
}

パッケージのインストール ¶

必要なパッケージをインストールします。
次のコマンドでparcel@2.0.0-beta.1と@babel/cli、@parcel/babel-presetをインストールしてください。

Plain Text$ yarn add parcel@2.0.0-beta.1
$ yarn add -D @babel/cli @parcel/babel-preset

なお、@babel/cliに必要な@babel/coreは Parcel 2 の依存関係に含まれるため、インストールを省略しています。

Babel の設定 ¶

つづいて、Babelの設定ファイルとコンパイルスクリプトを設定します。

ESLint Validator の .babelrc に準拠し、@parcel/eslint-presetのみ指定した設定ファイルを作成します。

.babelrc{
  "presets": ["@parcel/babel-preset"]
}

また、ソースコードをコンパイルする npm-scripts をpackage.jsonに追加します。
Validator のエントリーポイントと出力ディレクトリを指定したbabelコマンドをbuildスクリプトとして設定します。

package.json{
  "scripts": {
    "build": "babel ./src/StylelintValidator.js --out-dir lib"
  }
}

以上で、Validator の開発環境が構築できました。

package.json{
  "name": "@lollipop-onl/parcel-validator-stylelint",
  "version": "1.0.0",
  "description": "Parcel 2 validator of stylelint",
  "main": "lib/StylelintValidator.js",
  "repository": "https://github.com/lollipop-onl/parcel-validator-stylelint",
  "author": "lollipop-onl <lollipop@simochee.net>",
  "license": "MIT",
  "private": false,
  "scripts": {
    "build": "babel ./src/StylelintValidator.js --out-dir lib"
  },
  "dependencies": {
    "parcel": "2.0.0-beta.1"
  },
  "devDependencies": {
    "@babel/cli": "^7.10.4",
    "@parcel/babel-preset": "^2.0.0-alpha.2"
  }
}

次回は、 Validator のインターフェースについて説明します。