Implementing this in an ASP.NET Core 2.x web application should have been straightforward considering it's a standard pattern. However, I seem to be doing something very wrong.
Here is the folder structure that I am working with:
projectRoot
├── node_modules
│ ├── jquery
│ └── // other npm packages
├── wwwroot
│ ├── lib
│ │ ├── jquery
│ | │ └── dist
| │ | │ └── jquery.js
│ │ └── // other files generated by Gulp tasks
│ ├── js
│ │ └── site.js // transpiled from site.ts
│ ├── css
│ └── page.html // script tag pointing to /js/site.js
├── ts
│ └── site.ts
├── gulpfile.js
└── tsconfig.json
The issue arises when trying to import jQuery in my site.ts.
// site.ts
import $ from "???"
I am struggling to find the correct path due to the following criteria:
The path needs to be included in
site.jsIt should be accessible from the browser
It must be recognized by the TypeScript compiler
The TypeScript compiler seems to refer to
node_modules\@types\jquery
Below is my tsconfig.json. I rely on a Gulp task to transpile my .ts files, without any additional configurations besides this setup.
{
"compilerOptions": {
"module": "es2015",
"baseUrl": "./wwwroot/js/",
"paths": {
"*": [ "./node_modules/@types/*" ],
"../lib/jquery/dist/jquery.js": [ "./node_modules/jquery/dist/jquery" ]
},
"esModuleInterop": true,
"moduleResolution": "node"
}
}
I have experimented with adjusting the baseUrl and paths, but have not found a solution yet.
When Chrome fails to locate the path:
import $ from "lib/jquery/dist/jquery";Uncaught SyntaxError: Unexpected identifier
Alternatively, if TypeScript fails to resolve the path, compilation is unsuccessful.
It surprises me that such a common setup is causing difficulty.