如何在 Ubuntu 上使用 tsify 和 watchify？

Question

輸入目錄包含：

1. 一個 JavaScript 文件（一個 jQuery 插件，它不在絕對類型存儲庫中）和
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"
    ]
}

目前我有這個運行良好的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/js/main.js -o custom-theme/assets/js/bundle.js'

我想用類似 Browserify build.js 文件的東西替換這個腳本（如果可能，我更喜歡 build.ts），並且我想將 Tsify 與 Watchify 一起使用（我知道 Watchify build.js 文件類似於 Browserify 文件）。

我看過這個例子，但我不確定我是否走在好路上。

我有這個不起作用的build.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

新的build.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 shell 腳本文件：

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文件。 唯一的問題是main.ts中的require調用沒有返回 VS Code 可以很好理解的內容，所以我沒有自動完成支持。 這是我仍然需要幫助的地方。 將來我還想使用build.js腳本，如果有人可以幫助我的話。

Answer 1

現在我使用 ES6 語法在任何地方導入模塊。 當我從 npm 包導入時，我還使用node_modules目錄中相關 npm 包中文件的相對路徑。

在tsconfig.json除了其他行之外，我還有這些行：

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

最終的工作測試項目在這里。

我仍然有一些沒有為 ES6 導入准備好的模塊的問題。