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 ip地址
ssh work@192.168.10.1
- 查看文件:
ls
、ll
ls // 看平铺的文件
ls -a // 看所有文件 包括隐藏文件
ll // 按列表形式看文件
- 清屏:
clear
clear // 清屏
- 创建文件夹:
mkdir 文件夹名称
mkdir abc
- 删除文件夹:
rm -rf 文件夹名称
rm -rf abc // 加上 -rf 删除文件夹下所有内容
- 进入目录下:cd 目录名
cd dist
- 修改文件名:
mv 原文件名 新文件名
mv index.html index1.html
- 移动文件位置:
mv 原文件地址 新目录
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 // 在某个文件中查找某个匹配的内容