大佬教程收集整理的这篇文章主要介绍了javascript – 在Node中使用Transpile TypeScript的最快方法,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用WebStorm和gulp以及任务后端:观察在后台运行以监听更改.因此,当我在WebStorm中点击“保存”时,它确实将TS转换为JS并存储在/ build目录下.
我的方法效果很好,但是转换是耗时的 – 每次运行需要两到三秒,秒会变成分钟,依此类推.
有没有办法优化它,一个更好的选择?
> https://www.npmjs.com/package/ts-node是另一种选择,但我是
不确定它比我现在拥有的更好.
>另外,听说基于Electron的新Visualstudio很好但是节省了
JS文件在同一个位置,对我来说看起来不整洁.
////////////////////////////////////////////// // BACkend tasks ////////////////////////////////////////////// const appsourceDir = path.join(dir,'/app'); const appsourceGlob = `${appsourceDir}/**/*.*`; const appsourceRelativeGlob = 'app/**/*.*'; const appCodeGlob = `${appsourceDir}/**/*.ts`; const appCodeRelativeGlob = 'app/**/*.ts'; const appFilesGlob = [appsourceGlob,`!${appCodeGlob}`]; const appFilesRelativeGlob = [appsourceRelativeGlob,`!${appCodeRelativeGlob}`]; const appBuildDir = path.join(dir,'/build'); gulp.task('BACkend:symlink',[],function (donE) { const appTargetDir = path.join(dir,'/node_modules/app'); // symlink for app fs.exists(appTargetDir,function (err) { if (!err) { fs.symlinkSync(appBuildDir,appTargetDir,'dir'); } }); done(); }); gulp.task('BACkend:clean',function (donE) { clean([appBuildDir + '/**/*','!.gitkeep'],donE); }); gulp.task('BACkend:compile',function (donE) { tsCompile([appCodeGlob],appBuildDir,appsourceDir,donE); }); gulp.task('BACkend:files',function () { // copy fixtures and other non ts files // from app directory to build directory return gulp .src(appFilesGlob) .pipe(plugin.cached('files')) .pipe(gulp.dest(appBuildDir)); }); gulp.task('BACkend:build',function (donE) { sequence( 'BACkend:clean','BACkend:compile','BACkend:files',done ); }); gulp.task('BACkend:watch:code',function () { const watcher = gulp.watch([appCodeRelativeGlob],['BACkend:compile']); watcher.on('change',function (event) { // if a file is deleted,forget about it if (event.type === 'deleted') { // gulp-cached remove api delete plugin.cached.caches.code[event.path]; delete plugin.event.caches.lint[event.path]; // delete in build del(getPathFromsourceToBuild(event.path,appBuildDir)); } }); }); gulp.task('BACkend:watch:files',function () { const watcher = gulp.watch([appFilesRelativeGlob],['BACkend:files']); watcher.on('change',forget about it if (event.type === 'deleted') { // gulp-cached remove api delete plugin.cached.caches.files[event.path]; delete plugin.event.caches.lint[event.path]; // delete in build del(getPathFromsourceToBuild(event.path,appBuildDir)); } }); }); gulp.task('BACkend:watch',['BACkend:build'],function (donE) { // first time build all by BACkend:build,// then compile/copy by changing gulp .start([ 'BACkend:watch:code','BACkend:watch:files' ],donE); }); ////////////////////////////////////////////// // Helpers ////////////////////////////////////////////// /** * remaps file path from source directory to desTination directory * @param {String} file path * @param {String} source directory path * @param {String} desTination directory path * @returns {String} new file path (remapped) */ function getPathFromsourceToBuild(file,source,desTination) { // SimulaTing the {Base: 'src'} used with gulp.src in the scripts task const filePathFromSrc = path.relative(path.resolve(sourcE),filE); // ConcatenaTing the 'desTination' absolute // path used by gulp.dest in the scripts task return path.resolve(desTination,filePathFromSrc); } /** * @param {Array} path - array of paths to compile * @param {String} dest - desTination path for compiled js * @param {String} baseDir - base directory for files compiling * @param {Function} done - callBACk when complete */ function tsCompile(path,dest,baseDir,donE) { const ts = plugin.typescript; const tsProject = ts.createProject('tsconfig.json'); gulp .src(path,{Base: baseDir}) // used for incremental builds .pipe(plugin.cached('code')) .pipe(plugin.sourcemaps.init()) .pipe(tsProject(ts.reporter.defaultReporter())).js .pipe(plugin.sourcemaps.write('.')) .pipe(gulp.dest(dest)) .on('error',donE) .on('end',donE); } /** * delete all files in a given path * @param {Array} path - array of paths to delete * @param {Function} done - callBACk when complete */ function clean(path,donE) { log('Cleaning: ' + plugin.util.colors.blue(path)); del(path).then(function (paths) { done(); }); } /** * Log a message or series of messages using chalk's blue color. * Can pass in a String,object or array. */ function log(msg) { if (typeof (msg) === 'object') { for (let item in msg) { if (msg.hasOwnProperty(item)) { plugin.util.log(plugin.util.colors.blue(msg[item])); } } } else { plugin.util.log(plugin.util.colors.blue(msg)); } }
也在GitHub上发布,见https://github.com/ivanproskuryakov/loopplate-node.js-boilerplate
另外,另一方面,如果您正在使用多个打字稿项目,请确保您使用新的TypeScript功能复合项目,https://www.typescriptlang.org/docs/handbook/project-references.html – 在我的情况下,我正在使用mono-repo并且需要编译几个项目并且此功能可以大大提高速度并简化编译工作流程.
请记住,TypeScript不仅仅是一个编译器,它也是一个语言服务 – 这就是为什么-watch将比tsc更好地完成工作 – 它将执行部分编译
以上是大佬教程为你收集整理的javascript – 在Node中使用Transpile TypeScript的最快方法全部内容,希望文章能够帮你解决javascript – 在Node中使用Transpile TypeScript的最快方法所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。