Как использовать tsify с watchify на Ubuntu? - PullRequest
Новая
       70

Как использовать tsify с watchify на Ubuntu?

0 голосов
/ 03 апреля 2020

Входной каталог содержит:

  1. файл JavaScript (плагин jQuery, которого нет в репозитории DefinuallyTyped) и
  2. 2 файлов TypeScript
    • declarations.d.ts
    • main.ts

Файл tsconfig. json это (работа в процессе): 

{
    "compilerOptions": {
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "outDir": "wp-content/themes/custom-theme/assets/js",
        "watch": true,
        "allowJs": true,
        "lib": ["ES2016", "DOM"]
    },
    "include": [
        "wp-content/themes/custom-theme/assets/ts"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

В настоящее время у меня есть часы. sh скрипт, который хорошо работает: 

tmux \
    new-session  'cd html && tsc' \; \
    split-window 'cd html/wp-content/themes && scss --watch custom-theme/assets/scss:custom-theme/assets/css' \; \
    split-window 'cd html/wp-content/themes && watchify custom-theme/assets/js/main.js -o custom-theme/assets/js/bundle.js'

Я хочу заменить этот скрипт чем-то вроде сборки Browserify . js файл (я предпочитаю build.ts, если это возможно), и я хочу использовать Tsify с Watchify (я понял, что Watchify build. js файл похож на файл Browserify).

У меня есть видел этот пример , но я не уверен, что нахожусь на хорошей дороге.

У меня есть этот нерабочий сборка. js файл: 

const browserify = require("browserify");
const tsify = require("tsify");

browserify()
    .plugin(tsify, { allowsJs: true })
    .add("wp-content/themes/custom-theme/assets/ts/main.ts")
    .bundle()
    .on('error', function (error) { console.error(error.toString()) })
    .pipe(process.stdout);

Он даже не запускается: он говорит о синтаксической ошибке в строке 1 рядом с (.

Любой совет с благодарностью.

Спасибо .

Обновление 1 * 10 45 * Новая сборка. js файл: const watchify = require("watchify"); const tsify = require("tsify"); watchify() .plugin(tsify, { allowsJs: true }) .add("wp-content/themes/custom-theme/assets/ts/main.ts") .bundle() .on('error', function (error) { console.error(error.toString()) }) .pipe(process.stdout); запускается, но выдает следующее: $ node build.js /.../node_modules/watchify/index.js:14 var cache = b._options.cache; ^ TypeError: Cannot read property '_options' of undefined at watchify (/.../node_modules/watchify/index.js:14:19) at Object.<anonymous> (/.../build.js:4:1) at Module._compile (internal/modules/cjs/loader.js:1147:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10) at Module.load (internal/modules/cjs/loader.js:996:32) at Function.Module._load (internal/modules/cjs/loader.js:896:14) at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) at internal/main/run_main_module.js:17:47 Обновление 2

Я закончил тем, что использовал watch.sh файл сценария оболочки: 

tmux \
    new-session  'cd html && tsc' \; \
    split-window 'cd html/wp-content/themes; scss --watch custom-theme/assets/scss:custom-theme/assets/css' \; \
    split-window 'cd html/wp-content/themes; watchify custom-theme/assets/ts/main.ts -p [ tsify ] -o custom-theme/assets/js/bundle.js -v'

С здесь Я понимаю, что он уважает файл tsconfig.json. Единственная проблема заключается в том, что вызов require в main.ts не возвращает то, что хорошо понимает VS Code, поэтому у меня нет поддержки автозаполнения. Это где мне все еще нужна помощь. В будущем я также хотел бы использовать скрипт build.js, если есть кто-нибудь, кто может мне помочь с этим.

1 Ответ

0 голосов
/ 09 апреля 2020

Теперь я использую синтаксис ES6 для импорта модулей везде, где я что-то импортирую. Я также использую относительные пути к файлам внутри соответствующих пакетов npm в каталоге node_modules при импорте из пакетов npm.

В tsconfig. json У меня есть эти строки помимо других: 

"target": "ES3",
"lib": ["ES2020", "DOM"],
"module": "CommonJS"

Окончательный рабочий тестовый проект: здесь .

У меня все еще есть проблемы с некоторыми модулями, которые не подготовлены для импорта ES6.

...