javascript – 如何从基于PHP编写器的包中的基于NPM的包加载资源？

首先：这不是关于如何使用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,图像).我们可以使用browserify将它们捆绑在一起,并在index.PHP中使用bundle.js.但问题是,在我看来,这是不好的方法. browserify应该只捆绑JS,同时单独留下CSS和图像.通过JS向浏览器提供CSS是非常错误的技术使用：浏览器能够自行加载CSS.这种方式适用于禁用JS的浏览器.关于图像的相同故事：浏览器可以在没有JS帮助的情况下加载和显示它们

所以我得出结论,browserify(我应该说的很好的包)应该只用于JS,它会产生很好的bundle.js,我们可以从index.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">

关于bundle.js也是如此.我不想要：

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

反而

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

很多人只是创建脚本,在根文件夹中创建css和js文件夹,然后从NPM包中编织资源.工作,但仍然很难看.

有些人(尤其是使用框架)更进一步,使用某种自动复制的composer插件.在这种情况下,他们在composer包中指定他们想要的资产.不仅仅是简单的复制,但仍然不是很好.

我真正想要的是以某种方式在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/'));

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