克服节点和浏览器pathparsing的差异

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

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

然而,这与节点如何parsing文件名相冲突。 它无法从./src/js/components/tools/svg.jsfind./src/js/components/tools/svg.js

这就是为什么我必须用BACKEN子句来防止这个要求。 这虽然打破了我的眼睛,我想只能写:

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

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

修复节点find./src/icon

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

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

在后端。 但是,由于browserify只接受以./开头的paths (因此忽略src/icon ),所以前端不能parsing。

修复浏览器使用../../../icon/

由于相同的原因,没有得到这个工作:browserify只接受以./开头的path。

在使用Browserify时,执行条件操作被认为是不好的做法,因为它无法在“编译时”评估代码,并且总是尝试加载所有文件。

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

您可以对项目中的子文件夹执行相同的操作。 只需添加一个package.json文件,使用"private": true和both, mainbrowser属性,并且需要文件夹path。