Visual Studio에서 elm을 사용하여 웹 프로젝트 설치 2015

Question

elm으로 웹 프로젝트를 설정하는 방법 visual studio 2015에?

우리는 새로운 프로젝트를 시작했으며, 지속적인 통합을 위해 visual studio에 필요하고 특정 서버에 구축을 구축합니다.

내 문제는 내가 elm 프로젝트 템플릿을 찾지 못했고 요즘 엘름에 대해 들었 기 때문에 나에게도 새로운 것이 었습니다.

도움을 주시면 감사하겠습니다.

Answer 1

우리는 UI가 별도의 프로젝트이고 백엔드가 ASP.NET에있는 동안 Elm으로 완전히 작성된 구조를 만들었습니다. 모든 것이 하나의 Visual Studio 솔루션에 포함되어 있으며 VS2015 또는 TeamCity의 MSBuild를 사용하여 컴파일 할 수 있습니다.

우리는 UI 개발을 위해 VS 코드를 사용합니다. 느릅 나무에 대한 Visual Studio 지원을 모르겠습니다. 당신이 볼 수 있듯이, 백그라운드에서 우리는 실제 작업을 할 npm 및 gulp를 사용

<?xml version="1.0" encoding="utf-8"?> 
<Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003"> 
    <PropertyGroup> 
    <ProjectGuid>{B9D43DC2-6337-4605-BBE2-7C7C765EDC20}</ProjectGuid> 
    <ApplicationVersion>1.0.0.%2a</ApplicationVersion> 
    </PropertyGroup> 
    <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Debug|AnyCPU' "> 
    <BuildTask>build:dev</BuildTask> 
    </PropertyGroup> 
    <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Release|AnyCPU' "> 
    <BuildTask>build:release</BuildTask> 
    </PropertyGroup> 
    <Target Name="Build"> 
    <Exec Command="echo Executing npm install..." Condition="!Exists('$(ProjectDir)node_modules')" /> 
    <Exec Command="npm install" Condition="!Exists('$(ProjectDir)node_modules')" />  
    <Exec Command="echo Building the UI using GULP..." /> 
    <Exec Command="echo ---------------------------------------------" /> 
    <Exec Command="gulp $(BuildTask)" /> 
    <Exec Command="echo ---------------------------------------------" /> 
    </Target> 
    <Target Name="Clean"> 
    <Exec Command="gulp clean:all" /> 
    </Target> 
    <Target Name="Rebuild" DependsOnTargets="Clean;Build" /> 
    <ItemGroup> 
    <None Include="readme.md" /> 
    </ItemGroup> 
</Project> 

:

이

은 UI 프로젝트에 포함되어있는 프로젝트 파일 ( YourUI.csproj)입니다. (느릅 CSS 생성 및 웹팩 번들 포함) 우리 꿀꺽 파일에서 중요한 조각 :

<Target Name="BeforeBuild"> 
    <MSBuild 
     Projects="..\YourUI\YourUI.csproj" 
     Condition="'$(Configuration)'=='Release' OR !(Exists('$(SolutionDir)YourUI\build\Ui.js') AND Exists('$(SolutionDir)YourUI\build\css'))" 
     Targets="Build" /> 
    <Exec Command="echo Creating UI resources for $(Configuration)..." /> 
    <!-- Delete old links --> 
    <Delete Files="$(ProjectDir)Scripts\Ui.js" /> 
    <Delete Files="$(ProjectDir)Scripts\Ui.min.js" /> 
    <RemoveDir Directories="$(ProjectDir)Content\Ui" /> 
    <!----> 
    <!----> 
    <!-- DEBUG build--> 
    <!----> 
    <Exec Condition=" '$(Configuration)'=='Debug' " Command="mklink $(ProjectDir)Scripts\Ui.js $(SolutionDir)YourUI\build\Ui.js" /> 
    <Exec Condition=" '$(Configuration)'=='Debug' " Command="mklink /d $(ProjectDir)Content\Ui $(SolutionDir)YourUI\build\css" /> 
    <!----> 
    <!----> 
    <!-- RELEASE build--> 
    <!----> 
    <ItemGroup Condition=" '$(Configuration)'!='Debug' "> 
     <ElmApp Include="$(SolutionDir)YourUI\build\Ui.min.js" /> 
     <ElmStyles Include="$(SolutionDir)YourUI\build\css\*.css" /> 
    </ItemGroup> 
    <Copy Condition=" '$(Configuration)'!='Debug' " SourceFiles="@(ElmApp)" DestinationFolder="$(ProjectDir)Scripts" /> 
    <Copy Condition=" '$(Configuration)'!='Debug' " SourceFiles="@(ElmStyles)" DestinationFolder="$(ProjectDir)Content\Ui" /> 
    </Target> 
    <!-- Include the new files as content --> 
    <ItemGroup Condition=" '$(Configuration)'=='Debug' "> 
    <Content Include="Scripts\Ui.js" /> 
    <Content Include="Content\Ui\*.css" /> 
    </ItemGroup> 
    <ItemGroup Condition=" '$(Configuration)'!='Debug' "> 
    <Content Include="Scripts\Ui.min.js" /> 
    <Content Include="Content\Ui\*.css" /> 
    </ItemGroup> 

Answer 2

기술적으로 Visual Studio 2015에서 연속 통합 또는 개발의 일부일 필요는 없습니다. 편집을 위해서는 Visual Studio Code (또는 Sublime, Vim, Atom 등의 다른 편집기)를 사용하는 것이 좋습니다.

그러나 Visual Studio 2015 에코 시스템에 묶어두기를 원한다면 Task Runner integration을 사용하고 싶을 것입니다. 이미 grunt and gulp 작업 주자가 IDE에 내장되어 있습니다. 꿀꺽 마는 일을 만들고 gulp-elm을 사용하여 Elm 코드를 자동으로보고 컴파일 할 수 있습니다.

저는 개인적으로 느릅 나무 개발을위한 Webpack 팬입니다. 추가로 Visual Studio 2015 plugin for Webpack task runners을 사용하면 멋지게 묶을 수 있습니다. (경고 : 개인적으로 그 조합을 시도한 것은 아니지만 합법적 인 것으로 보입니다.)