将node_modules中的js和css文件包含到静态html页面中。

Question

我的开发服务器正在运行节点live-server。 我的生产环境将是LAMP服务器。

我在我的node_modules服务器中有normalize.css。 在我的index.html文件中，我有

<link rel="stylesheet" href="/node_modules/normalize.css">
<link rel="stylesheet" href="css/styles.css">

我不希望有文件链接到 node_modules 目录。

我想要类似这样的东西

<link rel="stylesheet" href="css/normalize.css">

这可行吗？我有很多像这样的其他CSS和JS文件。

更新1

让我澄清一下，这个应用程序既不是node应用程序也不是php应用程序，它只有HTML、CSS和JS文件。一切都在客户端运行，但是...我们想利用最新的客户端开发工具来处理JS和CSS，并将最终构建上传到生产服务器。

- phantomCoder

---

一个LAMP服务器？？为什么会（而且也能）使用PHP服务器来运行Node应用程序呢？ - Jeremy Thille

@JeremyThille 只有开发环境使用了 Node 服务器，以利用新的 JS 架构和包。生产环境使用 LAMP 服务器，这是一个企业决策。 - phantomCoder

通常情况下，您可以使用构建工具将某些内容从node_modules复制到某个资产文件夹中并引用它。不过，您也可以配置Apache来从node_modules提供静态文件。 - Ry-

@JeremyThille 让我澄清一下，这个应用程序既不是node应用程序也不是php应用程序，它只有html、css和js文件。所有东西都在客户端运行，但是..我们希望利用最新的JS和CSS客户端开发工具，并将最终构建上传到生产服务器。 - phantomCoder

那么你为什么使用了 node.js 和 npm 标签呢？ - Jeremy Thille

Answer 1

有许多可能的解决方案。我建议使用一个任务运行器(gulp)，将这些静态文件复制到公共目录，例如dist/assets。

在您的计算机上安装gulp。

npm install --save-dev gulp

在您的根目录下创建一个 gulpfile.js 文件，并添加以下代码。

var gulp = require('gulp');

gulp.task('default', function () {
  gulp.src('/node_modules/normalize.css')
   .pipe(gulp.dest('./dist/assets'));
});

运行 gulp

gulp

请按照以下方式更新您的index.html文件

<link rel="stylesheet" href="/dist/assets/normalize.css">

请查阅Gulp文档以获得更多信息。

您还可以尝试使用Grunt或Webpack

- fyasir

Answer 2

你可以使用Webpack进行打包，它会将CSS资源复制到dist目录并替换对其的引用。但它不支持HTML文件作为入口点，因此你需要通过使用html-webpack-plugin来解决这个问题。

无论如何，正如其他人所提到的，服务器决策有些奇怪。

- Ignas Vyšnia