摘要:我對很有興趣,但是我發(fā)現(xiàn)想寫不容易。于是我馬上動手,有了這個,本意是自己用,現(xiàn)在也推薦給大家,也希望大家積極指出不足,提出建議,當然如果有更好的方案,也可以推薦給我。特點使用了,這樣可以用來書寫代碼。
我對 react 很有興趣,但是我發(fā)現(xiàn)想寫 react 不容易。
我需要在開始寫代碼之前做很多準備工作,我需要編譯jsx文件,引入react等等,而最新的react示例,有鼓勵ES6來書寫代碼,可以用上ES6的一些閃亮的新特性,所以與其每次寫代碼配置工具花很多時間,不如寫成一個github repo,每次只需要 clone下來,會方便很多。
于是我馬上動手,有了這個react-babel-gulp-boilerplate,本意是自己用,現(xiàn)在也推薦給大家,也希望大家積極指出不足,提出建議,當然如果有更好的方案,也可以推薦給我。
特點使用了Babel,這樣可以用ES6來書寫react代碼。
使用了Gulp和browserify,可以使用CommonJS規(guī)范來寫代碼,當然更推薦使用ES6 module。
使用了watchify,在gulp watch之后瀏覽器會自動打開網(wǎng)頁,同時在修改代碼之后會自動刷新代碼,方便開發(fā)和調(diào)試。
如何使用首先,你需要安裝node和npm(我相信你一定已經(jīng)安裝了),然后你可以按照下面的命令來clone這個repo,同時安裝依賴:
$ git clone git@github.com:mrdream24/react-babel-gulp-boilerplate.git$ cd $ npm install
然后你可以“啟動”它,來進行開發(fā)和調(diào)試:
$ gulp watch
這時候會自動打開瀏覽器新窗口http://localhost:3000,然后你會看到Hello World。
最后如果你想打包代碼,可以:
$ gulp build最后
希望大家多多支持,多多指出不足,提出建議。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/78654.html
摘要:那時候所配置的任務(wù)監(jiān)聽匹配文件的變化自動刷新瀏覽器自動編譯自動補全前綴多雪碧圖合并拼圖等等基于編譯圖片的任務(wù),已經(jīng)是完全滿足我們的需求了。直至到后來在雪碧圖的合并,多倍圖的輸出上,在上苦苦找尋不了比較完美的解決方案等等。 折騰 從 2015 到現(xiàn)在,短短的三年內(nèi),幾乎每年折騰一下工作流的 更新?lián)Q代 。從最早開始使用 Grunt 到 Gulp 再到 Webpack,再到 Rollup,...
摘要:另外一方面,即使不是想搭建自己的工作流,而是使用現(xiàn)成的腳手架,大家都會用。顯然,徹底掌握如何從零開始搭建一個能夠貼近實際項目的工作流,是一個想要滿足工作最基本要求的人必備的技能。 很多人想搭建一套屬于自己的前端工作流,最開始的時候我們的工作流萌芽是從寫一個項目的時候,拷貝以前寫過的一個項目文件夾改完直接使用開始的,后來使用了grunt和gulp,再到webpack,每一個前端人員想掌握...
摘要:所以,打包工具就出現(xiàn)了,它可以幫助做這些繁瑣的工作。打包工具介紹僅介紹款主流的打包工具,,,,以發(fā)布時間為順序。它定位是模塊打包器,而屬于構(gòu)建工具。而且在其他的打包工具在處理非網(wǎng)頁文件比如等基本還是需要借助它來實現(xiàn)。 本文當時寫在本地,發(fā)現(xiàn)換電腦很不是方便,在這里記錄下。 前端的打包工具 打包工具可以更好的管理html,css,javascript,使用可以錦上添花,不使用也沒關(guān)系...
摘要:承接前一篇做一個合格的前端,自動化構(gòu)建工具入門教程故而整理了如下插件資源大全。接下來我會逐一開源觀點網(wǎng)開發(fā)過程中的前后端技術(shù),如全文索引自定義富文本編輯器圖片上傳壓縮水印等等。 承接前一篇《做一個合格的前端,gulp自動化構(gòu)建工具入門教程》故而整理了如下gulp插件資源大全。**【我的新作觀點網(wǎng):http://www.guandn.com (觀點網(wǎng)是一個獵獲新奇、收獲知識、重在獨立思考...
閱讀 1810·2021-11-24 09:39
閱讀 2294·2021-09-30 09:47
閱讀 4154·2021-09-22 15:57
閱讀 1880·2019-08-29 18:36
閱讀 3583·2019-08-29 12:21
閱讀 596·2019-08-29 12:17
閱讀 1271·2019-08-29 11:25
閱讀 730·2019-08-28 18:26