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

Question

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

我的node_modules服务器中有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"> 目录。

我想要像

这样的东西

extract('/*/*')

这可行吗？我有很多其他的css和js文件。

更新1

让我澄清一下，这个应用程序不是节点应用程序也不是php应用程序，它只有html，css和js文件。一切都在客户端运行，但是......我们希望利用JS和CSS的最新客户端开发工具，并将最终版本上传到prod服务器。

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

Answer 2

您可以使用Webpack进行捆绑，这会将css资源复制到dist并替换对它的引用。它不支持html文件作为入口点，所以你需要通过使用html-webpack-plugin解决这个问题。

无论如何，正如其他人所提到的那样 - 服务器决策很奇怪。

Answer 3

将./node_modules定义为Express中的静态目录。

app.use(express.static("./node_modules"))

因此，如果您请求此文件：

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

Express会查看＆＃34; ./ node_modules＆＃34;，找到该文件并提供服务。