克服节点和浏览器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和Gulp启动多页面应用程序
- $不是一个函数。 骨干,jQuery和Browserify
- 使用browserify对js文件进行版本控制,以防止客户端使用旧的js文件
- 为什么我得到这个node.js构build错误?
- 无法获取libphonenumber npm包工作,fs.readFileSync不是一个函数错误
- 在包含Browserify的Node JS项目中包含JQuery Mobile
- google-trends-api npm找不到使用browserify的模块
- 如何处理非SPA使用的项目级捆绑?
- Node.js browserify慢:没有办法来caching大型图书馆?