I'm facing challenges with performing some fundamental tasks such as importing packages that I installed using NPM. Despite conducting extensive research online and following various tutorials, I have been unable to achieve success. Here is my current configuration - attempting to use Gulp. It seems like I am overlooking something basic. I aim to utilize it directly in the browser, hence I followed a tutorial involving Browserify (although I also experimented with other guides without any luck).
For example, I have installed 'webmidi' via npm, and this is how my folder structure appears:
proj
+--node_modules
+--module1
+--module2
+--webmidi
+--dist
+--src
+--main.ts
+--index.html
This is what my Gulpfile consists of:
var gulp = require('gulp');
var webmidi = require('webmidi');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var tsify = require('tsify');
var paths = {
pages: ['src/*.html']
};
gulp.task('copy-html', function () {
return gulp.src(paths.pages)
.pipe(gulp.dest('dist'));
});
gulp.task('default', gulp.series(gulp.parallel('copy-html'), function () {
return browserify({
basedir: '.',
debug: true,
entries: ['src/main.ts'],
cache: {},
packageCache: {}
})
.plugin(tsify)
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('dist'));
}));
The content of my main.ts file looks like this:
import * as webmidi from "webmidi";
console.log(WebMidi);
package.json:
{
"name": "ts4",
"version": "1.0.0",
"description": "",
"main": "./dist/main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browserify": "^16.5.0",
"gulp": "^4.0.0",
"gulp-require-modules": "^1.1.4",
"gulp-typescript": "^6.0.0-alpha.1",
"tsify": "^4.0.1",
"typescript": "^3.8.2",
"vinyl-source-stream": "^2.0.0"
},
"dependencies": {
"webmidi": "^2.5.1"
}
}
And here is tsconfig.json:
{
"files": [
"src/main.ts"
],
"compilerOptions": {
"noImplicitAny": true,
"target": "es5"
}
}
When I run the command 'gulp', I encounter the following error:
>gulp
[23:36:55] Using gulpfile ~\Documents\Projekte\code\ts4\gulpfile.js
[23:36:55] Starting 'default'...
[23:36:55] Starting 'copy-html'...
[23:36:55] Finished 'copy-html' after 39 ms
[23:36:55] Starting '<anonymous>'...
[23:36:57] '<anonymous>' errored after 2.21 s
[23:36:57] Error: TypeScript error: c:/users/username/documents/projekte/code/ts4/src/main.ts(4,13): Error TS2304: Cannot find name 'WebMidi'.
at formatError (C:\Users\username\AppData\Roaming\npm\node_modules\gulp-cli\lib\versioned\^4.0.0\format-error.js:21:10)
at Gulp.<anonymous> (C:\Users\username\AppData\Roaming\npm\node_modules\gulp-cli\lib\versioned\^4.0.0\log\events.js:33:15)
at emitOne (events.js:121:20)
at Gulp.emit (events.js:211:7)
...
As per this discussion on GitHub, the method I am employing to import WebMidi is correct and should work. However, I suspect there might be an oversight on my part. Can anyone provide assistance?