Download to read offline
![package.json のBabel 設定
"presets": [
[
"env",
{
"modules": false,
"targets": {
"browsers": [
"ie >= 9",
"edge >= 13",
"firefox >= 5",
"opera >= 12",
"safari >= 5",
"chrome >= 56"
]
}
}
]
]](https://image.slidesharecdn.com/drupal8-170701114041/75/Drupal-8-4-x-core-6-2048.jpg)
![（参考） Drupal 8.3.x のpackage.json
"presets": [
"es2015"
]
Drupal 8.4.x での変更
presets の変更
babel‑preset‑es2015 → babel‑preset‑env
babel‑core のバージョン
6.17.0 → 6.24.1](https://image.slidesharecdn.com/drupal8-170701114041/75/Drupal-8-4-x-core-7-2048.jpg)
Drupal 8.4.x の core にみるフロントエンド開発の現状紹介
- 1. Drupal 8.4.x のcoreにおけるフロントエンド 開発の現状紹介 TomKonda (@tom_k_en)
- 2. Drupal 8.3.x からpackage.json追加 package.json Node.js のパッケージ管理設定ファイル core のフロントエンド開発にNode.js 環境必須
- 3. Drupal 8.4.x でフロントエンド系ツールの設 定ファイル .eslintrc.json .eslintignore .stylelintrc.json package.json yarn.lock 8.4.xになり、yarn とstylelint の設定ファイルが増えた Node 8.x のLTS が出るまでにはnpm@5 のpackage‑lock.json も増え るはず
- 4. package.json のscripts の中身 以下のものから構成 "build:js" "build:js‑dev" "watch:js" "watch:js‑dev" "lint:core‑js" "lint:css" "lint:css‑checkstyle" 8.3.xから8.4.x でstylelint とJavaScript のsourcemap を出力す るscript の追加
- 5. package.json のdependencies すべてdevDependencies 大別すると以下のような感じ Babel 系 ESLint系 StyleLint 系 その他 8.3.x から8.4.x でのインストールパッケージ数の変化 5 → 17 各ツールでインストールされるプラグインが増えている
- 6. package.json のBabel 設定 "presets":[ [ "env", { "modules": false, "targets": { "browsers": [ "ie >= 9", "edge >= 13", "firefox >= 5", "opera >= 12", "safari >= 5", "chrome >= 56" ] } } ] ]
- 7. （参考） Drupal 8.3.xのpackage.json "presets": [ "es2015" ] Drupal 8.4.x での変更 presets の変更 babel‑preset‑es2015 → babel‑preset‑env babel‑core のバージョン 6.17.0 → 6.24.1
- 8. まとめ Drupal のフロントエンド開発が今風に近づいている Node.js 環境の必須化 yarnへの追従 CSS もstylelint でチェック