做者小黃人大俠 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組件。javascript

源起

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

準備

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

開始

因爲個人電腦的MacBook不是windows，所以可能安裝和操做過程會有略微差別，可是差別不大，下面操做基本通用，不通用的我會指明。或者下面留言便可。html

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

入門

安裝完畢上述幾個工具以後，請打開你的命令行工具：windows 按下Windows符號鍵+R，輸入cmd，會彈出命令行工具；mac直接在Launchpad中查找終端便可，Linux跟mac沒啥區別，本身找終端去，在下面咱們姑且統一稱之爲命令行。
首先在命令行中輸入：npm -v ，看看是否有版本號出現。若是出現了，證實你的nodejs安裝成功了，不須要配置環境變量。若是沒出現，那麼你還得把環境變量配置一下。不過nodejs默認是給你配置好環境變量的。
配置npm的代理地址：（因爲偉大的牆的緣由，會致使下載包很慢很慢~~~）
```
npm config set registry https://registry.npm.taobao.org
```
下面進入正軌了啊！！！提神！注意！看這，看這~~
啓動webstorm，初次使用的話會讓你導入之前的配置。若是是之前有配置文件就導入，沒有就選擇初次使用那一項。而後選擇，create new project，創建一個新的工程。工程名就叫作：react_webpack_test吧。
點擊OK，進入界面。而後打開webstorm的首選項設置（windows是File-settings），在Languages & Frameworks的JavaScript一欄選擇JSX Harmony，點擊OK。

從新打開命令行，依次輸入

sudo npm install webpack webpack-dev-server babel -g sudo 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。

第一條命令是全局安裝，模塊會安裝在/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就會出現相應執行，可是非全局不支持使用這個命令的哦。前端

接下來，再打開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裏面會顯示以下的東東

> react_webpack_test@1.0.0 build /Users/你的工程所在目錄/react_webpack_test > webpack \--progress \--profile \--color 2m0ms op1ms optimiz12ms emit Hash: 292766b53fb3969afd55 Version: webpack 1.12.14 Time: 5109ms Asset Size Chunks Chunk Names bundle.js 676 kB 0 [emitted] index \+ 159 hidden modules

若是裏面出現了紅色的Error那麼就說明你的工程配置還有一些問題，若是OK的話，打開瀏覽器，在裏面運行你的dist/index.html文件，看看是否有：hello world！輸出

實時調試你的代碼~
在webstorm的Terminal中輸入npm run watch，而後會在裏面輸出一堆日誌，日誌中不能出現紅色的Error，同時會輸出下面兩句：
```
http://localhost:63340/webpack-dev-server/ 省略這部分…… webpack: bundle is now VALID.
```
輸入：http://localhost:63340/webpack-dev-server/，應該就能夠看到你想要的結果，結果以下：
插入圖片哦
這個就是用來充數的，光棍節快樂！！

進階

喝杯茶~
……
到了這能夠說你的項目就已經完成了，若是你想跟我同樣使用Amazeui-react組件，那麼就繼續跟我這樣繼續下去吧~java

安裝Amazeui-react

npm install amazeui amazeui-react --save-dev

修改./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"));

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

下面是個人測試工程連接，本身下載下來拿去用吧.
react_webpack_testnode

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

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

_yuchen震webpack

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

學習，謝謝

霓源閣

4 樓 · 2016.05.21 20:57

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

小黃人大俠： @霓源閣不能說代替，就像nodejs不能期望徹底代替java、php同樣，咱們必須知道這些技術擅長的領域，只須要取其所長便可。並且我以爲你可能說的是否是這些開發工具替代你之前用的開發工具？開發工具永遠是朝着更加智能，功能強大和方便發展，多學習新的東西會不斷提升本身的開發效率~

回覆 2016.05.22 21:19

708d0f26b105

5 樓 · 2016.05.24 10:28

webstorm是自動保存的可是自動保存那react的自動刷新就不能用

小黃人大俠： @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

JYoung