關於 Drupal 8 JavaScript (&CSS) 開發的一些事 [ES6]

這可能是比官方更官方的指引 (簡單版) :p 歡迎傳閱 🙂

Drupal 8.4 版本以後,JavaScript 將有兩大項改變:

  1. 採用 Airbnb JavaScript Style Guide 作為 Drupal JavaScript 程式碼規範。在 DRUPAL 中稍有修改,個人建議緊記 Airbnb JavaScript Style Guide 就可以,不必強行花時間記憶,有需要時,通過 ESLint 查看錯誤。
    而 ESLint 的自動修復功能,大致上能解決大部份問題。[詳看]
  2. Drupal 8.4 正式開始使用 ES6 作為開發語言。[詳看]
    (如果你很熟悉 NODE 開發,直接看 /core/package.json 就可以,否則請留意以下)
    以後的開發步驟:

    1. 所有動作必需在 /core 目錄進行
    2. 安裝必要的 NODE PACKAGES
      如果你沒有使用 YARN:
      npm i -g yarn

      安裝必要 PACKAGES:
      yarn install
    3. 開發途中,可以透過以下指令監視檔案改變:
      yarn run watch:js
    4. 修改完成後,可以透過以下指令建立最後檔案:
      yarn run build:js

      亦可以指定其中一個檔案:
      yarn run build:js — –file misc/drupal.es6.js

      (更好的方法: https://www.drupal.org/node/2879072)

聰明的你應該會發現,DRUPAL 使用 BABEL 編譯檔案,同時使用了 babel-preset-env,也就是說,如果你的網站不支持很舊的瀏覽器,或以手機為主,你可以更新設定,編譯出更完美的 JavaScript:
https://github.com/drupal/drupal/blob/8.4.x/core/package.json#L37

另一方面,Stylelint 亦替代 csslint 作為 DRUPAL CORE 的 CSS Lint 工具。[詳看]

個人推測,這一步將大大改變現行模組及版型開發流程,還沒有使用過 NODEJS FRONTEND 工具的朋友,要花點時間學習囉。

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *