README

此项目模板扩展了 Drupal Composer 项目模板，包括用于处理解耦前端的功能。

请阅读该项目的文档以获取背景信息： https://github.com/drupal-composer/drupal-project

使用方法

首先您需要 安装 composer。

之后，您可以使用 composer create-project 命令创建一个新的 Drupal 项目

composer create-project devshop/decoupled-template:8.x-dev --no-interaction my-new-site

然后，将生成的文件放入一个 git 仓库中。

cd my-new-site
git init
git add * .*
git commit -m'New project files.'

按照您最喜欢的 git 仓库提供商的说明创建远程仓库。

此模板做什么？

除了 Drupal Composer 项目模板的功能 之外，在安装给定的 composer.json 时，会处理一些任务

• Node & NPM 被安装到项目的 bin-dir 中，这得益于 mouf/nodejs-installer 项目。
• 在 composer install 和 composer update 中运行输出版本的 Node & NPM 命令，以确保它们已正确安装，并显示用户正在使用哪些 node 和 npm。
• 由于 node 和 npm 被添加到 composer 的 bin-dir，它们自动添加到 composer 脚本和插件的 PATH 中。轻松将 npm 调用添加到 composer.json 的 post-install-cmd 部分中。
• 添加了 asset-packagist，允许 composer 需求 npm-asset 和 bower-asset 包。这意味着 任何 NPM 或 Bower 包 都可以用 composer 安装，而不是用 NPM。
• 提供项目示例结构的分支。

解耦 Drupal 模型

有许多方法可以将独立的前端项目连接到您的 Drupal 代码库。

方法 #1：共享仓库

这是最简单的方法。创建一个基于 composer 的 Drupal 代码库，并为您的第二个应用添加一个文件夹。

然后，您可以在 composer install 中运行 npm install 或您想要的命令，通过添加 post-install-hook。

如果您将第二个代码库放在 app 文件夹中，请向您的 composer.json 文件中添加以下内容

{
  "scripts": {
        "post-install-cmd": [
            "cd app && npm install"
        ]
  }
}

这样，所有源代码都可以通过一条命令 composer install 来填充。

方法 #2：使用脚本安装的独立仓库

在 composer install 后直接克隆 repo 到所需位置是没有问题的...

{
    "scripts": {
        "post-install-cmd": [
            "git clone git@github.com:my-organization/web-front-end.git app",
            "cd app && git checkout v1.0.0 && npm install"
        ]
    }
}

但是，您应该确保检出特定的版本（标签），以便分支的更改不会影响此构建。

方法 #3：使用 Composer 安装的独立仓库

使用 composer，即使它不在 Packagist 上，您也可以通过在 composer.json 文件中创建伪包来要求一个独立的 git 仓库

{
    "require": {
        "our-website/front-end":  "dev-master"
     },
    "repositories": [
        {
            "type": "package",
            "package": {
                "name": "mywebsite-com/web",
                "version": "dev-master",
                "source": {
                    "url": "https://github.com/department-of-veterans-affairs/vets-website",
                    "type": "git",
                    "reference": "35deea6e8afaf58b9b4e3ee23fe2e0134c18d2e2"
                }
            }
        }
    ]
}

然后，您的 web 项目将像任何其他 composer 包一样安装到您的 vendor 目录。它将设置为使用 "reference" 字段中提到的确切版本。

为了便于查找，您可以在 git repo 中添加到 vendor 目录的 web 项目的符号链接。

ln -s vendor/mywebsite-com/web app
git commit app -m 'Adding symlink to web front-end.'

方法 #4：使用 Packagist 分离仓库

如果您的项目是公开的，或者您愿意为私有 Packagist 支付费用，您可以利用 composer 依赖管理功能来链接您的项目。

在前端项目中创建一个 composer.json 文件并将其提交到 Packagist 或 NPM。

Composer 和 NPM 是依赖管理工具。它们允许您指定使用不同组件的确切版本，以确保它们可以一起工作。

通过将您的项目提交到 Packagist 或 NPM（并使用 composer require npm-asset/project-name），您可以免于手动更新 git 引用。

将一个基本的 composer.json 文件添加到您的前端代码库，并访问 https://packagist.org.cn 进行注册并提交一个包。新的 git 推送将自动更新 packagist.org，并为 composer 提供信息。

前端项目

来源：https://github.com/department-of-veterans-affairs/vets-website/blob/master/composer.json

{
    "name": "mywebsite-com/web",
    "description": "Front-end for mywebsite.com. This repo contains the code to statically generate mywebsite.com.",
    "type": "node-project",
    "require": {
    },
    "license": "CC0-1.0",
    "minimum-stability": "dev",
    "extra": {
        "installer-types": ["node-project"],
        "installer-paths": {
            "web/": [
                "type:node-project"
            ]
        }
    }
}

Drupal 项目

一旦 Packagist 或 NPM 获取了新包，您可以使用以下方法将其添加到您的 Drupal 代码库中：

composer require mywebsite-com/web

Packagist 将为您整理最新版本。

服务解耦 Drupal

NodeJS

如果您的应用程序需要节点服务器，您只需配置它从项目安装的文件夹中加载其内容即可。（在我们的示例中为 app。）

将您的 Drupal 服务器指向您的 Drupal 代码库，将节点服务器指向 app。

静态站点生成器

大多数 NodeJS 项目根本不需要运行节点服务器，因为它们是静态站点生成器。它们从不同的来源创建 index.html 文件、图片和 CSS，包括 Drupal。

使用 Drupal 服务器

由于任何 Drupal 服务器都可以提供静态 HTML 和图像资源，您可以让您的应用程序将那些资源生成到 Drupal 站点的“文档根”目录下的一个文件夹中。

例如，如果您的静态站点生成器将文件输出到 Drupal Composer 代码库中的 /web/static 文件夹，并且您通过 http://localhost 访问您的 Drupal 站点，您将能够通过 https://localhost/static 访问生成的站点。

绝对链接引用？

大多数静态站点生成器不处理子文件夹路径。所有指向外部资源（如图片、CSS 和其他页面）的链接通常都是使用“绝对”路径生成的。

这意味着，如果您从 https://localhost/static/about 加载页面，链接可能指向 /css/style.css，这会导致 404 错误。

为了解决这个问题，您可以使用 Drupal 的 .htaccess 文件中的一个技巧

从