如何在Ubuntu上使用tsify和with？

Question

输入目录包含：

1. JavaScript文件(不在DefinitelyTyped回购中的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 )，并且我希望在Watchify中使用Tsify (我知道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文件。唯一的问题是，require调用在main.ts中并不返回VS代码理解的内容，因此我没有自动完成支持。这就是我还需要帮助的地方。将来，如果有人能帮我做这件事，我也想使用build.js脚本。

Answer 1

现在，我使用ES6语法在导入任何东西的地方导入模块。在从npm包导入时，我还使用node_modules目录中相关npm包中的文件的相对路径。

在tsconfig.json中，除了其他行之外，还有以下几行：

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

最后的工作测试项目是这里。

我仍然有一些模块没有为ES6导入做好准备的问题。