11.开发环境.md

• git（版本管理）

  • 大型项目需要多人协作开发
  • 服务端：github、coding.net（码云）
  • 常用代码：
    • git add . 提交修改过的所有文件
    • git checkout 把本地文件还原到之前的版本
    • git commit -m "<注释txt>" 提交代码到某个分支并且添加注释
    • git push origin 推送代码到服务端
    • git pull origin 从服务端拉代码到本地
    • git branch 查看所有分支
    • git checkout -b 新建一个分支
    • git checkout 切换分支
    • git merge 把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常用命令（本机无法复现上线的问题）

• 总结