node.js - 克服 Node 和 browserify 路径解析中的差异

Question

我正在为一个 React 应用程序编写一个模块，该模块需要包含在后端和前端中。

在我的代码中的某个时刻，我需要一些 svg 文件(我使用 browserify 模块，但这与问题无关)。

例如，我的 ./src/js/components/tools/svg.js 中有以下代码:

// ...
var BACKEND = /* code to detect if this is running on browser or on node */;

var svg;
if ( BACKEND ) {
  svg  = require("./../../../icon/" + this.props.icon + ".svg");
} else {
  svg  = require("./src/icon/" + this.props.icon + ".svg");
}
// ....

我使用 browserify 的 require 选项在捆绑时要求所有 svg 文件:

browserify({
  paths: ['./src/icon'],
})
.transform(/* svg tansformer */)
.require(glob.sync("./src/icon/*.svg")) // <-- svg's get added here
.add("./src/main.js"); // main entry point                                                                 

但是，这与 Node 解析文件名的方式相冲突。它无法从 ./src/js/components/tools/svg.js 找到 ./src/icon/。

这就是为什么我必须使用 BACKEN 子句来保护 require。但这让我眼睛受伤，我只想写:

var svg = require('./src/icon/' + this.props.icon + '.svg');

到目前为止我已经尝试了两件事:

修复 Node 以查找./src/icon

我可以使用 export NODE_PATH=`cwd` 来允许 Node 从 ./ 查找 src/icon。这允许我写:

var svg = require('src/icon/' + this.props.icon + '.svg');

在后台。但是，由于 browserify 只接受以 ./ 开头的 path (因此，忽略 src/icon)，这不会在前端解析。

修复 browserify 以使用 ../../../icon/

由于同样的原因，这也无法正常工作:browserify 只接受以 ./ 开头的路径。

Answer 1

使用 Browserify 时执行条件要求被认为是不好的做法，因为它无法在“编译时”评估代码，并且始终会尝试加载所有文件。

在浏览器环境中加载与在 Node 上不同的文件很容易: 将 "browser" 字段添加到指向浏览器主文件的 package.json 中。使用 "main" 作为 Node 主文件。然后只需需要该模块即可。

您可以对项目中的子文件夹执行相同的操作。只需添加一个带有 "private": true 的 package.json 文件以及 main 和 browser 属性，并需要文件夹路径。