react+redux+webpack+git技術棧

  1 1、git bash here
  2 mdkr
  3 cnpm init -y
  4 ls -a
  5 ls -l
  6 ls -la隱藏的也可查看
  7 cat package.json
  8 2、npm
  9 npm i webpack-dev-server -g
 10 全局：任何目錄運行
 11 本地：本地須要調用附帶的插件
 12 npm list
 13 npm list -g
 14 npm uninstall supervisor -g 全局刪除
 15 npm remove supervisor -g全局刪除，完全卸載，再安裝
 16 npm i supervisor --save-dev||-D 開發依賴：項目上線不須要的，例如：babel、webpack
 17 npm i jquery -S項目依賴-----dependencies
 18 奇數非穩定版本
 19 cnpm info jquery
 20 升級---直接修改配置文件
 21 cnpm update
 22 ^表示第一個版本號不變後面取最高
 23 ~表示第一第二個約定好
 24 *取最新版本
 25 --------------------------------版本升級問題：刪除後修改json，在安裝，mac上可能能夠
 26 npm outdated
 27 rm -rf強制刪除全部
 28 npm cache clear清除緩存安裝
 29 nrm ls npm源
 30 nrm test
 31 nrm use taobao  ----切換源
 32 npm腳本
 33 npm run dev
 34 3、git工具
 35 本地倉庫
 36 遠端倉庫-remote
 37     gitLab/github---ssh
 38 主幹發佈、分支開發
 39 -----------------配置遠程庫---------------------------
 40 gitignore----不上傳服務器的文件夾
 41 git config --global user.name
 42 git config --global alias.ci commit----- 起commit別名ci
 43 ---------------clone下來-------------------
 44 git clone ssh/https-----https公開本身代碼
 45 git st狀態
 46 ---------------查看狀態run起來----------------------------------------
 47 git add .
 48 git ci -am "asds"添加
 49 git push
 50 .........................建立分支..................................
 51 git branch
 52 git branch name建立分支不切換
 53 git checkup -b name-2017-0223-bao-bugfix
 54 git co -b name-2017-0223-bao-bugfix建立分支並切換
 55 修改文件
 56 git ci -am "adsd"
 57 git push --set-upstream origin name分支上傳
 58 ----------------------merge獲取其餘分支----------------------------------
 59 在本地建立多個分支
 60 git branch -r顯示遠端分支
 61 open index.html
 62 git co master------------主分支提交master
 63 git merge origin/name 分支提交後在master上merge，master與分支合併作修改，保存本地庫
 64 git ci -am "merge-name"
 65 git push發佈
 66 
 67 git log查看歷史版本
 68 $ git reset --hard 3628164
 69 ---------------------merge master-----------
 70 其餘分支與master同步
 71 git checkout master----切換分支到master執行
 72 git pull----便可完成master更新同步
 73 git merge master??
 74 git rebase master-----保持與本地一致
 75 用rebase合併主幹的修改，若是有衝突在此時解決
 76 ---------------------------------------------------
 77 git br -a可看到遠端全部分支
 78 clone後新建立的分支拿到本地倉庫方法：
 79 git fetch origin newname
 80 git br
 81 git co newname
 82 git br-----便可拿到
 83 open index.html
 84 --------------------------
 85 權限設置
 86 Collaborators：添加Add collaboator
 87 --------------總結----------------------
 88 管理員merge----開發人員pull便可看到項目進度！
 89 
 90 
 91 3、***********************webpack*************************
 92 一、commonJS
 93 二、require('./name'),斜槓-----本文件夾
 94 require('name'),-----node_modules裏
 95 
 96 ***********************佈局*************************
 97 build--------編譯後發佈代碼文件夾
 98 src-------------開發文件夾
 99     |---component_dev-------
100     |---script-------js
101     -----|---app.js
102     -----|---component---組件
103     -----|---redux
104             |----store.js
105         |---index.js
106     |---style---------css
107     |----index.ejs------模板改變也會生成新的hash值
108             <title><%= htmlWebpackPlugin.option.title%></title>
109 index.html
110 package.json
111 webpack.config.js
112 .git
113 
114 css、js、html，其餘例如第三庫CDN
115 img呢？服務器？
116 ***********************webpack.json*************************
117 'script':{
118     "build":webpack-dev-server
119 }
120 ***********************webpack.config.js*************************
121 後端拿到html
122 先後端兩個域名？run到一塊兒
123 var webpack=require('webpack')
124 var htmlWebpackPlugin=require('html-webpack-plugin')--------引入插件
125 var ExtractTextPlugin=require('extract-text-webpack-plugin')
126 var openBrowserPlugin=require('open-browser-webpack-plugin')
127 mudule.exports={
128     entry：{--------------可單頁面入口。可多入口文件
129         page1:'./src/app1.js',
130         page2:'./src/app2.js'
131     },
132     output:{----------------js文件和其餘生成的文件
133         path:__dirname+'/build',------__dirname物理路徑，後面build沒有點，
134         //filename:'app_[hash].js'---上線用
135         filename：'app.js'---開發用
136         //filename:'[name]_[hash].js'-----------生成多個js
137     },
138     devServer:{
139         contentBase:'./build'-----------訪問目錄下的index.html--把index.html放到build裏
140         host:"localhost"---------域名
141         port：'9000'----端口
142         historyApiFallback:false  -------------是否使用H5的historyApi
143         proxy:{-----------代理
144             '/api':{----------------有api即認爲訪問後端，例如'/api/list.php'
145                 target:'http://localhost:3000'---地址欄有/api即跳到：3000
146                 pathRewrite:{'^/api',''}------------幹掉'./api'
147                 changeOrigin:true---------------------跨域，非本地跨域
148             }
149 
150         }
151 
152     },
153     module:{
154         loaders:[
155 //            {-->非抽離聲明
156 //                test:/\.css$/,------css打包到js
157 //                loader:'style-loader!css-loader'
158 //            },
159             {
160                 test: /\.css$/,
161                 loader: ExtractTextPlugin.extract({
162                   fallback: 'style-loader',
163                   use: 'css-loader'
164                 })
165             },
166 //             {
167 //                test:/\.scss$/,------css打包到js
168 //                  exclude: /node_modules/,--------------刨除哪一個!!!
169 //                loader:'style-loader!css-loader!sass-loader'
170 //            }, -->非抽離聲明
171             {
172                 test:/\.scss$/,
173                 loader:ExtractTextPlugin.extract({--------抽離聲明
174                     fallback:'style-loader',------------------------解析最後一個loaderextract,這個案例是style，解析的是css
175                     use:'css-loader!sass-loader'----------------不要重複聲明style-loader
176                 })
177             },
178               {
179                 test: /\.js$/,
180                 exclude: /node_modules/,--------------刨除哪一個!!!
181                 loader: 'react-hot-loader!babel-loader'---------------react熱替換，厲害了
182               }
183         ]
184     },
185     plugin:[
186         new htmlWebpackPlugin({--------------html文件自動生成插件實例化，有本身的默認模板
187             filename:'index.html',-----------------輸出的文件名，會生成帶有hash值的js
188             template:'./src/index.ejs',------------模板文件
189             title:'豆瓣電影'
190         }),
191         new ExtractTextPlugin({-------------------解析抽離css並會在index.html加link標籤
192             filename:'app_[hash].css',----------------可加版本號
193             disable:false,-------true關閉
194             allChunks:true---------------入口文件
195         }),
196         new webpack.optimize.UglifyJsPlugin({
197             compress:{----------------壓縮，最後上線須要一次
198                 warning:false-------是否顯示錯誤信息，false不顯示
199             },
200             output:{
201                 comments:false----------是否須要註釋，false不須要
202             }
203         }),
204         new openBrowserPlugin({ url: 'http://localhost:8080' })------------------webpack 啓動後自動打開瀏覽器插件!!!!1!!厲害了
205     ],
206     externals:{------------------抽離js第三方類庫
207         "react":"window.React",----------配置後不會打包react，手動打包便可,包特別大
208         "react-dom:"window.ReactDOM"
209         "react-router":"window.ReactRouter"
210         "redux":"window.Redux"
211         'react-redux':'widow.ReactRedux'
212     }
213 }
214 
215 ELEMENT解析與源碼不一樣
216 源碼---是後臺ng、rg以後的
217 
218 css/js版本控制，服務器緩存原來版本----回滾---使用構建工具
219 哈希值hash-----根據內容算法生成來css、js控制版本
220 
221 npm install html-webpack-plugin---------------------html自動生成插件
222 npm i sass-loader -D
223 npm react-hot-loader -D---------------------react熱替換
224 npm i babel-preset-react -D----------------react預設
225 npm i extract-text-webpack-plugin -D-----------------抽離文本插件
226 npm i react-dom -S--------------項目依賴
227 npm i open-browser-webpack-plugin---------------
228 require---Es5
229 import from ---Es6
230 
231 一、const Index='sd'
232 export {Index}
233 import {Index} from index.js
234 二、const Index='sd'
235 export {Index as defult}
236 import Index from index.js---------------Index花括號就不用了
237 ***********************babel編譯器安裝*************************
238 babel-core---------------babel-loader調用
239 babel-loader------------編譯
240 babel-preset-es2015 -D-----------編譯es6
241 
242 react-hot-loader!babel-loader----------------------react熱替換
243 
244 
245 ***********************babel*************************
246 
247 jsx------babel解析,webpack直接能夠識別Es6語法，不過jsx仍是須要babel來解析,babel還能夠解析Es7位es5
248 
249 {
250     "preset":["es2015","react","stage-0"]
251 }
252 ***********************packge.json*************************
253 
254 "babel-polyfill":"^6.23.0"---------------------低版本andrio不支持則下降版本，很重要！！
255 4、***********************mock數據*************************
256 npm i json-server -g-----------安裝
257 json-server src/mock.js--------啓動服務，啓動mock.js文件
258 mock.js
259 
260 var list = require('./list.json')
261 module.exports = function() {
262   return {
263     'list.php': list
264   }
265 }
266 訪問localhost：3000
267 
268 在fetch裏fetch("/api/kind2.php").then(res=>res.json()).then(res=>{})
269 --------------------------------
270  componentDidMount() {
271     fetch('/api/list.php')
272     .then(response=>response.json())
273     .then(res=>{
274       // console.log(res);
275       this.setState({
276         name: <div>{res.name}</div>
277       })
278     })
279   }
280 
281 5、reset.css公共樣式
282 
283 
284 
285 6、搭建頁面結構
286 andriod
287 ios
288 woff、ttf-------------屢次設置font-face會merge並不會覆蓋
289 //CDN簡寫
290 @font-face{
291     font-family:yofont;
292     src:url(/icofont/iconfont.woff) format("woff"),
293     url(/iconfont/iocnfont.ttf) format('truetype')
294 }
295 1像素線、、、、、、、、、、、、、、、
296 空元素相對定位
297 僞元素：絕對定位
298 根據dpr縮放
299 7、react-router
300 
301 "react-router": "^3.0.2"--------------用4.0版本會沒有ReactRouter.min.js,引用react-router.min.js會報Cannot read property 'location' of undefined
302 引用ReactRouter.min.js
303 
304 react-router.min.js-------------通常用後端開發
305 
306 <Link to=''/>
307 <Router>
308 <IndexRoute component={}/>
309 <Route path='' component={}/>
310 </Router>
311 抽離後要在ejs裏引文件，不然找不到
312 父組件得到子組件的參數------------------
313 子組件經過this.props.onClickHandler.bind(this,"abc")
314     -------------onClickHandler是父組件定義的方法，abc是子組件的參數，經過函數傳給父組件
315 也能夠-----------子組件設置this.state={data:'abc'},,父組件在設置ref="abc"，在ditmount中this.refs.state.data
316 子組件得到父組件的屬性方法----------父組件設置屬性與方法，子組件this.props.name得到
317 8、API
318 mock數據
319 share.baidu.com----------------------百度分享
320 mern----------------------react-cli
321 9、組件YO
322 npm i babel-preset-stage-0 -D
323 10、redux
324 onEnter事件能夠檢測路由切換
325 組件渲染從內向外
326 Didmountupdate中也能夠檢測路由切換
327 Index中包含本身及切換的子路由
328 cnpm i react-redux -S
329 *************************************10、redux***********************************************
330 拷貝redux，react-deux
331 ejx要添加
332 connect ----------react-redux
333 connect(mapStateToProps,mapDispatchToprops)(Index)
334 
335 
336 路由
337 引入{Provider}
338 {store}
339 <Provider store={store}>
340 
341 
342 
343 </Provider>
344 某個組件狀態須要共享
345 某個狀態須要在任何地方都能拿到
346 一個組件須要改變全局狀態
347 一個組件須要改變另外一個組件的狀態
348 **************************************YO框架**********************************************
349 base:設置html裏的font-size--------------------YO框架以640的iphone5作的，
350 iphone6,1vw=0.26666666px=100/375
351 **************************************history*************************
352 browserhistory:h5的，瀏覽器就不會有#了
353 browserhistory.goBack();goFoward()
354 改用browserhistory,用事件定義跳轉，hashhistory  Link方法就不適用了
355 ******************************路由傳參***************************************
356 path="/list/:type"-------------設置動態路由
357 取type方法：this.props.params
358 ************************touch-action**************************
359 touch-action:none
360 
361 手機裏無webpack，沒法調用線上數據
362 一、放json裏，
363 二、放服務器，裝ngix，方向代理
364 三、放數據庫。
365 
366 
367 ************************nginx**************************
368 http://nginx.org/en/download.html下載地址
369 homebrew安裝moc ------------ 
370 
371 
372 start nginx
373 nginx -s stop
374 
375  gzip  on壓縮傳輸
376 pwd
377 
378 
379 nginx的使用
380 一、修改conf/nginx.conf
381 把nginx.conf裏的server下的所有註釋掉，（35-79行）
382 把gizp on解註釋，添加  include ../conf.d/*.conf;
383 二、建conf.d文件夾，建工程名的配置文件，配置以下：
384 server{
385     listen 80;----通常都是80
386     server_name localhost;
387     root E:/lianlianLife/dev/build;
388 }
389 三、啓動nginx，訪問localhost便可
390 ************************nginx**************************
391 ************************先後端聯調**************************
392 Postman
393 
394 HostAdmin App----C:\Windows\System32\drivers\etchosts-------host文件位置
395 127.0.0.1 ----------- localhost-------域名解析--先走本地
396 ip計算識別，一個ip能夠有多個域名
397 如何清除DNS緩存
398 src="http://www.douban.com/libs/"------index.html配置
399 ping www.baidu.com獲得網頁ip
400 ip+域名設置--------------獲得遠端
401 ipconfig/flushdns-----------刷新DNS解析緩存
402 跨域：
403 cors、
404 jsonp
405 window.name
406 nginx方向代理
407 
408 location /api{
409         proxy_pass http://localhost:3000
410     }
411 
412 modal---組件
413 stuo nginx
414 nginx殺掉進程的方法----taskkill /fi "imagename eq nginx.EXE" /f，能夠殺死名字爲
415 nginx.EXE的全部進程
416 http://www.cnblogs.com/CoreXin/p/5566607.html
417 
418 
419 http://blog.csdn.net/u010977147/article/details/53489160l兩個參數解決