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