VS2017, ASP.net, Typescript, and npm

Question

I have an existing ASP.net application in Visual Studio. Until recently I only used JavaScript. Now I want use Typescript. Installing and transpiling works great. However, I got stuck when I wanted to import modules.

My idea was to use npm for loading modules, e.g. I added to package.json:

"devDependencies": {
  "typestyle": "^1.7.1",
}

which I want to import in my .ts file via:

import { style } from 'typestyle';

The problem: npm downloads to folder node_modules which does not belong to my project (but it is inside my project folder); the import statement does not find the required files.

Currently I am using requirejs to enable import statements as explained here. My tsconfig.json looks like this:

{
  "compilerOptions": {
    "noImplicitAny": true,
    "noEmitOnError": true,
    "sourceMap": true,
    "target": "es5",
    "module": "amd",
    "moduleResolution": "node"
  }
}

I can download typestyle.js manually, put it in my project folder, and configure the requirejs configuration file main.js so that it finds it. But then I am not using npm.

How can I import modules that I loaded with npm? I'd like to use requirejs. I do not want Angular or React. If possible I also want to avoid other things which make my project unnecessarily complicated (Mocha, node.js, knockout, Webpack, Gulp, Browserify, ...)

EDIT

Okay, after reading NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack I guess I do need a module bundler like Webpack or Browserify. But maybe there is some tool integrated in VS2017 which I could use?

EDIT2

And after reading How it feels to learn JavaScript in 2016 (note: this is 2018) I understand that it might be too much to ask for a simple solution...

if you have already installed npm globally using then check the version of npm installed using `npm -v` in command prompt . I think you have to provide the path to the node_modules folder in `visual studio -> Option` as given in this link below https://www.hanselman.com/blog/VisualStudio2015FixingDependenciesNpmNotInstalledFromFseventsWithNodeOnWindows.aspx — Niladri, Feb 28 '18 at 06:37
I am using the in VS2017 integrated npm. It is version 3.3.4 and located in /Web/External/npm.cmd. But even if I changed the node_modules path, how would requirejs know in which subfolder to look for any specific .js file? — Jack Miller, Feb 28 '18 at 07:27

score 0 · Answer 1 · answered Feb 28 '18 at 09:58

Finally I found a solution which suits my needs. Since it is very lengthy I'll just post the link (project source code) http://codingsight.com/using-npm-webpack-and-typescript-to-create-simple-aspnet-core-web-app/

Only drawback so far: It uses Webpack instead of requirejs. Webpack is a module packer. All .js files/modules are combined into one huge .js. No lazy loading by default.

VS2017, ASP.net, Typescript, and npm

1 Answers1