如何在基于 PHP 编辑器的包中从基于 NPM 的包加载资产

How to load assets from NPM-based package in PHP composer-based package?

本文关键字:加载 包加载 包中 PHP 编辑器 NPM      更新时间:2023-09-26

首先:这不是关于如何使用NPM包作为Composer包的依赖项的问题。这不是问题:直接使用 NPM 或作曲家插件可以解决它。

假设我们将 NPM 包作为 Composer 包的依赖项加载(使用 create-package),我们得到大致这样的结构:

Root
+-- node_modules
| +-- our_npm_package
|   +-- assets
|   | +-- our.css
|   +-- js
|     +-- bundle.js
+-- vendor
| +-- our
|   +-- package
+-- src
+-- tests
| composer.json
| package.json
| index.php

NPM包包含一些Web资产(JS,CSS,图像)。我们可以使用 浏览器 将其捆绑在一起,只需在我们的索引中使用 bundle.js.php .但问题是,在我看来,这是不好的做法。Browserify应该只捆绑JS,而不要管CSS和图像。通过JS将CSS传递给浏览器实际上是错误的技术使用:浏览器完全有能力自行加载CSS。这样,它将适用于禁用JS的浏览器。关于图像的相同故事:浏览器可以在没有JS帮助的情况下加载和显示它们。

所以我得出结论,Browserify(我应该说很棒的包)应该只用于JS,它产生了很好的捆绑包.js我们可以从我们的索引中调用它.php

这里的核心问题是:如何在我们基于 Composer 的 PHP 包中正确引用这些基于 NPM 的资产?当然,我们可以使用:

<link rel="stylesheet" type="text/css" href="/node_modules/our_npm_package/assets/our.css">

但这很丑陋,也不可靠。我真的希望它是:

<link rel="stylesheet" type="text/css" href="/css/our.css">

捆绑也是如此.js.我不想有:

<script src="/node_modules/our_npm_package/js/bundle.js"></script>

而是

<script src="/js/bundle.js"></script>

很多人只是制作脚本,在根文件夹中创建css和js文件夹,然后从NPM包中挑选资产。有效,但仍然丑陋。

有些人(特别是使用框架)走得更远,使用某种自动复制的作曲家插件。在这种情况下,他们指定要在作曲家包中使用哪些资产。比普通副本更好,但仍然不是很好。

我真正想要的是以某种方式在 NPM 包中声明资产。然后让 Composer 插件/脚本在 NPM 包中找到它,并将它们符号链接/复制到它们应该被 PHP 代码使用的地方。最重要的是,确保PHP所需的所有资产都实际存在。

我自己即将为此目的编写作曲家插件,但我不想重新发明轮子。当然,我不是唯一一个面临缝合作曲家 PHP/NPM JS 问题的人,我希望这个问题已经以适当的方式得到解决。在过去的三天里,我用谷歌搜索了高低,找不到任何像样的东西。

你能告诉我有没有解决这个问题的简单方法?单个作曲家插件可以被视为答案。

您可以使用 Gulp/Grunt/其他任务运行程序来查找其他资产(图像、样式表等)并将它们复制到所需的目的地。

/node_modules/our_npm_package/assets/our.css

可以复制到

/css/our.css

在 Gulp 中,可以通过以下代码片段实现

gulp.src('node_modules/**/*.css')
    .pipe(gulp.dest('css/'));

这会将所有.css文件复制到node_modules/中的任何位置以css/