开发环境

git
调试工具
抓包
webpack babel
linux常用命令

git是最常用的代码版本管理工具

图出自网络，侵权删

移动端如何抓包网络请求

抓包工具 windows:fiddler
        Mac OS:charles
        
抓包    查看网络请求
        网址代理
        https

webpack 和 babel

babel作用:es6模版化浏览器不支持，es6语法浏览器不完全支持，es6转化成es5 webpack作用:压缩代码，整合代码，以让网页加载更快

webpack配置

install包

html-webpack-plugin 解析html文件
webpack-dev-server 启动服务

//创建webpack.config.js
var webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
     mode:'development',//prodution 生产者模式
     entry:'./entry.js', //入口文件
     output: {//导出文件
     // 文件名称（指定名称+目录）
     //filename: 'js/[name].js',
     filename: 'bundle.[contenthash].js',
     // 输出文件目录（将来所有资源输出的公共目录）
     path: path.join(__dirname, 'src','index.js'),
     // 所有资源引入公共路径前缀 --> 'imgs/a.jpg' --> '/imgs/a.jpg'
     publicPath: '/',
      },
     module:{
          rules:[
               {
                   test:/\.js$/,//支持正则
                   loader:['bable/loader'],
                   include:path.join(__dirname, 'src'),
                   exclude:/node_modules/
               }
          ],
          
     },

    //其他解决方案配置
    resolve: {
        extensions: ['', '.js', '.json', '.css', '.scss']//添加在此的后缀所对应的文件可以省略后缀
    },
     //插件
     plugins:[
          new webpack.BannerPlugin('This file is created by ly'),
          new.HtmlWebpackPlugin({
          title:'rd平台', 
          template: 'entries/index.html', // 源模板文件 
          filename: resolve(__dirname, 'build'),
          // 输出文件【注意：这里的根路径是module.exports.output.path】 
          }),
          devServer:{
          prot:3000,
          contentBase:path.join(__dirname, 'src','index.js'),
          }
          
     ]
    }

babel配置

下载包 npm install @bable/core @bable/preset-env @bable/loader

bable/loader就是给webpack使用

//创建 .bablerc 文件

    {
    "preset":["@bable/preset-env"]
    }

es6模板化规范

结构赋值导出

第一种 分开导出

    export function fn (){
        console.log("123")
    }
    export const b ="345"
    export const c ={user:"lisi"}

    -----------------

    import {fn,b,c} from '../index'
    fn()
    console.log(b,c)

第二种 多个集合导出

    function fn (){
        console.log("123")
    }
    const b ="345"
    const c ={user:"lisi"}
    export{fn,b,c}
    //export{fn:fn,
    //        b:b,
    //        c:c}

    -----------------

    import {fn,b,c} from '../index'
    fn()
    console.log(b,c)

第三种 集合导出

    const obj ={
        user:"lisi"
    }
    export default obj

linux命令

公司的线上机器一般都是Linux，测试机也需要保持一致，用Linux（参考阿里云）

登陆服务器

ssh 用户名@IP地址 ssh work@192.168.10.21

// ls 查看文件夹
// ls -a（查看隐藏文件）
// ll 看列表
// clear 清屏幕
// rm -rf abc 删除abc文件夹
// rm abc 删除abc文件
// cd dist 进入dist文件
// mv index.html index1.html 修改文件名
// mv budle1.js src 移动文件到哪里
// cp a.js a1.js 拷贝文件
// vi d.js 新建d.js文件
// grep "babel" package.json 在package.json中查找关键字"babel"
// vimtutor 查看vim教程