如何结合 PHP/STATIC 网站目录结构使用 NPM？

Posted 2023-03-21

【中文标题】如何结合 PHP/STATIC 网站目录结构使用 NPM？

【英文标题】：How to use NPM in conjunction with PHP/STATIC web site directory strucure?

【发布时间】：2021-12-31 07:10:36

【问题描述】：

我有一个结构类似的 php 网站

/
   css/
   js/
   index.php

如果我这样做，例如，

npm init
npm install bootstrap@4.6

它会另外创建

/
   node_modules/
      bootstrap/
         dist/
            css/
            js/
      ...

接下来呢？我应该将 php-s 中的所有路径更改为这个奇怪的长路径 node_modules/boostrap/dist/js 还是有办法将所需文件复制到最顶层目录 js/ 和 css/

【参考方案1】：

通常你不会直接使用node_modules。相反，您将使用 Webpack、Rollup、Vite、Parcel 等捆绑器进行构建步骤，该捆绑器知道如何将您网站的资产与 node_modules 中的资产捆绑到一组优化的文件中以进行交付。原因之一是“摇树”——捆绑并仅包含您在代码中实际使用的 node_modules 中的模块的部分。另一个是node_modules 中有很多文件（自述文件等），没有理由包含在您的网站上（前提是您在某处提供了所有必要的归属）。

您可以从node_modules 中挑选您需要的文件（至少在某些情况下如此），但这是劳动密集型的。您最好找到您想要的模块的部署就绪版本。另一种选择是使用unpkg.com，它为npm 模块提供CDN。

【讨论】：

我的页面离线工作，所以CDN不可用。目前我正在使用樱桃采摘和部署就绪版本，但希望引入一些自动化......

@Dims - 这就是捆绑器将提供的。 :-)