克服节点和浏览器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.js
find./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, main
和browser
属性,并且需要文件夹path。
- 如何用茉莉花和browserify进行unit testing?
- 当通过Browserify加载时,Mongoose没有连接方法
- browserify无法调用我捆绑的function,它没有定义
- 用纯npm脚本创buildvendor.js包
- 在运行Gulp任务时,在插件“gulp-browserify”中获取Js语法错误
- 使用Browserify编译dynamic需要的模块
- 使用Gulp,Mocha,Browserify进行正确configuration,以执行服务器端testing的客户端testing
- Bundle.js不是在命令节点之后创build的
- 这真的是从事件callback中获得Rx.Observable的最好方法吗?