如何從零搭建一個webpack+react+redux+react-redux的開發環境一入門

 閱讀本文章的時候，你要有必定的基礎知識儲備，簡單的es6知識，模塊化思想知識，js基礎知識，node基礎知識,react等

首先執行npm init,此時個人文件叫case;

下面安裝一些須要的npm包：

npm install react --save

npm install webpack --save-dev

說明一下：

--save:是用於生產和上線環境

--save-dev:只用於生產環境，上線後就不須要了

下面打包工具介紹：gulp，browserify，webpack

簡單介紹下：

browserify，gulp功能比較簡單，須要本身進行配置，可是能夠很好的理解整個生產流程，建議多研究下；

webpack就是一鍵式配置好全部的生產環境，適合新手入門，可是會讓人忽略不少的細節。下面進行運用環節。

第一種用browserify進行環境構建：
其中--save的包以下：

react react-dom 
其中--save-dev的包以下：

babel-core

babel-loader

# ES2015轉碼規則

babel-preset-es2015

# react轉碼規則

babel-preset-react 

下面是package.json以下：

 其中若是你不會package.json,能夠去搜一下它的具體意思：

具體的文件目錄以下：

 

這個的意思是將main.js打包轉換爲build.js，能夠直接在index.html中進行引用；

其中build.js是在執行npm start自動生成的；

item.js

main.js

 

index.html

 直接靜態打開index.html就能夠看到效果了

固然這個開發環境不能本身打開瀏覽器，也不能及時的熱更新，是最基礎的一種開發方式。

每一個node安裝包的使用和做用能夠本身百度，還有package.json中的scripts的做用和用法也本身百度一下，就知道爲啥要那麼寫了，

其實也能夠本身在命令行執行以下命令：

./node_modules/.bin/browserify main.js > build.js -t [ babelify --presets [ es2015 react ] ]