我正在为一个需要包含在后端和前端的反应应用程序编写模块。
在我的代码中的某个时刻,我需要一些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
),因此无法在前端解析。
../../../icon/
由于同样的原因,没有让它工作:browserify只接受以./
开头的路径。
答案 0 :(得分:1)
在使用Browserify时,它被认为是做条件的不良做法,因为它无法在&#34;编译时间&#34;来评估代码。并将始终尝试加载所有文件。
在浏览器环境中加载不同于文件的文件很容易:
在package.json中添加一个"browser"
字段,指向浏览器主文件。使用"main"
作为节点主文件。然后只需要模块。
您可以对项目中的子文件夹执行相同的操作。只需添加一个包含"private": true
及main
和browser
属性的package.json文件,并且需要文件夹路径。