如何使用 typescript / gulp / browserify 导入 npm 模块
Posted
技术标签:
【中文标题】如何使用 typescript / gulp / browserify 导入 npm 模块【英文标题】：How to import npm modules with typescript / gulp / browserify 【发布时间】：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 的正确方法，它应该可以工作 - 我想我做错了什么，谁能帮助我？
【问题讨论】：
关于这个问题的任何更新？ 【参考方案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以上是关于如何使用 typescript / gulp / browserify 导入 npm 模块的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 typescript / gulp / browserify 导入 npm 模块
编译Angular2 TS时如何配置gulp-typescript以与JSPM一起使用
如何在没有 grunt 或 gulp 的情况下将 typescript 编译器作为 package.json 脚本运行