How can remove import directives from JS file when compiling TS to JS in Visual Studio 2019

Question

The problem is how automatically can remove import directives from JavaScript file when compiling TS to JS or advise me a solution how to organize work with packages downloaded from npm in Visual Studio 2019.

I developing web application in Visual Studio 2019 using ASP.NET Core and MSBuild for compiling TS to JS. I create a TypeScript file, import two npm packages into it: jQuery and Axios, then compiling TS to JS, and, through the Gulp task manager, I copy libraries from the node_modules folder to the wwwroot folder.

In the end, I have four files: htmldom.ts (a TypeScript source code that contains code using jQuery and Axios); compiled htmldom.js; and libraries from the npm repository (jquery.js and axios.js) This is what how TS file looks like:

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

Here's what how the compiled JS file looks like:

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

This is what how MVC View looks like with libraries:

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

When I placing the compiled JS file with libraries into the view, the JS does not work and gives an error: SyntaxError: Unexpected string

When I remove the import directives from the JS file everything works fine:

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

The problem is how automatically can remove import directives from JavaScript file when compiling TS to JS or advise me how to use third-party libraries using TypeScript in Visual Studio 2019

Answer 1

Solved, I write an extension that delete import directives

    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;
        }
    }

and then in startup

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

}