2015年12月18日 星期五

Webpack

KD換了公司之後要做的事情又變得不一樣了~
現在要來研究React.js,
不過根據React官網的介紹,
為了使用React.js最簡單的方式當然就是下載不用自己建置的JavaScript就可以了,
可惜天不從人願,
這樣的寫法可能無法完整了解react的api....
所以請自己建置吧~
官網建議使用 browserify 或是 webpack
這邊就介紹webpack了~~~~
為什麼要特別介紹呢!
因為我要被官網搞死~~
沒有任何基礎下指令怎麼下都是不對的.....................
廢話不多說

Step 1 : install npm
NPM - Node Package Manager 為什麼要用他呢?
請參考連結,因為JavaScript日益茁壯,NPM的功能跟NUGet差不多。
最簡單的安裝方式就是安裝Node.js


Step 2 : install react
記得用工作管理員開啟cmd
$ npm install --save react react-dom babel-preset-react


Step 3 : install webpack
參考webpack官網
$ npm install webpack -g


接下來都是抄官網的..............
Step 4 : setup the compilation

先移動到預計寫code的資料夾~~~cd 應該會吧~
然後新增兩個檔案
1.entry.js
document.write("It works.");

2.index.html
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

接下來就簡單了~~
執行指令把entry.js建置成bundle.js(畢竟html裡面是include bundle.js

$ webpack ./entry.js bundle.js

這樣就可以啦~~~~其實官網寫得很清楚了~~
剩下的我就不多說~

最重要的是最後一步,
因為webpack預設是讀取webpack.config.js,
所以最終是要把所有設定都寫在config.js裡面。

沒有留言:

張貼留言