如何在browserify中设置模块的require()调用中使用的模块名称或路径

我正在使用browserify使用gulp将可重用的typescript模块移动到浏览器中。

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文件

require("c:\Users\Luz\Desktop\tstest\client\src\common\common.ts");

在typescript或使用UMD + require JS的构建中，我需要使用相对路径的文件，而不会出现完全相同的代码问题。添加browserify后，我得到了绝对路径。我试过自己编译typescript，并使用browserify，但它总是需要一个绝对路径来包含它。所有其他需要common.js的模块将无法找到它。我该如何解决这个问题?

编辑:示例如何在html文件中看起来:

<!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>

虽然我找不到问题的根源，但我找到了一个有效的解决方案:

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"));

属性expose将确保require("../common/common")指向正确的模块，避免任何绝对路径，并允许我使用我在typescript中使用的相同路径。

其他bundle可以使用"brofy.external("../common/common");"来引用该bundle，告诉browserify不要将其包含在自己的bundle中，而是使用require来查找它。

编辑:还是希望有人能想出一个更好的解决方案。

相关内容

最新更新

热门标签：