react+redux+webpack+git技術棧
阿新 • • 發佈：2017-09-14
tps .net read nor 無法 mac icon ear es5
1 一、git bash here 2 mdkr 3 cnpm init -y 4 ls -a 5 ls -l 6 ls -la隱藏的也可查看 7 cat package.json 8 二、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、webpack17 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 test31 nrm use taobao ----切換源 32 npm腳本 33 npm run dev 34 三、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別名ci43 ---------------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 三、***********************webpack************************* 92 1、commonJS 93 2、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 1、const Index=‘sd‘ 232 export {Index} 233 import {Index} from index.js 234 2、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 四、***********************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 五、reset.css公共樣式 282 283 284 285 六、搭建頁面結構 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 七、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 八、API 318 mock數據 319 share.baidu.com----------------------百度分享 320 mern----------------------react-cli 321 九、組件YO 322 npm i babel-preset-stage-0 -D 323 十、redux 324 onEnter事件可以檢測路由切換 325 組件渲染從內向外 326 Didmountupdate中也可以檢測路由切換 327 Index中包含自己及切換的子路由 328 cnpm i react-redux -S 329 *************************************十、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 1、放json裏， 363 2、放服務器，裝ngix，方向代理 364 3、放數據庫。 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 1、修改conf/nginx.conf 381 把nginx.conf裏的server下的全部註釋掉，（35-79行） 382 把gizp on解註釋，添加 include ../conf.d/*.conf; 383 2、建conf.d文件夾，建工程名的配置文件，配置如下： 384 server{ 385 listen 80;----一般都是80 386 server_name localhost; 387 root E:/lianlianLife/dev/build; 388 } 389 3、啟動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兩個參數解決
react+redux+webpack+git技術棧