首先:这不是关于如何使用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/
。