javascript - 在 Visual Studio 2019 中将 TS 编译为 JS 时如何从 JS 文件中删除导入指令

Question

问题是在将 TS 编译为 JS 时如何自动从 JavaScript 文件中删除导入指令，或者建议我如何在 Visual Studio 2019 中组织使用从 npm 下载的包的解决方案。

我使用 ASP.NET Core 和 MSBuild 在 Visual Studio 2019 中开发 Web 应用程序，以将 TS 编译为 JS。我创建一个 TypeScript 文件，将两个 npm 包导入其中:jQuery 和 Axios，然后将 TS 编译为 JS，然后通过 Gulp 任务管理器，将库从 node_modules 文件夹复制到 wwwroot 文件夹。

最后，我有四个文件:htmldom.ts(包含使用 jQuery 和 Axios 的代码的 TypeScript 源代码)；编译htmldom.js；以及 npm 存储库中的库(jquery.js 和 axios.js)TS 文件如下所示:

import "../node_modules/jquery/dist/jquery.js";
import "../node_modules/@types/jquery/index";
import axios from "../node_modules/axios/index"

document.addEventListener("DOMContentLoaded", function () {
    const button = document.getElementById('button');
    button.addEventListener('click', function () {
        $("#button").on("click", function () {
            alert("hello jquery!!!");
        });

        var url = "https://jsonplaceholder.typicode.com/todos";
        var data = axios.get(url).then(function (responce) {
            console.log(responce.data);
        });
        console.log(data);
    });
});

编译后的 JS 文件如下所示:

import "../node_modules/jquery/dist/jquery.js";
import "../node_modules/@types/jquery/index";
import axios from "../node_modules/axios/index";
document.addEventListener("DOMContentLoaded", function () {
    const button = document.getElementById('button');
    button.addEventListener('click', function () {
        $("#button").on("click", function () {
            alert("hello jquery!!!");
        });
        var url = "https://jsonplaceholder.typicode.com/todos";
        var data = axios.get(url).then(function (responce) {
            console.log(responce.data);
        });
        console.log(data);
    });
});
//# sourceMappingURL=htmldom.js.map

这就是 MVC View 与库的样子:

<input type="button" id="button" value="click me" />
@section Scripts
{
    <script src="~/javascripts/jquery.js" asp-append-version="true"></script>
    <script src="~/javascripts/axios.js" asp-append-version="true"></script>
    <script src="~/compiled/htmldom.js" asp-append-version="true"></script>
}

当我将编译好的带有库的 JS 文件放入 View 中时，JS 不起作用并给出错误:SyntaxError: Unexpected string

当我从 JS 文件中删除导入指令时，一切正常:

//import "../node_modules/jquery/dist/jquery.js";
//import "../node_modules/@types/jquery/index";
//import axios from "../node_modules/axios/index";
document.addEventListener("DOMContentLoaded", function () {
    const button = document.getElementById('button');
    button.addEventListener('click', function () {
        $("#button").on("click", function () {
            alert("hello jquery!!!");
        });
        var url = "https://jsonplaceholder.typicode.com/todos";
        var data = axios.get(url).then(function (responce) {
            console.log(responce.data);
        });
        console.log(data);
    });
});
//# sourceMappingURL=htmldom.js.map

问题是在将 TS 编译为 JS 时如何自动从 JavaScript 文件中删除导入指令，或者建议我如何在 Visual Studio 2019 中使用 TypeScript 使用第三方库

Answer 1

解决了，我编写了一个删除导入指令的扩展

    public static class ApplicationBuilderExtension
    {
        public static IApplicationBuilder UseRemoveImport(this IApplicationBuilder app, IHostingEnvironment env)
        {
            var path = env.WebRootPath + "/assets/compiled";

            foreach (string file in Directory.EnumerateFiles(path, "*.js"))
            {
                var contents = File.ReadAllLines(file);
                var allExceptImport = contents.Where(l => !l.StartsWith("import"));
                File.WriteAllLines(file, allExceptImport);
            }

            return app;
        }
    }

然后在启动中

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseRemoveImport(env);
    app.UseStaticFiles();

}