react+redux+webpack+git技术栈

 ?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、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 三、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 三、***********************webpack************************* 92 1、commonJS 93 2、require(‘./name‘),斜杠-----本文件夹 94 require(‘name‘),-----node_modules里 95 ?96 ***********************布局************************* 97 build--------编译后发布代码文件夹 98 src-------------开发文件夹 99 ????|---component_dev-------100 ????|---script-------js101 ????-----|---app.js102 ????-----|---component---组件103 ????-----|---redux104 ????????????|----store.js105 ????????|---index.js106 ????|---style---------css107 ????|----index.ejs------模板改变也会生成新的hash值108 ????????????<title><%= htmlWebpackPlugin.option.title%></title>109 index.html110 package.json111 webpack.config.js112 .git113 114 css、js、html，其他例如第三库CDN115 img呢？服务器？116 ***********************webpack.json*************************117 ‘script‘:{118 ????"build":webpack-dev-server119 }120 ***********************webpack.config.js*************************121 后端拿到html122 前后端两个域名？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‘-----------生成多个js137 ????},138 ????devServer:{139 ????????contentBase:‘./build‘-----------访问目录下的index.html--把index.html放到build里140 ????????host:"localhost"---------域名141 ????????port：‘9000‘----端口142 ????????historyApiFallback:false ?-------------是否使用H5的historyApi143 ????????proxy:{-----------代理144 ????????????‘/api‘:{----------------有api即认为访问后端，例如‘/api/list.php‘145 ????????????????target:‘http://localhost:3000‘---地址栏有/api即跳到：3000146 ????????????????pathRewrite:{‘^/api‘,‘‘}------------干掉‘./api‘147 ????????????????changeOrigin:true---------------------跨域，非本地跨域148 ????????????}149 150 ????????}151 152 ????},153 ????module:{154 ????????loaders:[155 // ???????????{-->非抽离声明156 // ???????????????test:/\.css$/,------css打包到js157 // ???????????????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打包到js168 // ?????????????????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，解析的是css175 ????????????????????use:‘css-loader!sass-loader‘----------------不要重复声明style-loader176 ????????????????})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值的js188 ????????????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 -D223 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---Es5229 import from ---Es6230 231 1、const Index=‘sd‘232 export {Index}233 import {Index} from index.js234 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-----------编译es6241 242 react-hot-loader!babel-loader----------------------react热替换243 244 245 ***********************babel*************************246 247 jsx------babel解析,webpack直接可以识别Es6语法，不过jsx还是需要babel来解析,babel还可以解析Es7位es5248 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.js259 260 var list = require(‘./list.json‘)261 module.exports = function() {262 ??return {263 ????‘list.php‘: list264 ??}265 }266 访问localhost：3000267 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 andriod287 ios288 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-router300 301 "react-router": "^3.0.2"--------------用4.0版本会没有ReactRouter.min.js,引用react-router.min.js会报Cannot read property ‘location‘ of undefined302 引用ReactRouter.min.js303 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.data316 子组件获得父组件的属性方法----------父组件设置属性与方法，子组件this.props.name获得317 八、API318 mock数据319 share.baidu.com----------------------百度分享320 mern----------------------react-cli321 九、组件YO322 npm i babel-preset-stage-0 -D323 十、redux324 onEnter事件可以检测路由切换325 组件渲染从内向外326 Didmountupdate中也可以检测路由切换327 Index中包含自己及切换的子路由328 cnpm i react-redux -S329 *************************************十、redux***********************************************330 拷贝redux，react-deux331 ejx要添加332 connect ----------react-redux333 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/375351 **************************************history*************************352 browserhistory:h5的，浏览器就不会有#了353 browserhistory.goBack();goFoward()354 改用browserhistory,用事件定义跳转，hashhistory ?Link方法就不适用了355 ******************************路由传参***************************************356 path="/list/:type"-------------设置动态路由357 取type方法：this.props.params358 ************************touch-action**************************359 touch-action:none360 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 nginx373 nginx -s stop374 375 ?gzip ?on压缩传输376 pwd377 378 379 nginx的使用380 1、修改conf/nginx.conf381 把nginx.conf里的server下的全部注释掉，（35-79行）382 把gizp on解注释，添加 ?include ../conf.d/*.conf;383 2、建conf.d文件夹，建工程名的配置文件，配置如下：384 server{385 ????listen 80;----一般都是80386 ????server_name localhost;387 ????root E:/lianlianLife/dev/build;388 }389 3、启动nginx，访问localhost即可390 ************************nginx**************************391 ************************前后端联调**************************392 Postman393 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得到网页ip400 ip+域名设置--------------得到远端401 ipconfig/flushdns-----------刷新DNS解析缓存402 跨域：403 cors、404 jsonp405 window.name406 nginx方向代理407 408 location /api{409 ????????proxy_pass http://localhost:3000410 ????}411 412 modal---组件413 stuo nginx414 nginx杀掉进程的方法----taskkill /fi "imagename eq nginx.EXE" /f，可以杀死名字为415 nginx.EXE的所有进程416 http://www.cnblogs.com/CoreXin/p/5566607.html417 418 419 http://blog.csdn.net/u010977147/article/details/53489160l两个参数解决