从TypeScript到Javascript.两个文件在同一位置

你可以用其他的方法。

使用Grunt或Gulp的npm插件。

visual studio支持这个NPM插件。

我的示例与gruntfile.js

任务运行器资源管理器工具栏显示此方法并运行带有双击定义的任务。Vs在后台的cmd上运行代码。如输出窗口所示。

之前使用在项目目录

上运行CMD代码

npm install

gruntfile.js

/// <binding BeforeBuild='default' Clean='default' />
/// <vs BeforeBuild='default' Clean='ts:default' />
module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        banner: '/* 'n * <%= pkg.title || pkg.name %> v<%= pkg.version %>'n' +
                  ' * <%= pkg.homepage %>'n' +
                  ' * Copyright (c) 2004 - <%= grunt.template.today("yyyy") %> <%= pkg.author %>'n' +
                  ' * License: <%= pkg.license %>'n' +
                  ' * created at <%= grunt.template.today("HH:mm:ss dd.mm.yyyy") %> 'n */ 'n',
        //#region watch
        watch: {
            sass: {
                files: 'assets/css/*.scss',
                tasks: ['sass', 'cssmin']
            }
        },
        //#endregion
        //#region notify_hooks
        notify_hooks: {
            options: {
                enable: true,
                max_jshint_notifications: 5,
                title: "Project notifications "
            }
        },
        //#endregion
        //#region typescript
        ts: {
            //https://www.npmjs.com/package/grunt-ts
            default: {
                src: ["**/*.ts", "!assets/typings/**/*.ts", "!**/*.d.ts", "!node_modules/**/*.ts"],
                options: {
                    sourceMap: true
                }
            }
        },
        ts_publish: {
            default: {
                src: ["**/*.ts", "!assets/typings/**/*.ts", "!**/*.d.ts", "!node_modules/**/*.ts"],
                options: {
                    sourceMap: false
                }
            }
        },
        //#endregion
        //#region uglify
        uglify: {
            options: {
                banner: '<%= banner %>',
                report: 'gzip',
                //manage: false,
                compress: {
                    drop_console: true
                }
            },
            assets_app: {
                options: { sourceMap: true, banner: '<%= banner %>' /*,sourceMapName: 'path/to/sourcemap.map'*/ },
                files: [{
                    expand: true,
                    cwd: 'assets/app',  // bulundugu dizin
                    src: ['*.js', '!*.min.js'],
                    ext: '.js',
                    dest: 'assets/app/'
                }]
                //files: { 'assets/js/myScripts.js': ['assets/js/theme.js', 'assets/js/theme.init.js'] }
            },
            assets_account: {
                options: { sourceMap: true },
                files: [{
                    expand: true,
                    cwd: 'assets/app/account',  // bulundugu dizin
                    src: ['**/*.js', '!**/*.min.js'],
                    ext: '.js',
                    dest: 'assets/app/account/'
                }]
            },
            assets_cordova: {
                options: { sourceMap: true },
                files: [{
                    expand: true,
                    cwd: 'assets/app/cordova',  // bulundugu dizin
                    src: ['**/*.js', '!**/*.min.js'],
                    ext: '.js',
                    dest: 'assets/app/cordova/'
                }]
            }
        },
        //#endregion
        //#region cssmin
        cssmin: {
            options: {
                banner: '<%= banner %>',
                report: 'gzip'
            },
            my_target: {
                files: [{
                    expand: true,
                    cwd: 'assets/css',
                    src: ['*.css', '!*.min.css'],
                    dest: 'assets/css',
                    ext: '.min.css'
                }]
            }
        },
        //#endregion
        //#region less 
        less: {
            development: {
                options: {
                    paths: ["assets'master'less"]
                },
                files: [{
                    expand: true,
                    cwd: 'assets'master'less',
                    src: ['*.less'],
                    dest: 'assets'master'less',
                    ext: '.css'
                }]
            }
        },
        //#endregion
        //#region sass
        sass: {
            dist: {
                options: {
                    style: 'expanded'
                },
                files: { 'assets/css/myStyle.css': 'assets/css/*.scss' }
            }
        }
        //#endregion
    });
    grunt.loadNpmTasks('grunt-notify');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks("grunt-ts");
    //grunt.loadNpmTasks('grunt-contrib-watch');
    //grunt.loadNpmTasks('grunt-contrib-sass');

    //grunt.registerTask('default', ['cssmin', 'ts']);
    grunt.registerTask('default', ['ts']);
    grunt.registerTask('default_ts', ['ts', 'uglify'])
    grunt.registerTask('before_publish', ['cssmin', 'ts_publish', 'uglify']);
    grunt.task.run('notify_hooks');
}

我package.json

{
  "name": "xxxx",
  "version": "1.0.0",
  "description": "xxxx",
  "main": "xx",
  "scripts": {
    "test": "echo '"Error: no test specified'" && exit 1"
  },
  "keywords": [
    "sfasdf"
  ],
  "author": "Abdullah SARGIN apocalips@windowslive.com",
  "license": "ISC",
  "devDependencies": {
    "grunt-contrib-cssmin": "^0.12.3",
    "grunt-contrib-jshint": "^0.11.2",
    "grunt-contrib-sass": "^0.9.2",
    "grunt-contrib-uglify": "^0.9.1",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-notify": "^0.4.1",
    "grunt-ts": "^4.2.0-beta.1"
  }
}

这是IDE的默认设置，例如Webstorm，它具有整洁的功能，例如将.js(以及.map.js)文件隐藏在项目浏览器中.ts文件的子树中。您还可以通过这样的方式调整构建，分离.ts源并创建build/目录，其中存储编译后的.js和.map.js。这取决于你的个人喜好和你使用的工具。