使用npm脚本将*.js和*.css注入index.html

Question

我正在研究从gulp/grunt切换到仅使用npm脚本.但我真的无法解决如何从给定路径获取*.js和*.css并将其添加到index.html文件中.

我必须通过"index.js"文件添加它,还是可以做类似......

"scripts": {
 "inject": "inject src/app/*.js",
},

然后它会将它添加到我的index.html中,我已经指定它...

/* inject:js */

Answer 1

过去 3 个月内没有关于这个热门话题的答案，可能是因为问题中存在错误的假设。提炼你的问题，

\n\n

\n

...如何从给定路径获取 *.js 和 *.css 并将其添加到 index.html 文件

\n

\n\n

简而言之，手动完成。使用良好的 npm 样板（例如npm-build-boilerplate）并将编译后的 JS 和 CSS 文件手动添加到 HTML 中。

\n\n

\n

...我必须通过“index.js”文件添加它，或者<第二个选项>

\n

\n\n

否。手动添加文件。让我详细说明一下。

\n\n

使用 npm 脚本，您可以构建一个管道，并且知道丑化的 JS 文件和编译的 SCSS 文件在哪里呈现。是的，我"main": "index.js",的 中有行package.json，但我的项目中根本没有“index.js”。我使用 npm 脚本来处理各个文件夹中的文件，将它们输出到其他文件夹中，然后手动将最终 CSS 和 JS 文件添加到 HTML 模板中（在我的例子中，是静态Hugo网站的模板）。

\n\n

我看到一种情况，当您想要破坏缓存并将唯一字符串添加到端点 CSS/JS 文件名时，HTML 中需要“动态” \xe2\x80\x94 。但是，您可能需要考虑计算文件内容的MD5 哈希值的脚本，因为如果您多次运行构建并且现有 CSS 或 JS 文件没有更改，您希望保留旧文件名。访问者可能已经缓存了它们（也可以考虑 CDN）。postbuild从这个意义上说，上面评论中提到的npm脚本是较差的，因为它只使用“版本”计数器。寻找 npm 的替代方案postbuild来破坏缓存。

\n