天天看點

Visual Studio 2015初體驗——前端開發工作的問題

前言

因為背景項目開發适用的VS2015,為了跟背景開發配合,前端部門也統一從VS2013更新到了VS2015。

因為C槽空間不足要先解除安裝,這裡就不說解除安裝2013時花了多長時間,隻說安裝2015時用了将近3個小時,不過安裝的是英文版,又去下載下傳了中文語言包,一個語言包居然也高達2個多G,真不知道裡面到底有多少東西。

總之最終裝好了,開始安裝WEB開發“套件”:WEB Essentials2015.1+ReSharper10+TypeScript1.7(自帶)+JSDOC

都搞定後發現若幹問題。。。。

VS2015的前端開發問題

1、TypeScript開發沒有右側的實時編譯預覽了

我非常喜歡這個功能,可以實時看到編譯後的代碼,既可以保證編譯後的JS是我想要實作的代碼,也可以順帶學習TypeScript文法與原理。但是他沒有了,我知道這個實時預覽功能是WEB Essentials插件提供的,遂去插件的選項面闆,發現居然沒有TypeScript這個子選項了,連SASS,LESS,CoffeeScript選項都沒了,隻有CSS和JS還有HTML,幾乎跟完全報廢了一樣。

去官方網站上查,原作者的答複是:

madskristensen:

The TS preview pane has been removed from Web Essentials 2015 due to continuously running into conflicts with the TS compiler when new versions come out. The TS team are aware of it and I hope they will add the feature into the TS tooling in the future. It is possible that this feature will be included in the brand new Web Compiler extensions (https://visualstudiogallery.msdn.microsoft.com/3b329021-cd7a-4a01-86fc-714c2d05bb6c) when preview panes have been implemented.

大概意思是因為VS的bug導緻WEB Essentials2015插件移除了所有編譯器,自然也就沒有了實時預覽。

好吧,沒有預覽我還能接受,至少他還可以用,可以工作。

原文連結:https://github.com/madskristensen/WebEssentials2015/issues/53

2、SASS開發沒有右側實時CSS編譯預覽

原因同上,因為都是WEB Essentials插件提供的支援。

3、SASS,LESS無法編譯

這個我就不能忍了,無法編譯成CSS就沒法工作了,不過WEB Essentials的作者提供給了一個新插件:Web Compiler。

Web Compiler

A Visual Studio extension that compiles LESS, Sass, JSX, ES6 and CoffeeScript files.

看介紹似乎是專門為了解決VS2015的編譯問題的插件,裝好以後,發現并不能想VS2013中那樣隻要按下Ctrl+S就可以自動編譯。

需要編譯哪個SASS檔案,再手動将其添加入他的編譯檔案清單,之後才能使用Ctrl+S自動編譯。

Visual Studio 2015初體驗——前端開發工作的問題

點選“Compile File”手動将scss檔案添加到需編譯檔案清單(compilerconfig.json)并指定其檔案路徑:

[
  {
    "outputFile": "Style/StyleSheet1.css",
    "inputFile": "Style/StyleSheet1.scss"
  },
  {
    "outputFile": "Style/main.css",
    "inputFile": "Style/main.scss"
  }
]      

雖然他也提供了Compile all的功能,但事實上還是不太好用,對于新建立的SASS檔案依然不能自動包括進來,還是需要手動觸發編譯。依然沒有VS2013裡面那樣好用。

Visual Studio 2015初體驗——前端開發工作的問題

試用到這裡我已經下定決心解除安裝VS2015了,重新用回VS2013,等2015再發展一段時間,修複一些bug之後再用吧。

解除安裝VS2015時的痛苦不說了,至今還未解除安裝幹淨….

解決方案

即自己配置Grunt和Bower,來實作儲存自動編譯。

因為項目進度吃緊,技術先往後放,遂并不打算再新增額外的工作,想了解具體的可以參考stackoverflow上的讨論。

完整解決方案:

1、http://stackoverflow.com/questions/30107925/how-to-compile-sass-files-on-save-in-visual-studio-2015

2、http://www.gibedigital.com/blog/2015/may/28/compiling-sass-in-visual-studio-2015/

最後

根據博友的評論,更新一段。

本文實為一篇标題黨,發了很多牢騷,也引起了我作為開發者的思考,但同時不可否認VS2015在前端開發的努力與進步,也增加很多對前對優化的功能,真的很多。

而且從微軟近期的一系列動作而言,都有擁抱開源之态。也改變了之前的“替你做好所有事”的一站式服務思想。

非常贊同博友@kennywangjin的觀點:

請仔細閱讀vs2015的相關文檔,不要以為2013=》2015就是一個刷數字的遊戲。

VS2015的前端需要用到gulp或者grunt,号稱前端開發,這兩個不知道的話有點對不起自己的稱号。

說WIN10或者VS2015不行的,請仔細檢討下是不是自己的想法過于陳舊,還停留在以前的開發思路上。微軟在積極向開源領域靠攏,開發者是不是也應該要逐漸轉變思路了?

不要怪變化太快。窮則思變,變則通,通則久,以微軟如今的處境,想要東山再起,必須要進行大幅度的改革,這是陣痛,熬過了自然前途無限;開發者也應該有此準備。

這是一個你跑着都追不上變化的時代。

(完)

原文連結-http://www.cnblogs.com/xxcanghai/p/5032447.html

如果您認為本文對得起您所閱讀他所花的時間,歡迎點選右下角↘ 推薦。您的支援是我繼續寫作最大的動力,謝謝

作者:小小滄海

出處:http://www.cnblogs.com/xxcanghai/

本文位址:http://www.cnblogs.com/xxcanghai/

本文版權歸作者和部落格園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接配接,否則保留追究法律責任的權利。

繼續閱讀