javascript - 如何在 Ubuntu 上使用 tsify 和 watchify?
问题描述
输入目录包含:
- 一个JavaScript文件(一个不在DefinitelyTyped repo中的jQuery插件)和
- 2 个打字稿文件
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
文件。唯一的问题是require
调用main.ts
没有返回 VS Code 很好理解的东西,所以我没有自动完成支持。这是我仍然需要帮助的地方。将来我还想使用build.js
脚本,如果有人可以帮助我的话。
解决方案
现在我使用 ES6 语法在任何地方导入模块。node_modules
当我从 npm 包导入时,我还使用目录中相关 npm 包中文件的相对路径。
在tsconfig.json中,除了其他行之外,我还有这些行:
"target": "ES3",
"lib": ["ES2020", "DOM"],
"module": "CommonJS"
最终的工作测试项目在这里。
我仍然有一些没有为 ES6 导入准备好的模块的问题。
推荐阅读
- json - shell脚本:使用管道而不是文件进行批处理
- sql - SQL Server 与来自同一 Azure SQL SERVER 的不同 Azure SQL 数据库的两个表合并
- java - 将 CSV 文件转换为 Java 对象 (POJO) 并将其发送到 ActiveMQ 队列
- python - 输入图像大小不是8的比例时如何实现dct?
- spring-cloud-gateway - 如何在 Spring Cloud Gateway 中将路由分发到多个 YML 文件?
- c++ - 谁能解释下面的 for 循环是做什么的?
- javascript - 使用 Java 进行 Javascript 转发渲染/模拟的网页
- android - 即使 adb 识别它,Android Studio 也无法识别 MacOS 上的设备
- r - R 的 data.table 中的向量化函数
- python - 如何在python中添加for循环?