Question

我在我的新Angular应用程序中使用它开始使用TypeScript，我只想问一下将所有这些js和ts文件放在哪里。转换器的惯例似乎是将.js文件转储到与.ts文件相同的目录中。

这是最佳做法吗？感觉我的文件夹结构现在被.ts和.js文件污染了。接受这个或制作另一个文件夹？

Answer 1

这是IDE的默认设置，例如 Webstorm ，它具有整齐的功能，例如在{{1的子树中隐藏.js（以及.map.js）文件项目资源管理器中的文件。您还可以调整构建方式，以便分隔.ts个来源并创建存储已编译.ts和build/的{{1}}目录。这取决于您的个人偏好和您使用的工具。

Answer 2

你可以采取其他方式。

使用Grunt或Gulp npm插件。

visual studio支持这个npm插件。

我的gruntfile.js样本

Task Runner Explorer工具栏显示了此方法并使用双击定义任务运行。 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"
  }
}

TypeScript to Javascript。两个文件在同一个位置？

2 个答案: