Drupal 8.4.x の core にみるフロントエンド開発の現状紹介

のcoreにおけるフロントエンド 開発の現状紹介 Drupal 8.4.x Tom Konda (@tom_k_en)

Drupal 8.3.x package.json Node.js から package.json 追加 のパッケージ管理設定ファイル core のフロントエンド開発に Node.js 環境必須

Drupal 8.4.x 定ファイル でフロントエンド系ツールの設 .eslintrc.json .eslintignore .stylelintrc.json package.json yarn.lock になり、yarn と stylelint の設定ファイルが増えた の LTS が出るまでには npm@5 の package‑lock.json も増え るはず 8.4.x Node 8.x

package.json の scripts の中身 以下のものから構成 "build:js" "build:js‑dev" "watch:js" "watch:js‑dev" "lint:core‑js" "lint:css" "lint:css‑checkstyle" から で stylelint と JavaScript の sourcemap を出力す る の追加 8.3.x 8.4.x script

package.json の dependencies すべて devDependencies 大別すると以下のような感じ Babel 系 ESLint 系 StyleLint 系 その他 8.3.x から 8.4.x でのインストールパッケージ数の変化 5 → 17 各ツールでインストールされるプラグインが増えている

package.json

の Babel 設定

"presets": [
[
"env",
{
"modules": false,
"targets": {
"browsers": [
"ie >= 9",
"edge >= 13",
"firefox >= 5",
"opera >= 12",
"safari >= 5",
"chrome >= 56"
]
}
}
]
]

参考） Drupal 8.3.x の package.json （ "presets": [ "es2015" ] での変更 presets の変更 Drupal 8.4.x babel‑preset‑es2015 → babel‑preset‑env のバ ジョン babel‑core ー 6.17.0 → 6.24.1

まとめ のフロントエンド開発が今風に近づいている 環境の必須化 yarn への追従 CSS も stylelint でチェック Drupal Node.js