README

介绍
要求
安装
用法
为开发构建
为生产构建
构建组
配置

INTRODUCTION

Drupal 资产库的 Vite 集成。

REQUIREMENTS

本模块不需要 Drupal 核心之外的模块。

它设计用于与 Vite 3 或更高版本以及 Tailwind 和 Typescript 一起使用。

INSTALLATION

像安装其他贡献的 Drupal 模块一样安装。访问 https://www.drupal.org/node/1897420 获取更多信息。

添加到 .gitignore

# Neo
/neo.json
/.stylelintcache

如果使用 DDEV，请在 .ddev/nginx/ 中创建一个名为 neo.conf 的文件，并包含以下内容

location /neo-assets/ {
    rewrite ^(.*)\.neo$ $1 break;
    proxy_pass http://127.0.0.1:5173/neo-assets/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

USAGE

启用模块。
从站点根目录运行 drush neo-install。
从站点根目录运行 npm install。
在 <theme|module>.libraries.yml 中，对于您想要使用 Neo 构建的库，添加属性 neo: true，并在定义资源时提供它们的路径到 neo 中使用的入口点，而不是构建资源的路径。例如

library-name:
+  neo: true
   js:
-    dist/script.js: {}
+    src/script.ts: {}
   css:
     component:
-      dist/style.css: {}
+      src/scss/style.scss: {}
   dependencies:
     - core/drupalSettings

该模块将动态重写资源路径到 dist，并在 manifest.json 中包含它们的依赖项。

BUILD FOR DEV

要在开发期间使用热模块重新加载，请运行

npm start

服务器将在非 HTTPS 模式下运行以避免 XSS 问题。如果服务器在默认端口（5173）上的 localhost 上可访问，则模块将在您清除缓存（库定义默认情况下被缓存）后立即自动启动使用它，而不是使用 manifest.json 中的 dist 资源。

BUILD FOR PROD

要编译所有作用域（仅 'contrib' 组）的 js 和 css，请运行

npm run deploy

BUILD SCOPES

在 <theme/module>.libraries.yml 中，还有一个设置构建作用域的选项。作用域影响 Tailwind，因此当在 CSS 或 SCSS 文件中调用 @tailwind base; 时，仅为此作用域构建聚合类。例如

library-name:
  neo: {scope: 'front'}
  js:
    src/script.ts: {}
  css:
    component:
      src/scss/style.scss: {}
    dependencies:
      - core/drupalSettings

主题应在它们的 info.yml 中定义它们支持的用途。

neo: { scope: front }

或

neo: {
  scope:
    - front
    - back
}

如果未定义作用域，则主题将对所有作用域执行操作。

BUILD GROUPS

在 <theme/module>.libraries.yml 中，还有一个设置构建组的选项。组控制开发期间处理的库。如果没有为库指定组，则默认使用 custom。默认情况下，只有两个组；'custom' 和 'contrib'。例如

library-name:
  neo: {group: 'custom'}
  js:
    src/script.ts: {}
  css:
    component:
      src/scss/style.scss: {}
    dependencies:
      - core/drupalSettings

应使用 contrib 组来处理贡献模块或主题。

SCSS 全局包含

Sass 样式表可以公开，以便可以使用 @use 规则在其他样式表中加载。

global:
  version: VERSION
  # Dependencies is required even if it is empty if the library does not provide
  # any other js or css declarations.
  dependencies: []
  neo:
    # For optional inclusion.
    include:
      # Include all files in folder.
      src/css/global: {}
      # Include individual file.
      src/css/global/neoBuildTestMixins.scss: {}
    # For required inclusion. Specifying include is not needed. Specifying
    # a namespace is optional. If namespace is not set, the parent directory
    # name and filename will be used. For example: includeNeoBuildTestInclude
    require:
      src/css/global/neoBuildTestMixins.scss: {namespace: testMixins}

要在 Sass 样式表中使用包含项

// The @use statement is not needed when using 'require'.
@use 'neoBuildTest/mixins' as neoBuildTestMixins;

body {
  @include neoBuildTestMixins.neo-build-test-bg;
}

CONFIGURATION

在库定义中，除了通过设置 neo: true 启用 neo 支持之外，还可以提供一些自定义配置。

neo:
  # By default true, if not set explicitly to false assumed true.
  enabled: true
  # Path to manifest.json, by default `manifest.json`.
  manifest: 'module/dist'/manifest.json'
  # By default `<path_to_module|theme>/dist/`.
  baseUrl: '/themes/custom/my_theme/dist/'
  # Vite dev server url, by default https://:5173.
  devServerUrl: 'https://:9999`

这些设置也可以在 site settings.php 中覆盖

$settings['neo'] = [
  // By default (FALSE) the module will not check if neo dev server is running.
  // Settings this to TRUE will automatically check if the server is running and
  // serve neo assets fromm the server when appropriate.

  // By default (FALSE) the module will not automatically check if neo dev
  // server is running and if so, use it. Settings this to false will make sure that
  // neo dev server will not be used, which is recommended setting for
  // production environments.
  'useDevServer' => TRUE,
  // Global overrides.
  /* Make note that these are global so they will take effect for all drupal
   * asset libraries, so setting enabled => TRUE here is not really recommended.
   * Probably the only useful to set here would be devServerUrl to globally
   * override the default one.
   */
  'enabled' => TRUE,
  'manifest' => 'vue_app/dist/manifest.json',
  'baseUrl' => '/some/custom/base/url/used/in/production/for/dist/assets/',
  'devServerUrl' => 'https://:5173',
  'overrides' => [
    // Per module/theme overrides.
    '<module|theme>' => [
      // ... settings like the global ones
    ]
    // Per library overrides.>
    '<module|theme>/<library>' => [
      // ... settings like the global ones
    ]
  ],

]

在 <theme/module>.libraries.yml 中，还有一个选项可以禁用特定资源的重写，为此，您需要为特定资源设置 neo: false。例如

 global-styling:
   neo: true
   js:
-    some/static/script.js: {}
+    some/static/script.js: {neo: false}
   css:
     component:
       src/scss/style.scss: {}
     dependencies:
       - core/drupalSettings

COMPONENTS

您可以通过在主题/模块信息文件中定义它们来注册新的 Tailwind 组件。

neo:
  scope: back
  components:
    .container:
      '@apply mt-6 first:mt-0 rounded-sm border': {}
    .card:
      backgroundColor: colors.white
      borderRadius: borderRadius.lg
      padding: spacing.6
      boxShadow: boxShadow.xl

THEME

您可以通过在主题/模块信息文件中定义设置来扩展 Tailwind 的基础配置。例如

theme:
  extend:
    colors:
      current: 'currentColor'

jacerider / neo_build

维护者

详细信息