預編譯插件
❶ HBuilder如何配置jsx預編譯器
前去官網下載HBuilder
解壓、創建快捷方式
安裝插件
配置外部伺服器
5
瀏覽器運行URL,一定要是apache項目的主目錄
❷ Webpack,Browserify和Gulp三者之間到底是怎樣的關系
怎麼解釋呢?因為 Gulp 和 browserify / webpack 不是一回事
Gulp應該和Grunt比較,他們的區別我就不說了,說說用處吧。Gulp / Grunt 是一種工具,能夠優化前端工作流程。比如自動刷新頁面、combo、壓縮css、js、編譯less等等。簡單來說,就是使用Gulp/Grunt,然後配置你需要的插件,就可以把以前需要手工做的事情讓它幫你做了。
說到 browserify / webpack ,那還要說到 seajs / requirejs 。這四個都是JS模塊化的方案。其中seajs / require 是一種類型,browserify / webpack 是另一種類型。
seajs / require : 是一種在線"編譯" 模塊的方案,相當於在頁面上載入一個 CMD/AMD 解釋器。這樣瀏覽器就認識了 define、exports、mole 這些東西。也就實現了模塊化。
browserify / webpack : 是一個預編譯模塊的方案,相比於上面 ,這個方案更加智能。沒用過browserify,這里以webpack為例。首先,它是預編譯的,不需要在瀏覽器中載入解釋器。另外,你在本地直接寫JS,不管是 AMD / CMD / ES6 風格的模塊化,它都能認識,並且編譯成瀏覽器認識的JS。
這樣就知道,Gulp是一個工具,而webpack等等是模塊化方案。Gulp也可以配置seajs、requirejs甚至webpack的插件。
不知道這樣夠清楚了么
❸ 前端工程師都有用哪些比較靠譜的小工具
1.node.js + npm, 這個是前端工具的一個平台,沒有他們就沒有以下的工具,建立開發環境,下載開發工具,運行開發工具的利器
2. bower, 庫依賴管理器,類似於npm,但針對瀏覽器JavaScript的依賴管理,減少尋找庫,下載庫和升級庫的煩惱
3.grunt,流程自動化管理工具,將你非編程的開發步驟減到最小,grunt watch+liveReload或者grunt connect,可以使得免除你F5無盡地獄,發布和開發各種無壓力。以下大部分開發工具,都有grunt的相對應的插件,也就是說他們都能利用grunt進行自動化運行
4.liveReload, 本來是一套解決方案,自從grunt watch出現後,我們只要安裝他的chrome或者firefox插件就行了。它的目的很簡單,只要發現目標文件中有任何一個文件有改動,立刻通知瀏覽器刷新頁面,這樣就免除了手動按F5。如果和grunt watch合用,就是只要發現任何文件有改動,立刻運行自動化流程中的所有任務,然後通知瀏覽器刷新。
5. 本人用less比較多,因為基本無縫兼容歷史遺留系統中的css,(而Sass語法比較特殊,還沒有專門用過,應該開發新系統的css比較好),一套css預編譯語言,可以把less語法轉成css語法,lessc是less語言編譯器,配合grunt less,編寫大型css文檔毫無壓力。
6.Phantomjs,沒有界面的瀏覽器,用js腳本控制其操作網頁。測試,抓圖,網頁流程自動化利器。配合casperjs的語法簡化功能真強庫後,控制Phantomjs就更加容易了
7. grunt PhotoBox, 利用phantomjs抓圖功能和ImageMagick圖片比較功肢派能,在利用live-reload即時刷新功能,可以讓你開發css的時候,快速對n多個頁面進行觀察,看其前後變化。不過缺點也比較明顯,就是速度慢。但比起手動對比來看,還是非常快的。值得css開發時擁有
8. phantomCSS,這個和grunt photobox類似,都用於css開發的,差別是photobox是全局觀察差別,而這個是單元組件觀察差別,它方便你就抓頁面中某一塊元素然後進行前後比較,更加註重細節上的差異,這個比較合適組件開發時候使用。
9. jshint,幫助你快速定位JavaScript的語法錯誤和潛在的跨瀏覽器兼容性問題。在部署你JS前,用jshint檢查一下是沒錯的 。
10.UglifyJS,壓縮JavaScript代碼,使歷差賀你的JS代碼可以更加快速的載入。有grunt的插件
11. browserify允許你在瀏覽器裡面使用CMD標准模塊,但本人認為它的另外一個優勢是合並代碼,開發時候可以把代碼模塊化,分成很多很多小文件,然後有調理的放到相對應文件夾下,然後最後合成單一文件。本人曾經利用browserify開發greasemonkey代碼,大大簡化了greasemonkey的開發難度和增強了greasemonkey代碼的質量。browserify有grunt插件,這樣又減少的開發步驟。
12. Karma, google開發的一個單元測試運行器,這個自己本身不是一個單元測試框架,而是配合測試單元框架的一個工具。由於前端瀏覽器眾多,就算你有live-reload這樣自動化工具,但是還是要手動打開各種瀏覽器,手動把你的單元測試在各個瀏覽器都運行一遍。這個工具目的是目的就是讓電腦能自動化打開各種瀏覽器,然後把單元測試在個個瀏覽器中自動運行一遍,讓這個步驟也能自動化了。
13.clean-css (grunt cssmin), 我用的是grunt cssmin,但是grunt cssmin實際上背後使用的是clean-css工具,這個工具就是用來壓縮精簡css的,讓css文件大小更小。
還有慶塌些有名氣的工具,應該不錯,但是自己沒有用過,所以也就沒有提,但可以參考一下
yeoman 項目初始化工具
buddy.js 魔術數字檢查器
Image minifier.壓縮圖片工具
html-minifier html壓縮
jade html預編譯語言
jsdox JS代碼注釋文檔生成器
jscs JS代碼風格檢查器
❹ vs2022為什麼會在D盤根目錄下生成windows kits文件
你安裝的時候選擇了windows的SKD,就會有這個文件夾,但是目錄是可以修改的
❺ 前端工程師都有用哪些比較靠譜的小工具
作為曾經的web前端工程師,來答一發。
jsonView Chrome插件
sessionBox是一塊可以讓你隨意切換你的session的Chrome插件~用戶還可以給不同的session設置各種顏色,方便地標識session;SessionBox只對那些把網頁的狀態保存到session中的才有效果。順便提供一下SessionBox的官網:https://sessionbox.io ;對於起那段同學來說,切換Sesssion幾乎成了必不可少的一項工作,如果你使用了sessionbox,將會大大的減輕你的工作量,同時這個插件對於後端開發的RD同學也將是大大的幫助。
目前介紹了以上四款工具,建議題主可以嘗試一下,都是非常不錯的工具,雖然我現在不在是前端,但是對於除了webstorm之外的三款工具我都是經常會使用的;至於我為什麼不使用webstorm是有原因的,因為我現在已經是作為一枚後端RD的存在,目前在公司開發機上只能用vim開發~~