6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

TypeScriptAdvent Calendar 2014

Day 20

Unix環境で作ったTypeScriptプロジェクトをVisual Studioでも有効に利用する

Posted at

この記事はTypeScript Advent Calendar 2014 20日目です

目的

個人で作るときや社内のプロジェクトとかだとおそらくメンバーの環境が揃っていると思いますが、ハッカソンなどをやるときにメンバーの環境が揃ってないことがあると思います。

今回はMacやLinuxのメンバーでTypeScriptのプロジェクトを作り始めたけど、メンバーにWindows使いが居てVisual Studioを使いたいとなったときに、どうVisual Studioのプロジェクトに既存のソースを取り込んでいくのがいいかを検討します。

環境

  • Windows 8.1
  • Visual Studio 2013 Community Edition

プロジェクトにすでに存在しているファイル

TypeScriptファイルはコンパイルしたらsrcディレクトリからappにgruntで移動させる。
index.htmlも移動させてappディレクトリだけ公開することを想定している。

(/) --- Gruntfile.js
     |- package.json
     |- src
         |- ts
             |- main.ts
         |- index.html
     |- app
         |- js
Gruntfile.js
module.exports = function (grunt) {

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        typescript: {
            main: {
                src: ['src/ts/**/*.ts'],
                dest: 'app/js/main.js',
                options: {
                    module: 'amd',
                    target: 'es5',
                    sourceMap: true
                }
            }
        },

        copy: {
            main: {
                files: [
                    {
                        expand: true,
                        src: ["index.html"],
                        cwd: 'src/',
                        dest: "app/",
                        filter: 'isFile'
                    }
                ]
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-typescript');

    // Default task(s).
    grunt.registerTask('compile', ['typescript']);
    grunt.registerTask('deploy', ['compile', 'copy']);
    grunt.registerTask('default', ['deploy']);
};

実行

Visual StudioでTypeScriptプロジェクトを作成する

キャプチャ1.PNG

「ソリューションのディレクトリを作成」のチェックを外すことで、Visual Studio特有のソリューションとプロジェクトディレクトリが作られなくなり、今のディレクトリ構造を維持できます。

キャプチャ2.PNG

キャプチャ3.PNG

作られたプロジェクトに存在するファイルは削除して構いません。

既存のファイルをVisual Studioプロジェクトに取り込む

プロジェクトディレクトリに既存のファイルを移動させる。
キャプチャ4.PNG

メニューからプロジェクトディレクトリ内のファイルをすべて表示させるようにする。
キャプチャ5.png

表示されたファイルを右クリックして「プロジェクトに含める」をぽちぽちしていく。
キャプチャ6.png

キャプチャ7.png

これでVisual Studioに既存のプロジェクトを取り込むことができました。
Visual Studioの機能を使って存分にTypeScriptを書きながら、MacやLinuxと共同でプロジェクトを進めることができますね。

まとめ

自分が実際にハッカソンをやったときにこれに気付けなくて、結局Visual Studioとは別に快適ではあるもののIntellij IDEAを使って書いていました。
Visual Studioも拡張されていてTask Runner ExplorerGrunt Launcherを入れることでgruntやnpmのコマンドがVisual Studioで実行できたり、Package Intellisenseで補完を利かせることができます。
さらにVisual Studio 2015ではTask Runnerも標準で搭載されたり、project.jsonを作ることでプロジェクトの準備もできるようになるらしいので便利な世界が広がって、TypeScriptを書くのも楽になっていくでしょう。

全然TypeScriptアドベントカレンダーっぽくないね!ごめんね!!!

6
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?