Как импортировать npm модули с машинописью / gulp / browserify - PullRequest
Новая
       83

Как импортировать npm модули с машинописью / gulp / browserify

0 голосов
/ 29 февраля 2020

Я борюсь с некоторыми очень основными c вещами, такими как импорт пакетов, которые я установил с NPM. Я, честно говоря, много пробовал гуглить, пробовал разные уроки, но не могу заставить его работать. Вот мои текущие настройки, пробуя gulp, я думаю, что я упускаю что-то довольно базовое c. Я хочу иметь возможность использовать его непосредственно в браузере, поэтому я следовал учебнику с помощью browserify (но также попробовал другие учебники без удачи)

Я установил (например, webmidi через npm), и моя структура папок выглядит следующим образом это: 

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 Ответ

0 голосов
/ 29 февраля 2020

Если это ваш первый набег на упаковщики (как это выглядит), я предлагаю попробовать Parcel .

Это очень просто в использовании, не требуя настройки.

Если у вас есть файл index.html, который выглядит следующим образом: 

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

Обратите внимание, что я использовал набранный текст и файл sass напрямую в html. Вот почему Parcel это круто. После установки участка (обычно в глобальном масштабе, в соответствии с его инструкциями) вы можете позвонить parcel index.html, и он автоматически установит все ваши зависимости и отобразит их на странице автоматической перезагрузки с исходными картами.

Это довольно опрятно. Для других npm пакетов вы просто npm i [package] в каталоге проекта, используете import { [whatever] } from '[package]' в вашем файле машинописного текста, и вы можете go.

...