是否可以使用browserify分别捆绑js和css文件

Posted 2023-02-19

【中文标题】是否可以使用browserify分别捆绑js和css文件

【英文标题】：Is it possible to bundle js and css files separately using browserify

【发布时间】：2016-04-26 19:12:01

【问题描述】：

我使用的命令是

browserify -t browserify-css src\app.js > bundle.js

而被遍历的 css 文件最终会作为 bundle.js 文件中的文本 blob，最终在浏览器中加载时作为样式标签附加到头部。

是否可以同时输出 bundle.js 和 bundle.css 文件，其中 bundle.css 只是所有被遍历的 css 文件的串联？

本例中的 src\app.js 只包含一个 require

require( 'app.css' );

【问题讨论】：

***.com/questions/34459148/… 我想这可能就是你要找的东西

这令人失望。到目前为止，我对 Browserify 的喜爱程度不如网络社区的其他成员。

@user1834059 github.com/undoZen/css-linkify 之类的东西可能会有所帮助

@PrayagVerma 看起来 css-linkify 的工作方式与 browserify-css 类似，后者也没有所需的输出，这也是一个单一的 js 文件，它不会做任何愚蠢的事情，比如动态插入链接标签，和一个单一的 css 文件，其中包含捆绑时遍历的所有 css 文件的连接内容。 Browserify 非常以节点为中心，它只创建一个 js 文件，并在 js 中插入任何非 js 文件，并使用 hacky shims 使其在浏览器中工作。

FWIW，webpack 有一个 ExtractTextPlugin 可以完全满足您的需求，前提是您可以将 webpack 添加到构建任务中。

【参考方案1】：

您可以使用sheetify 转换，它输出使用insert-css 的代码。然后，使用 css-extract browserify 插件将 insert-css 调用提取到单独的文件中。

browserify -t sheetify/transform -p [ css-extract -o bundle.css ] index.js \
  -o bundle.js