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

>100 Views

July 01, 17

スライド概要

第6回 Drupal 勉強会@DC で発表したスライドです

profile-image

Web developer, OpenStreetMap mapper. This Account tweets only Tech or OSM, sometimes something like geography except for reply or fav.

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

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

6.
[beta]
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" ] での変更 presets の変更 Drupal 8.4.x babel‑preset‑es2015 → babel‑preset‑env のバ ジョン babel‑core ー 6.17.0 → 6.24.1

8.

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