笔记-12-前端模块化/git
Node.js是一个基于V8 JavaScript引擎的JavaScript运行时环境。
直到ES6才有了自己的模块化方案：ESModule
在此之前：Commonjs/AMD/CMD
CommonJS是一个规范，最初提出来是在浏览器以外的地方使用，当时被命名为ServerJS，后来为了体现他的广泛性，修改为CommonJS，简称CJS
Node是CommonJS在服务端一个具有代表性的实现
Browserify是CommonJS在浏览器中的一种实现
webpack打包工具具备对CommonJS的支持和转换
Node中每个js文件都是一个单独的模块
exports / module.exports 导出
require 导入 动态加载 多次加载会缓存，只运行一次。（加载模块是同步的）
// 导出
exports.aaa = 'aaa'
// 导入
const xxx = require('./abc.js')
console.log(xxx.aaa)每个模块都是Module的实例，module.exports = {} 指向一个新的内存空间，修改不影响源文件
早期为了在浏览器中使用模块化，通常采用AMD(异步加载模块)/CMD
ESModule
export / export default 导出
import 导入
导入时起别名：as
采用编译期的静态分析，并也加入了动态引入的方式。自动采用严格模式。
如需在代码逻辑中导入，可以使用import()函数，返回Promise
解析过程和原理：https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/
peerDependencies 对等依赖（比如elementPlus依赖vue3）
npm的包通常需要遵从semver版本规范：https://semver.org/lang/zh-CN/
X.Y.Z 主版本号(major) 次版本号（minor） 修订号（patch）
开头^的意思是：x保持不变，y、z安装最新
开头~的意思是：x、y保持不变，z保持最新
通常package.json里记录大致的版本号，具体安装的版本记录在package-lock.json
每个项目都下载一堆依赖（yarn会缓存）
pnpm 节省磁盘空间（通过硬连接的方式，让所有使用同一版本依赖包的项目引用同一个磁盘数据）
硬连接：电脑文件系统中的多个文件平等的共享同一个文件存储单元（操作系统相对内存中数据的链接）
软连接：以绝对路径或者相对路径指向其他文件的引用
它创建的是非扁平的node_modules
pnpm add 添加包 / pnpm remove 删除包
path.resolve() 拼接多个路径，一定返回一个绝对路径。
webpack
为什么用loader，因为webpack自身就会处理js文件，loader就是让webpack能够处理js和非js文件。
webpack通过babel-loader与babel联通。先babel-loader联通，在用babel编译，再交给webpack打包，webpack主要就是有打包功能，没有编译功能。
上面的方式babel只是能转义语法，一些类似Object.assign等API还是无法处理，所以要引入一些“polyfill垫片”文档中有记载。
安装 npm i -D core-js@3.6.5 在源码内引入 import 'core-js/stable' 引入的是稳定版
const path = require('path')
//引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
//配置模式，默认生产模式，改成开发模式后更方便查看代码
mode:'development',
//指定入口文件,单入口的写法
entry:'./src/index.js',
//多入口的写法
/* entry:{
//主入口文件
main:'./src/index.js',
//假如再有一个搜索入口
search:'./src/search.js'
}, */
//单出口
output:{
//路径，必须是绝对路径，resolve是拼接方法，__dirname代表这个配置文件所在目录
path:path.resolve(__dirname,'dist'),
//输出叫什么文件名
filename:'bundle.js'
},
//多出口
/* output{
path:path.resolve(__dirname,'dist'),
//输出的文件名用[name],name会自动取多入口的main和search作为文件名
filename:'[name].js'
}*/
//loader部分
//模块
module:{
//规则,因为可以配置很多loader所以是数组，不同的loader放在不同对象内
rules:[
{
//正则表达式,你想匹配哪些文件
test:/\.js$/,
//排除
exclude:/node_modules/,
//使用什么loader,安装过的
loader:'babel-loader'
},
{
//同一个匹配，配置多个loader
test:/\.css$/,
// 就不用 loader:'css-loader' 改用 use
//注意use里的loader，会从右往左使用，所以先通过css-loader识别css文件再交给style-loader
use:['style-loader','css-loader']
}
]},
//使用插件
plugins:[
//单入口
//并不是所有插件都这么用，具体用法看插件文档
new HtmlWebpackPlugin({
//指定一个html文件作为模板
template:'./index.html'
})
//多入口，有几个入口就实例化几次
// new HtmlWebpackPlugin({
//指定一个html文件作为模板
// template:'./index.html',
// 防止文件名冲突，要加上文件名，默认都是index
// filename:'index.html',
// 指定想要引入哪一个js文件，不指定就都引入
// chunks:['index'],
//其他一些小功能
// minify:{
// //删除html文件中的注释
// removeComments:true,
// //删除html文件中的空格
// collapseWhitespace:true,
// //删除各种html标签属性值的双引号
// removeAttributeQuotes:true
// }
// }),
// new HtmlWebpackPlugin({
// //指定一个html文件作为模板
// template:'./search.html',
// filename:'search.html',
// chunks:['search']
// }) ]}git
git三大区域：工作区（写代码的地方red）、暂存区（暂时存放未提交的内容green）、本地仓库，远程仓库
工作区->添加到暂存区，提交到本地仓库，生成一个版本。推送到远程仓库。
安装完git后需要全局配置一次：
git config --global user.name 用户名
git config --global user.email 邮箱
提交记录里会用到
git init 初始化
git status 查看当前状态
git add 文件名 / git add . 所有的文件 添加到暂存区
git commit -m "描述" 提交 生成版本
git log 查看提交过的版本信息 git log --oneline 精简一些 HEAD->master 意思就是当前工作区展示的是这个版本
后面加上--graph 可以看到分支的图
只回退本地仓库：git reset --soft 版本号
git reflog 查看回退后 之前的版本
默认是 git reset --mixed 版本号 修改了暂存和仓库版本
git reset --hard 版本号 工作区、暂存区、版本区都回退。
第一次提交一定是在master分支上，提交之后就能创建其他分支。
创建分支：git branch 分支名
git branch -v 查看分支更多信息
git checkout 分支名 切换分支 git switch 分支名 也一样的
合并分支：git merge 分支名 把谁合并过来
删除分支：git branch -d 分支名
推到远程仓库，已有本地仓库，已创建同名远程空仓库
git push 远程仓库地址 想推哪个分支 【每次推送写远程地址会比较麻烦】 --all 推送所有分支 空格隔开分支名就可以多选
所以配置别名
git remote add 别名【常用origin】
查看配置了什么别名：git remote -v
再推送：git push origin master
git pull origin master 更新
git clone 地址 克隆到本地，会把所有分支克隆下来，checkout切换分支即可
每天工作前拉代码，每天工作完成后推代码，每次推送前先拉取再推送。
fork 把别人的远程仓库 搞过来一份。代码开发完成后再给原仓库发起pull requset请求，原仓库审核通过后，就会拉过来。