11.开发环境.md

git（版本管理）
- 大型项目需要多人协作开发
- 服务端：github、coding.net（码云）
- 常用代码：
  - git add . 提交修改过的所有文件
  - git checkout <versionNo> 把本地文件还原到之前的版本
  - git commit -m "<注释txt>" 提交代码到某个分支并且添加注释
  - git push origin <branchName> 推送代码到服务端
  - git pull origin <branchName> 从服务端拉代码到本地
  - git branch 查看所有分支
  - git checkout -b <branchName> 新建一个分支
  - git checkout <branchName> 切换分支
  - git merge <branchName> 把branchName分支合并到当前分支上（如当前分支是A,git merge B是指把B的代码合并到A上面）
- 创建分支之后，要add、commit，这样在checkout到其他分支，才能看到不一样，否则不操作add、commit，就会发现所有分支都能看到改动
- 多人合作流程（分别开发login和register）
  （1）feature-login角色：
  （1）git checkout -b feature-login新建分支feature-login
  （2）在本地创建login.html
  （3）add -> commit -> push origin feature-login
  （2）feature-register角色：
  （1）git checkout -b feature-register新建分支feature-register
  （2）在本地创建register.html
  （3）add -> commit -> push origin feature-register
  （3）master角色合并项目
  （1）git fetch 把所有分支加载到本地
  （2）git checkout feature-login
  （3）git pull origin feature-login 拉取feature-login 最新代码
  （4）git checkout master
  （5）git merge feature-login 把feature-login的代码合并到master上面
  （6）add、commit、push origin master
  （7）git checkout feature-register
  （8）pull origin feature-register 拉取feature-register最新代码
  （9）如果有冲突（CONFLICT），可以考虑保留其中的内容或者是都保留
  （10）add、commit、push origin master
  结束
- 修改内容忘了切换分支，直接在master上修改了：用git stash
  （1）master角色
  （1）在master上修改了很多内容
  （2）git stash （相当于，把新修改的内容放在某个其他区域）,并且master恢复到修改前的状态
  （2）feature-loginout角色：
  （1）git checkout -b feature-loginout 新建分支feature-loginout
  （2）git stash pop 把缓存起来的内容放在feature-loginout分支
  （3）add、commit、push origin feature-loginout
调试工具

抓包（h5页出了问题怎么处理）-- fiddler工具
- 用于：h5查看网络请求，网址代理
- 抓包流程
  - 手机和电脑连在同一个局域网
  - 将手机代理到电脑上
  - 手机浏览网页即可抓包
- 抓包后
  - 查看网络请求
  - 网址代理
  - https：解密
webpack babel（对es6转换，对代码压缩、合并）
- webpack（打包）
  - webpack打包出来的代码依然是es6，而不是es5
- babel（转义）
- 浏览器需要下载代码去执行，因此需要压缩代码和整合代码，以让网页加载更快，并且涉及到缓存
- webpack
  - 初始化npm环境 npm init -y
  - npm i webpack webpack-cli -D 安装webpack
  - 新建webpack.config.js，设置webpack配置
  - package.json的script新增build字段为webpack
  - 新增src文件夹，且在文件夹下新增index.js，作为入口文件
  - src文件夹下新增index.html，作为编译模板
  - npm i html-webpack-plugin -D 解析html模板的插件
  - npm i webpack-dev-server -D 启动服务的插件
  - package.json的script新增dev字段为webpack-dev-server
  - npm run dev
- babel
  - @babel/core @babel/preset-env
  - babel-loader 是给webpack用的插件
  - 创建一个.babelrc，内容为

{
    "presets": ["@babel/preset-nev"] // @babel/preset-nev是babel很多配置插件的集合
}

* 微博pack.config.js新增

module: {
        rules: [
            {
                // 在src文件夹里面，遇到js结尾的文件要经过babel处理
                test: /\.js$/,  // 只要是js结尾的
                loader: ['babel-loader'],
                include: path.join(__dirname,'src'),
                exclude: /node_modules/ // 除了node_modules
            }
        ]
    },

模块化（导出导入的过程）

 // 逐个导出
export function fn(){}
export function name(){}
export function say(){}
// 解构赋值
import {fn,name} from './a'

// 导出一个对象
function fn(){}
function name(){}
function say(){}
export {
    fn,
    name,
    say
}
// 解构赋值
import {fn,name} from './b'

const xxx = {
  name: 'xxx'
}
// export default只能导出一个变量
export default xxx
// 解构赋值
import {fn,name} from './c'

export default{
    fn,
    name,
    say
}
// 如果export default后面是一个对象，则无法用解构赋值获取导出内容
import d from './d'

配置生产环境打包
linux常用命令（本机无法复现上线的问题）
总结