2016年4月20日 星期三

將 TypeScript 檔案編譯至特定的位置

 ASP.NET Core 樣版的預設目錄結構如下
  • wwwroot:是用來存放與網站有關的靜態檔案
所以 TypeScript(*.ts) 的檔案就不應該放在 wwwroot 下面.

假設我正在寫一個 ng 的專案,我在專案 root 下建立一個名為 ngApp 的資料夾,用來存放 TypeScript 檔案,這個資料夾有自己的目錄結構,我希望編譯出來的 js 檔案可以放在 wwwroot/scripts 下面,該如何做呢?

圖片說明

1.希望編譯出的 ts 放在 wwwroot/script 下
2.開發 ng app 的 TypeScript 檔



可以在專案目錄下建立一個  tsconfig.json 檔案,compiler 會根據裡面的定義來處理,檔案內容如下
{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "rootDir": "",
    "outDir": "./wwwroot/scripts"
  },
    "exclude": [
        "node_modules",
        "wwwroot"
    ]
}


必需在 compilerOptions 屬性下設定 rootDir,outDir 這2個屬性
  • rootDir: 告訴 compiler 要編譯的 ts 檔案的根目錄在哪.
                   通常就是專案下所有的 ts檔,所以設定空白.
  • outDir:  告訴 compiler 編譯後產生的 js 檔要放在哪.
                   這邊指定在 wwwroot/scripts 目錄下
這邊要注意的是,如果只設定 outDir 而沒有設定 rootDir,則整個專案下的 ts 檔所編譯出來的 js 都會放在 wwwroot/scripts 下面,所以你想要output出來的目錄結構跟開發是相同的,必需設 定 rootDir 屬性才行.






2016年4月17日 星期日

使用 Visual Studio Code 開發 .NET Core RC2 版的程式

ASP.NET Core 1.0 RC2 將不使用 DNX 運作,將全面改以 .NET Core CLI 的方式運作,但目前 .NET Core RC2 尚未 release,VS 2015 update 2 還是使用 DNX 方式在編譯和執行程式.

參考 :http://www.hanselman.com/blog/AnUpdateOnASPNETCore10RC2.aspx

在 ASP.NET Community Standup - April 12th, 2016 - The Quickening 會議裡面有 demo 如何使用 Visual Studio Code - Insiders 來開發 .NET Core RC2,它可支援 Intellisence,debug,等等


  1. 下載 VS Code - Insiders 版本(這可以算是內部預覽版本)
    https://code.visualstudio.com/Download#insiders
  2. 下載 omnisharp-vscode extension:讓 VS Code - Insiders 支援 .NET Core RC2 開發環境
    https://github.com/OmniSharp/omnisharp-vscode/releases
  3. 安裝 omnisharp-vscode extension
    啟動 VS Code - Insiders,在工具列 檔案→開啟檔案(Ctrl + O),選擇第二步下載的 extension,按開啟。

    安裝完成後會要求重新啟動 VS Code - Insiders
  4. 如果要讓 VS Code - Insiders 可以 deubg application,需要做設定
    https://github.com/OmniSharp/omnisharp-vscode/wiki/Portable-PDBs#downloading-a-net-cli-which-supports-debugtype-option
  5. 接著就可以在 VS Code - Insiders 上開發  .NET Core RC2 的程式了,關於如何寫可參考

    使用 .Net Core CLI 建立 Console Application

    ASP.NET Core 如何使用 .Net full framework 與 .Net core

2016年4月11日 星期一

使用 .Net Core CLI 建立 Console Application

  1. 安裝 .Net Core SDK & CLI (撰文時最新版本為:1.0.0-rc2-002345)

    從 GitHub 下載:https://github.com/dotnet/cli,根據 OS 選擇想下載的安裝檔。
    .Net Core SDK installer 包含 .Net Core + CLI tools
    在這選擇 Widnwos x64 下載及安裝
  2. 安裝完成後,開啟 cmd 視窗執行以下命令檢查安裝是否正確
     
        dotnet --info
    



    想知道 dotnet 命令支援哪些參數,可以使用 -h or --help 查看
  3. 建立專案目錄並進到目錄下
        D:\lab>mkdir app1
        D:\lab>cd app1
        D:\lab\app1>
    
  4. 建立 console application 專案
        dotnet new
    

    執行命令後會產生2個檔案
    Programe.cs:主程式
    project.json:專案的組態檔
  5. 在專案目錄下,新增 NuGet.config.
    為了取得最新版的程式,否則在之後的第7步會發生找不到相關的.Net Core套件的錯誤
    記得在 config 檔第一行加上
    <?xml version="1.0" encoding="utf-8"?>
    
      
        
        
      
    
    
  6. 修改組態檔內容.
    因為還沒有正式版的 rc2 還沒 release,後面所指定的版本號可能會在剛剛上一步設定的 packagesources(AspNetVNext) 找不到,因此改成1.0.0-*,表示要從 nuget 中取得最新版的.Net Core套件



    修改上圖紅色框的版本號如下
        
    {
      "version": "1.0.0-*",
      "compilationOptions": {
        "emitEntryPoint": true
      },
      "dependencies": {
        "Microsoft.NETCore.App": {
          "type": "platform",
          "version": "1.0.0-*"
        }
      },
      "frameworks": {
        "netcoreapp1.0": {}
      }
    }
    
  7. 執行套件還原.
    執行完成後 cli 會根據 project.json 的內容自動產生 project.lock.json 檔,這檔案是由 cli 來維護.
    可參考:http://blog.falafel.com/what-is-project-lock-json/
        
    dotnet restore
  8. 接著執行 dotnet run,他會建置並執行程式



    .NET Core 內含 CoreRT,可以將程式編譯成 native(機器語言),這樣就不需要依靠 corefx/runtime 即可執行程式,不過這個版本似乎有點問題,沒有成功產生



    找到有人發了issue,但還沒至何回覆
    https://github.com/dotnet/cli/issues/2299