搭建react項目的環境

標籤：

簡    註冊 登入 添加關注作者 小黃人大俠 2016.03.25 17:27*寫了3090字，被7人關注，獲得了5個喜歡搭建Amazeui+react+webpack+webstorm開發環境字數2549 閱讀3292 評論25 喜歡5來段廣告

你有沒有遇見過垂直置中的問題？有沒有聽說過flex彈性布局？沒聽過的趕緊點瞭解Flex布局，看看flex布局是有多麼強大！！！還在發愁flexbox布局不相容最新的瀏覽器？點擊相容IE9+、UCBroswer的FlexLayout，擷取相容性的flexlayout react組件。

源起

最近在學習Amazeui-react的開發，發現react著實是一個好東西，但是蛋疼的是webpack這個東西好難配置，稍不注意就會導致自動編譯失敗，會出現一堆的問題，下面就請跟我一起從零開始學習React+webpack配置，並且如何在webstorm中很好的運用它們。

準備

1、下載webstorm11和nodejs。
下載太慢？直接百度雲打包分享吧~~windows mac osx

開始

由於我的電腦的MacBook不是windows，因此可能安裝和操作過程會有略微差異，但是差異不大，下面操作基本通用，不通用的我會指明。或者下面留言即可。

1. 首先，確定你已經瞭解了react是幹什麼的，對react還不瞭解的請移步這裡：react快速入門，我大體總結下吧：你就直接把react理解成能夠用js實現web前端的組件化開發的一個架構就好了，它通過虛擬DOM來簡化DOM操作提升效能，同時更好的實現模組化封裝。再深了也沒必要說了。
2. 其次，你還得知道webpack是幹什麼的，對webpack不瞭解的請移步這裡：webpack官網。這個網站我沒有發現偏官方的中文網站，但是CSDN上應該有很多相關的教程。webpack是一個構建工具，能夠把所有的靜態資源進行編譯打包，比如.js、.css、.png、.less等等吧，反正只要是靜態，不是什麼php、jsp之類的動態網站檔案都能打包。通過它統一管理資源和模組。
3. 再次，你還得知道點nodejs的知識，這個網站nodejs中文教程會告訴你nodejs幹什麼用，都有哪些api。nodejs是一個在伺服器端的高效能javascript架構，能夠快速處理高並發的請求。它主要用的就是回調原理，通過它提供的api可以實現一些web請求處理。其中，nodejs包含了一個npm，全稱是node package manager，說白了就是node項目的包管理器，通過npm命令，我們可以使用成千上萬的javascript架構。
4. 最後，就是你得會用webstorm了。這個被稱為javascript開發神器IDE，能夠大大提升你開發web前端的效率。
   綜上，我覺得能進入這篇部落格的人想必肯定早就知道以上幾個工具是幹什麼用的了，否則還進來幹嗎？串門啊？

入門

1. 安裝完畢上述幾個工具之後，請開啟你的命令列工具：windows 按下Windows符號鍵+R，輸入cmd，會彈出命令列工具；mac直接在Launchpad中尋找終端即可，Linux跟mac沒啥區別，自己找終端去，在下面我們姑且統一稱之為命令列。
2. 首先在命令列中輸入：npm -v ，看看是否有版本號碼出現。如果出現了，證明你的nodejs安裝成功了，不需要配置環境變數。如果沒出現，那麼你還得把環境變數配置一下。不過nodejs預設是給你配置好環境變數的。
3. 配置npm的Proxy 位址：（由於偉大的牆的原因，會導致下載包很慢很慢~~~）

   npm config set registry https://registry.npm.taobao.org

4. 下面進入正軌了啊！！！提神！注意！看這，看這~~
5. 啟動webstorm，初次使用的話會讓你匯入以前的配置。如果是以前有設定檔就匯入，沒有就選擇初次使用那一項。然後選擇，create new project，建立一個新的工程。工程名就叫做：react_webpack_test吧。
6. 點擊OK，進入介面。然後開啟webstorm的喜好設定設定（windows是File-settings），在Languages & Frameworks的JavaScript一欄選擇JSX Harmony，點擊OK。
7. 重新開啟命令列，依次輸入

   sudo npm install webpack webpack-dev-server babel  -gsudo npm install react react-dom babel-loader less-loader css-loader style-loader url-loader file-loader babel-preset-es2015 babel-preset-react --save-dev

   安裝結果會顯示一些WARN，無視！但是千萬別有Error。
8. 第一條命令是全域安裝，模組會安裝在/usr/local/,注意全域安裝在mac/linux系統需要sudo然後輸入密碼，而windows不需要sudo哦~~第二條會安裝在~/node_modules/下面。

   參數解釋：
   -g：允許包全域使用
   --save-dev:將依賴資訊寫入package.json的devdependencies。
   安裝的每個組件解釋：
   babel：能將es6文法解析成es5（什麼是es？？ECMAScript*6*入門自己看去，js是它的子集，說白了就是最新的javascript文法），以前是使用jsx-loader來解析著，現在直接用babel替代就行了。
   babel-preset-es2015和babel-preset-react：讓babel支援es2015文法和jsx文法的兩個預設值。
   webpack：這個還用說嗎？
   react-dom：依賴於react，現在都是通過ReactDOM.render()方法來渲染而不是React.render(),facebook官方已經說了。
   webpack-dev-server：webpack程式開發伺服器，協助開發人員即時監控webpack項目的檔案更改並反映到瀏覽器上。這樣你就能即時地進行預覽啦~
   babel-loader css-loader babel-loader style-loader url-loader file-loader：幾種webpack需要用到的載入器，方便解析css、es6/jsx、和其他靜態檔案。
   小提示：
   全域安裝支援直接在命令列中啟用安裝包的命令，例如：你安裝了webpack，那麼在命令列輸入webpack就會出現相應執行，但是非全域不支援使用這個命令的哦。

9. 接下來，再開啟webstorm（最好這兩個工具你都別關~）。在剛才那個react_webpack_test的工程中建立一個檔案，檔案名稱為webpack.config.js，然後在裡邊寫上下面的代碼：

   var webpack=require(‘webpack‘);var commonsPlugin=new webpack.optimize.CommonsChunkPlugin(‘common.js‘);module.exports={entry:{index:‘./src/js/entry.js‘},output:{    path:‘dist‘,    filename:‘bundle.js‘},module:{    loaders:[        {            test:/\.css$/,            loader:‘style-loader!css-loader‘        },        {            test:/\.jsx?$/,            loader:‘babel‘,            exclude: /node_modules/,            query:{                presets:[‘es2015‘,‘react‘]            }        },        {            test:/\.(png|jpg)$/,            loader:‘url-loader?limit=8192‘        },        {            test:/\.less$/,            loader:‘style-loader!css-loader!less-loader‘        },        {            test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,            loader: "url-loader?limit=10000&mimetype=application/font-woff"        },        {            test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,            loader: "file-loader"        }    ],    plugins:[        commonsPlugin    ]},resolve:{    root:‘‘,    extensions:[‘‘,‘.js‘,‘.json‘,‘.less‘],    alias:{        AppStore:‘js/stores/AppStores.js‘    }}}

   然後在當前工程目錄建立一個src檔案夾，在src裡面建立一個js檔案夾，在js檔案夾中建立一個entry.js檔案，檔案內容如下：

   var React=require(‘react‘);var ReactDOM=require(‘react-dom‘);ReactDOM.render(<div>Hello world!</div>, document.getElementById("test"));

   接下來再在當前工程目錄中建立一個dist檔案夾，dist檔案夾中建立一個index.html檔案。內容如下：

   <html><meta charset="utf-8"><title>React webpack test</title></head><body><div id="test"></div></div><script type="text/javascript" src="./bundle.js" charset="utf-8"></script></body></html>

   最後一步，最後一步了哦~~加入package.json檔案，使之成為一個可以用npm命令執行的工程。

   {"name": "react_webpack_test","version": "1.0.0","description": "just webpack and react hello world project!","scripts": {"build": "webpack --progress --profile --colors","watch": "webpack-dev-server --port 63340 --content-base ./dist/","test": "echo \"Error: no test specified\" && exit 1"}}

   其中最重要的是script標籤。
   接下來我們開啟webstorm的Terminal功能（在IDE底部）,在裡面輸入

   npm run build

   然後，在你的Terminal裡面會顯示如下的東東

   > [email protected]1.0.0 build /Users/你的工程所在目錄/react_webpack_test> webpack \--progress \--profile \--color  2m0ms op1ms optimiz12ms emitHash: 292766b53fb3969afd55Version: webpack 1.12.14Time: 5109msAsset    Size  Chunks             Chunk Namesbundle.js  676 kB       0  [emitted]  index\+ 159 hidden modules

   如果裡面出現了紅色的Error那麼就說明你的工程配置還有一些問題，如果OK的話，開啟瀏覽器，在裡面運行你的dist/index.html檔案，看看是否有：hello world！輸出
10. Just-in-Time 偵錯你的代碼~
    在webstorm的Terminal中輸入npm run watch，然後會在裡面輸出一堆日誌，日誌中不能出現紅色的Error，同時會輸出下面兩句：

    http://localhost:63340/webpack-dev-server/省略這部分……webpack: bundle is now VALID.

    輸入：http://localhost:63340/webpack-dev-server/，應該就可以看到你想要的結果，結果如下：
    插入圖片哦
11. 這個就是用來充數的，光棍節快樂！！

進階

喝杯茶~
…… 
到了這可以說你的項目就已經完成了，如果你想跟我一樣使用Amazeui-react組件，那麼就繼續跟我這樣繼續下去吧~

1. 安裝Amazeui-react

   npm install amazeui amazeui-react --save-dev

2. 修改./src/js/entry.js檔案，替換成以下代碼：

   var React=require(‘react‘);var ReactDOM=require(‘react-dom‘);var AMUI=require(‘amazeui/dist/css/amazeui.min.css‘);var AMUIReact = require(‘amazeui-react‘);var button=( <AMUIReact.Button>這是一個按鈕</AMUIReact.Button>);ReactDOM.render(button,document.getElementById("test"));

3. Ctrl+S，儲存當前代碼，查看你的瀏覽器http://localhost:63340/webpack-dev-server/頁面有沒有變化~~

下面是我的測試工程連結，自己下載下來拿去用吧.
react_webpack_test

整整連寫帶測試折騰了我一下午，為了保證每一處寫的沒有疏漏，我現卸載掉我電腦上的webstorm和nodejs~~

 推薦拓展閱讀  著作權歸作者所有

如果覺得我的文章對您有用，請隨意打賞。您的支援將鼓勵我繼續創作！

¥ 打賞支援  喜歡 5分享到微博 分享到 更多分享×喜歡的使用者

•  秋夜已涼2016.09.12 13:42
•  Remilia2016.09.12 02:20
•  摔不碎的玉2016.07.26 09:48
•  BugFucker2016.06.04 13:29
•  _yuchen震2016.04.18 08:59

25條評論 （ 按時間正序· 按時間倒序· 按喜歡排序 ）添加新評論

_yuchen震

2 樓 · 2016.04.18 15:02

請問一下為什麼webpack. config. js裡不用require (‘path‘)
還有請問一下package. json裡的watch裡 /.dist/是什麼作用的呢？？????

喜歡(0)回複

小黃人大俠： @_yuchen震 您好，webpack.config.js 裡面用到了require，開頭這句，var webpack=require(‘webpack‘);所有的nodejs依賴如果需要引用外部類，require是不可避免的。watch裡的./dist/指的是webpack-dev-server 監聽的目錄，一直監聽當前位置下地dist目錄，可以保證當dist目錄下有檔案改動時即時的從瀏覽器中能夠重新整理出來，具體webpack-dev-server的用法請查看http://webpack.github.io/docs/webpack-dev-server.html，他對於webpack並不是必須的，只是輔助開發即時查看預覽效果而已。

回複2016.04.19 10:24

_yuchen震： @小黃人大俠 好的謝謝博主回答~~ 請問還有木有AmazeUI+react+webpack的項目常式呢，希望能像博主學習一下  

回複2016.04.19 11:13

_yuchen震： 能請問下AMUIReact的模態框怎樣寫嗎？ 
>var modal = <AMUIReact.Modal title="Amaze UI Modal">這一個 Modal 視窗。</AMUIReact.Modal>;

module.exports =React.createClass ({
render: function() {
return (
<AMUIReact.ModalTrigger modal={modal}>
<AMUIReact.Button amStyle=‘primary‘>開啟 Modal 視窗</AMUIReact.Button>
</AMUIReact.ModalTrigger>
);
}

});

這樣寫只能展示按鈕，沒有模態框0 0

回複2016.04.20 13:20  添加新回複

hstonel

3 樓 · 2016.05.17 17:58

 學習，謝謝

喜歡(0)回複

霓源閣

4 樓 · 2016.05.21 20:57

@小黃人大俠 博主，我是後端轉前端的，我用的一直是Intellij IDEA，然後我看了一些前端的教程，好多都是自動化的東西 yeomen，grunt，還要webpack等等，但是我覺得Intellij IDEA或者webstorm貌似都能替代他們嗎？我一直很疑惑，請博主幫忙解答。
還要博主寫的文章我很喜歡，方便留個連絡方式嗎 qq或者郵箱？

喜歡(0)回複

小黃人大俠： @霓源閣 不能說代替，就像nodejs不能指望完全代替java、php一樣，我們必須知道這些技術擅長的領域，只需要取其所長即可。而且我覺得你可能說的是不是這些開發工具替代你以前用的開發工具？開發工具永遠是朝著更加智能，功能強大和方便發展，多學習新的東西會不斷提高自己的開發效率~

回複2016.05.22 21:19  添加新回複

708d0f26b105

5 樓 · 2016.05.24 10:28

webstorm是自動儲存的 但是自動儲存 那react的自動重新整理就不能用

喜歡(0)回複

小黃人大俠： @708d0f26b105 你可以把自動儲存功能關閉，設定成ctrl+S快速鍵手動儲存。

回複2016.05.24 15:07

小黃人大俠： @708d0f26b105 我這個好像發錯了，react自動重新整理是使用的webpack-dev-server來測試的~

回複2016.06.17 22:00

aafff584fec2： 設定成手動儲存以後，再命令列輸入npm run watch 只能檢測一次，切換介面後就不起作用了

回複2016.07.19 10:09 還有 3 條評論， 展開查看 添加新回複

JYoung

6 樓 · 2016.07.18 14:00

特意註冊了個帳號來感謝一下，上午搞了半天沒搞明白配置，還好群裡的人推薦查一下這篇文章啦～ 現在已經可以愉快的擼碼啦～

喜歡(0)回複

小黃人大俠： @JYoung 呵呵，不用客氣，你的誠意已收到，好好地享受webpack和react給你帶來的樂趣吧~

回複2016.07.20 14:20  添加新回複

AlbertBreeze

7 樓 · 2016.07.27 11:11

產生的bundle.js檔案有700多KB大小，有辦法進行壓縮嗎？

喜歡(0)回複

小黃人大俠： @AlbertBreeze 關於壓縮請去webpack官網查看code spliting部分。

回複2016.07.27 11:18  添加新回複

vargent

8 樓 · 2016.08.22 09:59

按照你這個配置，還是沒有配置成功，找不到webpack 本人新手

喜歡(0)回複

小黃人大俠： @vargent webpack沒裝成功

回複2016.08.24 14:39

小黃人大俠： @vargent 使用全域安裝 npm install -g webpack

回複2016.08.24 14:40  添加新回複

Chozo

9 樓 · 2016.09.11 23:42

Error: Cannot find module ‘webpack‘
這是什麼情況
Failed at the [email protected] build script ‘webpack --progress --profile --colors‘.還有這個
我也是mac出錯了

喜歡(0)回複

小黃人大俠： @Chozo 你沒有安裝webpack，使用全域命令:npm install webpack webpack-dev-server -g --save-dev 安裝一次即可

回複2016.09.12 11:22  添加新回複

秋夜已涼

10 樓 · 2016.09.12 13:43

這個就是用來充數的，光棍節快樂！！ 可見作者是個大神，寫的很好！??

喜歡(0)回複

小黃人大俠： @秋夜已涼 ??

回複2016.09.12 19:30  添加新回複

登入後發表評論

搭建react項目的環境