如何设置在浏览器中模块的require()调用中使用的模块名称或路径? [英] How to set the module name or path used in require() calls of a module in browserify?
问题描述
我正在使用browserify使用gulp将可重用的打字稿模块移动到浏览器中.
I am using browserify to move a reusable typescript module into the browser using gulp.
gulp.task("default", function(){
return browserify({
basedir: '.',
debug: true,
require: ['./src/common/common.ts'],
fullPaths: false,
cache: {},
packageCache: {}
}).plugin(tsify)
.bundle()
.pipe(source('common.js'))
.pipe(gulp.dest("dist"));
});
令我惊讶的是，我需要通过以下方式包含生成的common.js文件:
To my surprise I need to include the resulting common.js file via
require("c:\\Users\\Luz\\Desktop\\tstest\\client\\src\\common\\common.ts");
在打字稿或使用UMD +的构建中，需要JS我要求使用相对路径的文件使用完全相同的代码不会出现问题.在添加browserify的那一刻，我得到了绝对路径.我尝试自己编译打字稿，并在没有tsify的情况下使用browserify，但始终需要包含它的绝对路径.所有其他需要common.js的模块都将找不到它.我该如何解决?
In typescript or in builds using UMD + require JS I require files using relative paths without problems with exactly the same code. In the moment I add browserify I get absolute paths. I tried compiling typescript myself and use browserify without tsify but it always demands an absolute path to include it. All other modules that require common.js will fail to find it. How can I fix this?
示例在html文件中的外观:
Example how it looks like in the html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="common.js"></script>
</head>
<body>
<script>
console.log("script started");
//works
var test = require("c:\\Users\\Luz\\Desktop\\tstest\\client\\src\\common\\common.ts");
test.printCommon();
//fails (all other modules will try to find it at this path)
var test2 = require("../common/common");
test2.printCommon();
</script>
</body>
</html>
推荐答案
虽然我找不到问题的根源，但找到了可行的解决方案:
While I couldn't find the root of the problem I found a solution that works:
var brofy = browserify({
basedir: '.',
debug: true
});
brofy.plugin(tsify);
brofy.require("./src/common/common.ts", { expose: "../common/common" });
brofy.bundle()
.pipe(source('common.js'))
.pipe(gulp.dest("dist"));
属性暴露将确保require("../common/common")导致正确的模块，避免使用任何绝对路径，并允许我使用与打字稿中使用的相同路径.
The property expose will make sure that require("../common/common") leads to the correct module avoiding any absolute paths and allowing me to use the same paths I use in typescript.
其他捆绑软件可以使用"brofy.external(" ../common/common);"引用该捆绑软件.告诉browserify不要将其包含在自己的捆绑软件中，而是使用require来找到它.
Other bundles can reference the bundle using "brofy.external("../common/common");" to tell browserify to not include it in their own bundle and rather use require to find it.
仍然希望有人能提出更好的解决方案.
Still hoping someone comes up with a better solution.
这篇关于如何设置在浏览器中模块的require()调用中使用的模块名称或路径?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
