克服节点和浏览器路径解析的差异

Question

我正在为一个需要包含在后端和前端的反应应用程序编写模块。

在我的代码中的某个时刻，我需要一些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                                                                 

然而，这与节点如何解析文件名冲突。它无法从./src/icon/找到./src/js/components/tools/svg.js。

这就是我必须使用BACKEN子句来保护require的原因。这打破了我的眼睛，我想能够写下来：

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

到目前为止，我尝试了两件事：

修复节点以查找./src/icon

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

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

在后端。但是，由于browserify仅接受以paths开头的./（因此，忽略src/icon），因此无法在前端解析。

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

由于同样的原因，没有让它工作：browserify只接受以./开头的路径。

Answer 1

在使用Browserify时，它被认为是做条件的不良做法，因为它无法在＆＃34;编译时间＆＃34;来评估代码。并将始终尝试加载所有文件。

在浏览器环境中加载不同于文件的文件很容易： 在package.json中添加一个"browser"字段，指向浏览器主文件。使用"main"作为节点主文件。然后只需要模块。

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