<progress id="7nnbd"><big id="7nnbd"><em id="7nnbd"></em></big></progress>

<big id="7nnbd"><meter id="7nnbd"></meter></big>
<progress id="7nnbd"><meter id="7nnbd"><cite id="7nnbd"></cite></meter></progress><meter id="7nnbd"></meter>

      <address id="7nnbd"></address>

          為了賬號安全,請及時綁定郵箱和手機立即綁定

          新手也能輕松上手React、ES6、Webpack

          2016.07.17 16:54 9428瀏覽

          原文標題:對于React、ES6、Webpack的簡單理解

          大水淹了江城,被迫進行了今年第二次封閉式開發;遠離公司,不勝唏噓,幻化成大雨,遠方的人啊,愿你能出現在我夢里;靠!碼農哪有時間做夢啊,倒床上就著了,眼睛一睜,又要繼續碼了。。。

          做前端一年多了,睡前反省反省后發現:工作以html、css、js、jquery為主,伴有少量(HTML5、CSS3);業余入門級Angular、React、ES6、Nodejs、自動化;那一晚,我又失眠了,為嘛牛逼的,我都只是入門級;想想我那小站點又是一個多月沒更新了,技術面又窄,未來在哪里?寶寶心里苦啊;痛定思痛后,只有業余扣點時間用React和ES6改寫小站的后臺了,是的,博客戰場模式又要開啟了!

          React:僅僅是UI、虛擬DOM、數據流;無疑是前端組件式開發的利器,太強大了,大家都知道,我什么都沒說;我只知道我喜歡React就一個原因:我喜歡這種優雅的代碼風格;為什么這么多人喜歡楊鈺瑩,因為總有人詩一般的活著!

          去年試水React的時候,感覺還挺容易上手,這次一玩,才發現,不會點ES6不行啊,不會點Nodejs玩不起來啊!之前用Grunt、Gulp打包css、js,如今webpack霸屏了,什么都干,你懂的!話說用了webpack后我就真的相信webpack是最好的了;隨便兩行代碼,webpack不uglify后就是700K,如果你像我一樣傻,每次重啟webpack,打包一次就相當于進入一次廣告時間,你可以上趟廁所,整點吃的,喝的,涼快涼快;好吧,watch就不用每次等廣告時間了;可能這些只是屬于新手的抓狂吧;

          如果你也是新手,如果你也為React、Angular、Nodejs這些牛逼的技術抓狂過,其實沒關系,想想那些奇葩 需求,有時恨不得讓你改框架源碼的時候;再想想,其實技術本身并不難。。。

          1、webpack小覷

          webpack大而全,和靜態資源相關的所有它都能干涉,當然,還能啟動server;webpack主要以loaders和plugins處理各種靜態資源;

          loaders:

          在React里會用到JSX、ES6、js,我統一將文件后綴使用.js,便于babel的配置:

          npm install --save babel-loader
          //
          {
             test: /\.js?$/,
             exclude: /node_modules/,
             loader: 'babel',
             query: {
                presets: ['es2015', 'react']
             }
          }

          CSS、scss、iconfront字體文件:

          npm install --save style-loader css-loader sass-loader url-loader file-loader
          //
          {
             test:/\.css$/,
             loader: ExtractTextPlugin.extract("style-loader", "css-loader")
          },{
             test: /\.scss$/,
             loader: ExtractTextPlugin.extract("style-loader", "css!sass")
          },
          {test: /\.(woffwoff2)/,   loader: "url?limit=10000&minetype=application/font-woff&name=./[name].[ext]"},
          {test: /\.(ttfeotsvg)/,    loader: "file?name=./[name].[ext]"},
          {test: /\.otf/,    loader: "file?name=./[name].[ext]&minetype=application/font-otf"}

          想將css獨立出來的話:

          npm install --save extract-text-webpack-plugin
          //
          var plugins=[];
          var ExtractTextPlugin = require('extract-text-webpack-plugin');
          plugins.push(new ExtractTextPlugin('./app-[hash].css?[hash]'));

          處理圖片:

          npm install --save url-loader
          //
          {
             test:/\.(pngjpggif)$/,
             loader:'url-loader?limit=10&name=[name].[ext]'
          }

          多個loader通過!區分,同時接受查詢參數以?連接,類似于用!區分多個url,比如:loader1?name=[name]-[hash].[ext]&limit=10000!loader2?xxx=xx;可以使用require語句加載loader,也可以通過配置中的正則表達式來綁定loader;

          plugins:

          我首先看重了html-webpack-plugin和assets-webpack-plugin還有上面的extract-text-webpack-plugin,因為牽扯到我挺感興趣的一塊:前后端的分離及自動化;

          html-webpack-plugin會由entry的配置將入口文件所屬的html文件作為模板,重新生成一個html文件,其中的靜態資源都已根據配置打包好,貌似很不錯哦!不過有兩個問題,還沒解決:(1)、如果靜態資源和主站是各自獨立的站點,而將html作為靜態資源對待的話,主站有路由相關配置的話,好像有點扯不開了;要是只在本地開發這樣配置,各自獨立上線的話,跨域時本地不便于測試;(2)、頁面上的圖片路徑沒做處理,可能要求有點多了。。。(3)、將html作為模板對待了,那么如何include其他模板;由于這三個原因,暫時不敢說html-webpack-plugin很適用,特別是第一點;繼續探索中。

          var plugins=[];
          var HtmlWebpackPlugin = require('html-webpack-plugin');
          
          plugins.push(new HtmlWebpackPlugin({
              template: './files/es6.html',
              filename: 'es6.html',
              title:'hhhhhh',
              inject: true,
              chunks:['entry1']//可以new多個html由entry區分
          }));

          使用webpack后,對文件的版本hash將變得非常簡單:出口文件的name加上[hash]即可;可能現在來說,清除靜態資源緩存最好的做法就是文件名hash了,注意不是加個后綴可以的;對于流量非常高的站點,即使等到三更半夜上線,如果僅僅加個后綴清緩存的話,也難免會出事,因為頁面和靜態資源同步時會有時間差,而在這個間隙有用戶訪問的話,頁面出錯的可能性就很大了;而文件名hash的方式就能很好的避免這個問題,由于每次改動后生成的文件名都不一樣,上線并不是覆蓋之前的版本,只是多了一個版本的文件,再上頁面文件即使同步有時間差,要么訪問舊版頁面和舊版資源,要么訪問新版頁面新版資源,就不存在沖突了,這樣服務器可以大膽的對靜態資源開啟永久強緩存,并且有利于回滾;至于靜態資源由此產生的積壓,交給運維處理吧!

          使用html-webpack-plugin能很好的配合文件名hash,基于上面的小問題。。。

          現在生成文件名hash很簡單了,怎么對應頁面一起改呢?

          (1)、自己動手慢慢改去吧

          (2)、頁面由前端輸出:生成map.json,根據這個配置讀文件對應改資源引用的路徑

          (3)、頁面由后端輸出:生成map.json,后端讀這個配置動態加載頁面引用的資源路徑

          總之,就是要生成map.json,這里就簡化了很多,因為不用管文件依賴了,webpack已將依賴文件打包到主文件里了;接下來就是讀這個配置文件了,我也不知道,再探!。。。

          由assets-webpack-plugin生成map.json:

          var AssetsPlugin = require('assets-webpack-plugin');
          plugins.push(new AssetsPlugin({
              filename: 'map.json',
              processOutput: function (assets) {
                  return JSON.stringify(assets);
              }
          }));

          map.json大概這樣:

          {"entry1":{"js":"app-ed03f4fe.js","css":"app-6f7f3cda3d230d8fa897.css"}}

          2、React、ES6小覷

          配置好了webpack之后,開始React+ES6就不是什么難事了,除了以后會引進的Redux、Flux、Reflux會不好理解外,接下來可以一邊React一邊ES6了,慢慢來,兩不誤!說真的,修改state的時候太多了,所以熟悉React后引入Redux是很有必要的;

          React里使用JSX語法,不用管了,babel編譯;React里使用ES6,盡管用,babel幫你打到ES5;上面不是已配好webpack嗎?babel-loader就是幫你干這個的;不過啟動webpack時記得watch哦,不然得像我一樣老是等廣告時間;

          不說Hello,world!

          無論Angular還是React都提供了一種方式來實現組件化的開發,來擴展HTML標簽的不足,這些組件更像是一種描述性的語言,對,可以非常語義化,比如:要一個3行5列的列表,<TableList rows=3 cols=5 data={TableDatas}/>;這樣一個列表就出來了,是不是很爽!React僅僅是UI,我認為它是為組件化而生的,而且跨平臺,跨終端;

          我所想象的組件化是html標簽已封裝,css、js各自獨立;當然要把對應組件的css也一起封裝也是完全可以的,為什么要把css也獨立呢?我們會用grunt-sass-contrib、gulp-sass、sass-loader,而這些工具已提供了對sass模塊化很好的解決方法,比如sass的依賴有loadPath;而我們要做的就是像模塊化js一樣模塊化css,然后在js里require或import該組件所需的css模塊即可,因為我要的是用到多少css就加載多少css,最少化的重復,而如果一個組件對應一套css,就很難避免重用了,最后通過上述工具直接打包的css就是你頁面所需的了;

          我看到了React可以這么做,封裝html、擴展標簽,封裝成組件,組件依賴css模塊和js模塊;比如登錄界面:

          import {React} from 'react';
          import {ReactDOM} from 'react-dom';
          
          import '../css/fonticons.css';
          import '../css/components/login.scss';
          
          import Login from './views/Login';
          
          ReactDOM.render(<Login url={postUrl} />,document.getElementById('views'));

          components是Web的未來,而現在是React!components一直吸引著無數前端的探索,以上只是個人初步理解,拋磚引玉,還在探索中。話說部分瀏覽器已實現了Web components,或許這只是顆啟明星,指引著我們走向更美好的未來!

          個人博客:花滿樓 famanoder.com

          點擊查看更多內容

          本文原創發布于慕課網 ,轉載請注明出處,謝謝合作

          56人點贊

          若覺得本文不錯,就分享一下吧!

          評論

          相關文章推薦

          正在加載中
          意見反饋 邀請有獎 幫助中心 APP下載
          官方微信

          舉報

          0/150
          提交
          取消
          五福彩票 怀化 | 南京 | 漯河 | 大连 | 楚雄 | 湖北武汉 | 无锡 | 河池 | 蓬莱 | 巢湖 | 改则 | 西藏拉萨 | 金昌 | 乳山 | 枣阳 | 南阳 | 新余 | 乌兰察布 | 琼中 | 哈密 | 张家口 | 如东 | 汝州 | 梅州 | 永州 | 三门峡 | 江苏苏州 | 百色 | 衡阳 | 衡阳 | 克拉玛依 | 烟台 | 鹤岗 | 马鞍山 | 柳州 | 淮北 | 阿拉尔 | 三门峡 | 黄南 | 东营 | 凉山 | 三沙 | 巴彦淖尔市 | 南通 | 东营 | 漯河 | 五指山 | 玉溪 | 扬中 | 巴音郭楞 | 延安 | 吉林长春 | 兴安盟 | 海南 | 青海西宁 | 临沂 | 晋城 | 仙桃 | 梧州 | 文山 | 沧州 | 江西南昌 | 三河 | 桐乡 | 云南昆明 | 玉环 | 荆门 | 台湾台湾 | 涿州 | 雄安新区 | 曲靖 | 铜川 | 梧州 | 襄阳 | 玉环 | 黄石 | 燕郊 | 博罗 | 天水 | 乌兰察布 | 金华 | 长兴 | 偃师 | 新泰 | 长葛 | 文山 | 无锡 | 平潭 | 深圳 | 马鞍山 | 株洲 | 丽江 | 图木舒克 | 昌吉 | 桐乡 | 厦门 | 河北石家庄 | 包头 | 六盘水 | 湖南长沙 | 萍乡 | 顺德 | 章丘 | 塔城 | 丽水 | 哈密 | 嘉善 | 三河 | 温州 | 那曲 | 防城港 | 阜阳 | 岳阳 |