Question

我正在使用browserify使用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文件

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

在使用UMD +的打字稿或构建中需要JS我需要使用相对路径的文件而没有完全相同代码的问题。在我添加browserify的那一刻，我获得了绝对的路径。我尝试自己编译typescript并使用browserify而不使用tsify，但它总是要求包含它的绝对路径。所有其他需要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>

Answer 1

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

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”）通向正确的模块，避免使用任何绝对路径，并允许我使用我在打字稿中使用的相同路径。

其他捆绑包可以使用“brofy.external（”../ common / common“）引用捆绑包;”告诉browserify不要将它包含在自己的包中，而是使用require来查找它。

编辑：仍希望有人提出更好的解决方案。

如何在browserify中设置模块的require（）调用中使用的模块名称或路径？

1 个答案: