前端 - 开发环境-CSDN博客

本文链接：https://blog.csdn.net/sinat_39145919/article/details/135091331

git

常用 git 命令

git add . 把所有改过的文件都加上添加单个文件的话，就把点换成单个文件名
git checkout xxx 把文件还原到以前的状态
git commit -m "xxx" 提交一行记录
git push origin master 推送到服务端
git pull origin master 去服务端下载一些功能
git branch 看一下分支
git checkout -b xxx / git checkout xxx 切换分支
git merge xxx 合并分支

webpack babel

背景

ES6 模块化，浏览器暂不支持
ES6 语法，浏览器并不完全支持
压缩代码，整合代码，让网页加载更快

基本配置

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

module.exports = {
    mode: 'development', // 模式
    entry: path.join(__dirname, 'src', 'index.js'), // 入口文件
    output: { 
        filename: 'bundle.js', // 输出文件名
        path: path.join(__dirname, 'dist') // 输出文件目录
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:path.join(__dirname, 'src', 'index.html'), // 模板文件
            filename: 'index.html' // 最后产出的文件名
        })
    ],
    devServer: {
        port: 3000,
        static: {
            directory: path.join(__dirname, 'dist') // 自动加载 dist 目录
        }
    }
};

// package.json
{
  "name": "webpack-2023-12-21",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^5.6.0",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}

ES6 模块化

export 导出、import 引入。

// a.js
export function fn() {
	console.log('fn');
}

export const obj = {
	name: '1'
};

// b.js
import { fn, obj } from './a.js';

fn();
console.log(obj);

如何配置 webpack 生产环境

// webp[ack.production.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'production',
    entry: path.join(__dirname, 'src', 'index.js'),
    output: {
        filename: 'bundle.[contenthash].js', // 添加一个 hash 值，能够最大程度的命中 http 缓存
        path: path.join(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:path.join(__dirname, 'src', 'index.html'), // 模板文件
            filename: 'index.html' // 最后产出的文件名
        })
    ],
    devServer: {
        port: 3000,
        // contentBase: path.join(__dirname,'dist') // 自动加载 dist 目录  webpack5 弃用了这种写法
        static: {
            directory: path.join(__dirname, 'dist') // 自动加载 dist 目录
        }
    }
};

// package.json
{
  "name": "webpack-2023-12-21",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.production.js",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.6",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.6.0",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}

linux 常用命令

背景

公司的线上机器一般都是 linux（参考阿里云）
测试机也需要保持一致，用 linux
测试机或者线上机出了问题，本地又不能复现，需要去排查

基本命令

ssh work@192.168.10.1

查看文件：ls、 ll

ls // 看平铺的文件

ls -a // 看所有文件 包括隐藏文件

ll // 按列表形式看文件

清屏：clear

clear // 清屏

创建文件夹：mkdir 文件夹名称

mkdir abc

删除文件夹：rm -rf 文件夹名称

rm -rf abc // 加上 -rf 删除文件夹下所有内容

cd dist

修改文件名：mv 原文件名新文件名

mv index.html index1.html

mv bundle.js ../bundle.js

拷贝文件：cp 原文件新文件

cp a.js a1.js

删除文件：rm 文件名

rm a1.js

新建文件：touch 文件名、vi 文件名、vim 文件名

touch c.js // 创建了之后放着

vi d.js // 如果文件不存在，则新建文件，并打开进入编辑模式

vim e.js // 如果文件不存在，则新建文件，并打开进入编辑模式

查看文件：vi 文件名、vim 文件名

vi d.js // 如果文件存在，则查看文件内容

vim e.js // 如果文件存在，则查看文件内容

按 i // 进入 insert 模式
按 esc // 退出 insert 模式
:wq // 保存并退出
:q // 退出
:w // 保存

打印文件内容：cat 文件名、head 文件名、tail 文件名

cat package.json // 打印文件所有内容

head package.json // 打印出文件的前面几行内容

tail package.json // 打印出文件的最后几行内容

关键字查询：grep "关键字" 文件名

grep "babel" package.json // 在某个文件中查找某个匹配的内容