由于現(xiàn)在的博客是使用wordpress搭建，自己得經(jīng)常修改過一些代碼，但是修改第三方源碼真的比較痛苦，于是決定計劃開始使用React + Node.js / Python開發(fā)新博客項目，最終替換當前博客代碼，方便以后博客的維護和更新，也能實現(xiàn)自我開發(fā)技術(shù)，架構(gòu)設(shè)計，解決問題能力的提升，同時記錄下整個開發(fā)歷程，總結(jié)，分享，希望能與讀者們一起進步。本篇介紹如何使用Webpack和Babel，Eslint，documentation.js等搭建項目開發(fā)環(huán)境和生產(chǎn)環(huán)境，也算項目的準備工作，下一期計劃介紹項目的架構(gòu)設(shè)計和技術(shù)棧選擇。

npm VS Yarn

在本項目我們使用Yarn管理項目三方依賴，不過放心，Yarn和NPM不沖突，也不是要替代NPM，使用方式基本一致，只需要簡單了解以下幾點。

三方庫版本管理

npm 和 Yarn 都使用 package.json 來跟蹤項目的依賴，版本號并非一直準確，因為你可以定義版本號范圍，npm的不同更新范圍，可能導致在擁有相同 package.json 文件的機器上安裝不同版本包，這可能導致一些差異的異常和沖突。

那npm有解決方式嘛？npm中可以使用 npm shrinkwrap生成一個版本鎖文件npm-shrinkwrap.json，在 npm install 時會在讀取 package.json 前先讀取這個文件，但是當更新包版本時，版本鎖文件并不會自動更新，我們得手動再次執(zhí)行npm shrinkwrap命令更新它。

那么Yarn有什么優(yōu)勢呢？每次添加或更新安裝庫包時，Yarn 都會創(chuàng)建（或更新）yarn.lock 文件，這樣可以確保所有機器安裝相同版本包，同時支持 package.json 中定義的允許版本范圍，和npm的區(qū)別在于Yarn總會自動更新 yarn.lock，而npm需要手動更新。

并發(fā)安裝

npm通常是按順序一個一個安裝依賴，而Yarn支持并行加載安裝多個三方庫包，所有其速度和效率都更快。

離線緩存

使用Yarn管理包時，三方庫包存放在本地磁盤，下次安裝將直接使用本地文件而不是再次下載，這也從另一方面使其安裝速度優(yōu)于npm。

簡而言之就是，Yarn和npm使用方式幾乎一樣，但是其版本管理更方便，安裝速度更快，更有優(yōu)勢，但是實際上它的所有三方庫包加載地址和npm都是統(tǒng)一的。

Webpack

我們使用Webpack打包工具作為項目的自動化構(gòu)建工具，將JavaScript，CSS，圖片等資源都當作JavaScript模塊（使用Webpack loader處理轉(zhuǎn)換）進行統(tǒng)一管理，關(guān)于Webpack博主之前總結(jié)過兩篇文章，可以參考：

Webpack搭建SPA應(yīng)用開發(fā)環(huán)境 Webpack模塊化管理CSS和圖片等資源

有了前文的鋪墊，本文就不打算展開介紹Webpack的工作原理和具體配置，而計劃從項目實踐開發(fā)和測試，打包層面思考如何更好的組織Webpack，如何使用Webpack提告項目開發(fā)，打包效率。

Webpack配置文件