如何使用 typescript / gulp / browserify 导入 npm 模块答案

【问题标题】：How to import npm modules with typescript / gulp / browserify如何使用 typescript / gulp / browserify 导入 npm 模块
【发布时间】：2020-06-13 01:27:58
【问题描述】：

我正在为一些非常基本的事情而苦苦挣扎，比如导入我用 NPM 安装的包。老实说，我尝试了很多谷歌搜索，并尝试了不同的教程，但我无法让它工作。这是我目前的设置，尝试使用 gulp，我想我错过了一些非常基本的东西。我希望能够直接在浏览器中使用它，所以我遵循了一个使用 browserify 的教程（但也尝试了其他教程但没有运气）

我安装了（例如通过 npm 的 webmidi），我的文件夹结构如下所示：

proj
+--node_modules
    +--module1
    +--module2
    +--webmidi
+--dist
+--src
    +--main.ts
    +--index.html

我的 Gulpfile 看起来像这样：

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

main.ts:

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

和 tsconfig.json：

{
    "files": [
        "src/main.ts"
    ],
    "compilerOptions": {
        "noImplicitAny": true,
        "target": "es5"
    }
}

我这样做时遇到的错误

>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)
    at Object.error (C:\Users\username\Documents\Projekte\code\ts4\node_modules\undertaker\lib\helpers\createExtensions.js:61:10)
    at handler (C:\Users\username\Documents\Projekte\code\ts4\node_modules\now-and-later\lib\mapSeries.js:47:14)
    at f (C:\Users\username\Documents\Projekte\code\ts4\node_modules\once\once.js:25:25)
    at f (C:\Users\username\Documents\Projekte\code\ts4\node_modules\once\once.js:25:25)
    at tryCatch (C:\Users\username\Documents\Projekte\code\ts4\node_modules\async-done\index.js:24:15)
    at done (C:\Users\username\Documents\Projekte\code\ts4\node_modules\async-done\index.js:40:12)
[23:36:57] 'default' errored after 2.26 s

根据https://github.com/djipco/webmidi/issues/82，这是导入 WebMidi 的正确方法，它应该可以工作 - 我想我做错了什么，谁能帮助我？

【问题讨论】：

关于这个问题的任何更新？

标签： typescript npm gulp browserify

【解决方案1】：

如果这是您第一次涉足捆绑程序（看起来确实如此），我建议您尝试Parcel。

使用起来非常简单，基本上不需要设置。

如果您有一个如下所示的index.html 文件：

<html>
<head>
  <link rel="stylesheet" href="./style.sass">
</head>
<body></body>
<script src="./index.ts"></script>
</html>

请注意，我在 html 中直接使用了打字稿和 sass 文件。这就是 Parcel 很酷的原因。安装 parcel 后（通常是全局，根据他们的说明），您可以调用 parcel index.html，它会自动安装您的所有依赖项，并在带有源映射的自动重新加载页面上提供它。

它非常整洁。对于其他 npm 包，您只需在项目目录中使用 npm i [package]，在您的 typescript 文件中使用 import { [whatever] } from '[package]'，就可以了。

【讨论】：

嗯，这对我也不起作用，它“编译”没有错误，但是当我尝试从 webmidi 访问这些东西时，我收到一个错误，说他找不到 WebMidi（应该是在 webmidi 中定义的单例）。不过好像是webmidi和typescript的问题，所以我要在webmidi issue-tracker中询问。
可能需要npm i @types/webmidi