时间戳

首页 > 解决方案 > 在 Visual Studio 2019 中将 TS 编译为 JS 时如何从 JS 文件中删除导入指令

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

问题描述

问题是如何在将 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 文件放入视图时，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 使用第三方库

标签： javascripttypescriptasp.net-corevisual-studio-2019

解决方案

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

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

}

推荐阅读