如何结合PHP/静态站点目录结构使用NPM管理前端依赖？

两种方案都可行，更推荐把需要的资源复制到顶层css/、js/目录使用 #

不建议直接引用node_modules内资源的原因： #

• 安全风险：node_modules目录包含所有项目依赖的源码，直接对外暴露可能导致敏感代码泄露，多数生产环境的Web服务器默认会禁止访问该目录，上线后容易出现404问题
• 维护成本高：长路径写起来繁琐，后续如果升级Bootstrap版本或者调整依赖目录，所有引用路径都要同步修改

具体操作方法： #

手动复制（适合一次性操作）

直接拷贝以下文件到对应目录即可：

• 将node_modules/bootstrap/dist/css/下的bootstrap.min.css、bootstrap.min.css.map复制到项目顶层的css/目录
• 将node_modules/bootstrap/dist/js/下的bootstrap.min.js、bootstrap.min.js.map复制到项目顶层的js/目录

之后你就可以在PHP文件里按原来的习惯引用资源，比如：

<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/bootstrap.min.js"></script>

自动复制（适合需要频繁升级依赖的场景）

你可以在项目根目录的package.json中添加自动复制脚本，避免每次手动操作：

{
  "scripts": {
    "copy-bootstrap": "cp node_modules/bootstrap/dist/css/*.min.css* css/ && cp node_modules/bootstrap/dist/js/*.min.js* js/"
  }
}

后续每次升级Bootstrap版本后，只需要执行npm run copy-bootstrap就会自动把对应资源拷贝到指定目录。

注意：Bootstrap 4.6的JS组件依赖jQuery和Popper.js，如果你需要使用模态框、下拉菜单这类交互组件，记得额外安装这两个依赖后同样复制到js/目录再引用。

内容的提问来源于stack exchange，提问作者Dims