如何在Ubuntu上的tsify中使用tsify? [英] How to use tsify with watchify on Ubuntu?
问题描述
输入目录包含:
- 一个JavaScript文件(不在DefinitelyTyped存储库中的jQuery插件)和
- 2个TypeScript文件
-
declarations.d.ts
-
main.ts
-
- a JavaScript file (a jQuery plugin that is not in the DefinitelyTyped repo) and
- 2 TypeScript files
declarations.d.ts
main.ts
tsconfig.json 文件是此文件(正在进行中):
The tsconfig.json file is this (work in progress):
{
"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 脚本效果很好:
Currently I have this watch.sh script that works well:
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文件类似于
I want to replace this script with something like a Browserify build.js file (I prefer build.ts if possible), and I want to use Tsify with Watchify (I understood that Watchify build.js file is similar to the Browserify file).
我见过此示例,但是我不确定自己是否走上了好路。
I have seen this example, but I am not sure if I am on the good road.
我有这个问题 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行的<$附近有语法错误c $ c>(。
It does not even start to run: it says there is a syntax error on line 1 near (
.
任何建议都将不胜感激。
Any advice is greatly appreciated.
谢谢您。
新的 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脚本文件:
Update 2
I ended up using this watch.sh
shell script file:
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
脚本。
From here I understand that it respects the tsconfig.json
file. The only issue is that the require
call in main.ts
does not return something that VS Code understands well, so I do not have autocompletition support. This is where I still need help. In future I would also like to use a build.js
script, if there is anyone who can help me with this.
推荐答案
现在,我使用ES6语法在所有导入内容的地方导入模块。从npm软件包导入时,我还使用 node_modules
目录中相关npm软件包中文件的相对路径。
Now I use ES6 syntax for importing modules everywhere I import something. I also use relative paths to files inside the relevant npm packages in node_modules
directory when I import from npm packages.
在 tsconfig.json 中,我还有其他几行:
In tsconfig.json I have these lines besides others:
"target": "ES3",
"lib": ["ES2020", "DOM"],
"module": "CommonJS"
最终的工作测试项目是此处。
The final working test project is here.
对于某些未预先配对以进行ES6导入的模块,我仍然有问题。
I still have problems with some modules that are not prepaired for ES6 import.
这篇关于如何在Ubuntu上的tsify中使用tsify?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!