添加關注

作者小黃人大俠 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，因此可能安裝和操作過程會有略微差異，但是差異不大，下面操作基本通用，不通用的我會指明。或者下面留言即可。

首先，確定你已經了解了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組件，那么就繼續跟我這樣繼續下去吧~

安裝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_test

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

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

學習，謝謝

霓源閣

4 樓 · 2016.05.21 20:57

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

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

回復 2016.05.22 21:19