react開發(fā)環(huán)境和相關工具介紹

我們已經(jīng)完成了React開發(fā)技術的學習，這一節(jié)，我們從全棧開發(fā)工程師的角度看看，如何構建起從到前端的一整個開發(fā)工具鏈。在接下來的內(nèi)容里，我將向大家介紹幾個強大的網(wǎng)頁開發(fā)工第一個是用于開發(fā)服務的Node.jsNodeJs是當下最火的網(wǎng)頁應用開發(fā)技術，javascript長久以來，一直作為語言運行在瀏覽?里，NodeJS技術能夠?qū)s沖瀏覽?中剝離出來，把js轉(zhuǎn)換成類似于java,c++一叫npm,使用npm我們可以方便的完成所有有關網(wǎng)頁開發(fā)模塊的安裝。第二個我們需要討論的是模塊Babl,我們前面數(shù)次提到過這個模塊在我們開發(fā)中的重要作用。它本身是一個小型編譯?，負責把JSX代碼塊編譯成瀏覽?能識別的js代碼。一會我們會看看，如何把這個模塊通過nm，整合到我們的開發(fā)流程中。第三個要介紹的工具叫wck,它的作用是將各種模塊進行打包，大家記得我們在每次項目開發(fā)的前頭，都要通過<scits="...">這種方式把Ract框架代碼整合到我們的源代碼中。每當瀏覽?解讀到這種，它會向服務?發(fā)出請求，向服務?相應的代碼文件。從服務?數(shù)據(jù)是一個緩慢的過程，特別是當網(wǎng)絡條件不好的時候。同時在我們以前的代碼中，我們往往在開頭放置了三個scriptsc，這樣的話瀏覽?就得連續(xù)三次向服務?文件，使用wc,我們可以把整個應用需要下 提高用戶體驗接下來，我們看看在商業(yè)生產(chǎn)條件下，我們的開發(fā)環(huán)境如何配置。面課程中，為了方便，我們把所有的文件都集中到一個文件夾下，但是在專業(yè)生產(chǎn)中，這么做是不行的，現(xiàn)在我們看看，如何做才是科學合理的環(huán)境配置。第一步，初步配置項目開發(fā) 結構。假設我們現(xiàn)在要開發(fā)的網(wǎng)頁應名字叫 那么我們現(xiàn)在服務?硬盤上建立一個文件夾 ，也就是在MyReactApp index.html該文件將是我們應用的首頁。然后在該文件中完成以下示例代<title>MyReact<div<script大家注意看，我們現(xiàn)在的代碼跟以前有所不同，在開頭，我們不再直接加載三個Rect框架源碼文件，轉(zhuǎn)而在后面加載一個叫myCodejs的文件，當前這個文件還不存在，后面我們會介紹如何創(chuàng)建這個文件，我們會使用工具把所有需要的框架代碼打包在myCodejs中。并且myCodejs會創(chuàng)建在otput 下。接下來我們需要安裝NodeJS組件，（打開網(wǎng)頁），在NodJS的可以不同平臺的安裝包，大家之后，直接點擊安裝包就可以安裝了。安裝完nodejs后，運行命令：node-v看看安裝是否正常，如果正常的接著通過命令行控制臺進入我們項目的根也就是MyReactApp。然后使用命令npminit初始化nodejs的運行環(huán)境。運行命令后在彈出的信息中，需要我們輸入項目的名字，他要求我們輸入的項目名字不能含有寫字母，因此我們把項目名MyReactApp中的大寫字母改成小寫就可以了。 下多了一個文件叫package.json,該文件的內(nèi)容已令：npminstallreactreact-dom--save上面命令運行后，nodejs會自動從相關服務?上對應模塊到我們本地上。此時在本 會多出一個文件夾叫node_modules,所有相關塊后，都會在這個文件夾下接下來，我們用React來開發(fā)相關組件。進入dev 個文件叫index.jsx,然后編寫以下代碼：importReactfromimportReactDOMfrom"react-varoWorld=React.createClass({render:function(){return o,}<oWorld<oWorld<oWorld這里有開頭的兩行代碼值得我們注意，我們使用imprt關鍵字把Ract關模塊到我們的代碼中，NodeJS解析到這兩句時會從node_modle中把相關模塊給加載進來。我們在index.html中，了一個在output 下的文件叫myCodejs,前該文件還不存在，因此我們需要創(chuàng)建這個文件。首先我們需要使用命令在本地安裝wck組件：npminstallwck--上面命令運行后，nodjs會自動wck組件，由于這個組件比較大，所以我們可能需要等半天。完后，wck組件會到nde_modle 下，同時在項目的根 下我們手動生成一個文件叫wckcfi.js,為了指示NdeJS幫我們生成myCodejs文件，我們需要在fi.js下添加如下代碼：varwck=require("wvarpath=varDEV=path.resolve(dirname,varOUTPUT=path.resolve(dirname,varconfig=entry:DEV+"/index.jsx",output:{path:OUTPUT,filename:"myCode.js"}module.exports=我們看看這段代碼的含義，開頭兩行用于加載兩個模塊，然后通過pth模塊的slve命令，獲取 dev和otput的全路徑名稱，其中 iraeNdeJS模塊的全局變量，它表示項目所在的根 ，我們項目的根 就是MyReactApp 的全路徑。接著我們通過DEV+"/index.jsx"獲得index.jsx文件的全路徑，然后通過output對象告訴NodeJS在ouput下去生成我們想要的myCode.js文接下來我們需要安abl組件，我們知道該組件的作用是把JSX代碼轉(zhuǎn)義成瀏覽?能夠識別執(zhí)行的js代碼，在控制臺上輸入以下命令：pminstllbabl-loaderbal-est-es2015abl-peset-eactsve以及命令：npminstallbabel-corebabel-loader--save-{"name":"myreactapp","version":"1.0.0","description":"main":"index.js","scripts":{"test":"echo\"Error:notestspecified\"&&exit"author":"license":"ISC","dependencies":"babel-loader":"babel-preset-es2015":"babel-preset-react":"react":"react-dom":"wck":"babel":"presets":["es2015",}}接著打開w 在末尾添加如下代碼varconfig=entry:DEV+"/index.jsx",output:{path:OUTPUT,filename:"myCode.js"module:loaders:[{include:} wck把DEV路徑下的index.jsx用babel編譯，然后再把結果添加到最后運行命令，讓nodejs生成myCode.js文件./noude_modules/.bin/w上面命令運行后，在output下會生成一個大小將近700多k的文件。到此，開發(fā)環(huán)境配置完畢，在項目的根下運行起http服務?：pyth