在 Visual Studio 中捆绑打字稿文件而不丢失 Browserlink 功能答案

【问题标题】：Bundle typescript files in Visual Studio without loosing Browserlink feature在 Visual Studio 中捆绑打字稿文件而不丢失 Browserlink 功能
【发布时间】：2020-06-16 09:00:38
【问题描述】：

Visual Studio 可以在保存时自动编译 typescript 文件。当使用 browserlink 时，它也会自动将浏览器更新为最新版本。

有没有办法在 Visual Studio 中捆绑打字稿文件而不会失去此功能？代码应在保存时重新编译，并通过浏览器链接自动在浏览器中可用。

需要能够解析 es6 模块的任何解决方案！我在整个网络上找到了一些解决方案，但他们大多使用 webpack（速度很慢）并且没有提及它是否适用于 browserlink

【问题讨论】：

标签： typescript visual-studio webpack bundling-and-minification asp.net-bundling

【解决方案1】：

您可以使用 Cloud Mate (https://angrymonkeycloud.com/mate)，但不确定 browserlink！

它使用 gulp 编译、捆绑和缩小 TypeScript 文件，而无需编写 gulp 复杂的配置。

通过 npm 在您的设备上全局安装 cloud mate：

    npm install -g cloudmate

创建名为“mateconfig.json”的JSON配置文件如下：

    {
        "files":  
        [
            {
                "output": ["js/index.js"],
                "input": ["src/file1.ts", "src/file2.ts"]
            }
        ],
        "builds":
        [
            {
                "name": "dev", // important
                "js": {
                    "minify": true,
                    "sourceMap": true,
                    "declaration": false,
                    "webClean": true // important to make it work on browsers
                },
                "ts": {
                    "compilerOptions": { // this is my working configuration
                        "target": "es5",
                        "noEmitOnError": false,
                        "noImplicitAny": false,
                        "module": "ES6"
                        "lib": [ "ES2015", "DOM" ]
                    }
                }
            }
        ]
    }

使用 CLI 执行

    cd {mateconfig.json file path}
    cloudmate -w // -w to keep watching files for updates

【讨论】：