“not ie <=8” :表示IE浏览器版本大于8(实则用npx browserslist 跑出来不包含IE9 )
“safari >=7”:表示safari浏览器版本大于等于7
五、.gitignore的用法
Git忽略文件.gitignore详解
在工程中,并不是所有文件都需要保存到版本库中的,例如“target”目录及目录下的文件就可以忽略。在Git工作区的根目录下创建一个特殊的.gitignore文件,然后把要忽略的文件名填进去,Git就会自动忽略这些文件或目录。
规则:
* 空格不匹配任意文件,可作为分隔符,可用反斜杠转义
* 开头的文件标识注释,可以使用反斜杠进行转义
* ! 开头的模式标识否定,该文件将会再次被包含,如果排除了该文件的父级目录,则使用 ! 也不会再次被包含。可以使用反斜杠进行转义
* / 结束的模式只匹配文件夹以及在该文件夹路径下的内容,但是不匹配该文件
* / 开始的模式匹配项目跟目录
* 如果一个模式不包含斜杠,则它匹配相对于当前 .gitignore 文件路径的内容,如果该模式不在 .gitignore 文件中,则相对于项目根目录
* ** 匹配多级目录,可在开始,中间,结束
* ? 通用匹配单个字符
* * 通用匹配零个或多个字符
* [] 通用匹配单个字符列表
实例:
bin/: 忽略当前路径下的bin文件夹,该文件夹下的所有内容都会被忽略,不忽略 bin 文件
/bin: 忽略根目录下的bin文件
/*.c: 忽略 cat.c,不忽略 build/cat.c
debug/*.obj: 忽略 debug/io.obj,不忽略 debug/common/io.obj 和 tools/debug/io.obj
**/foo: 忽略/foo, a/foo, a/b/foo等
a/**/b: 忽略a/b, a/x/b, a/x/y/b等
!/bin/run.sh: 不忽略 bin 目录下的 run.sh 文件
*.log: 忽略所有 .log 文件
config.php: 忽略当前路径的 config.php 文件
六、babel.config.js配置文件详解
1. Babel 相当于一个中介,
一边是用户,另一边是浏览器。这几年,JavaScript 发生了很大的变化,许多新特性在很多浏览器里都不支持。
Babel 的主要作用就是规避这些问题,可以确保 JavaScript 代码兼容所有的浏览器,比如 IE 11。
2. Babel 的工作原理
Babel 使用 AST 把不兼容的代码编译成 ES15 版本,因为大多数浏览器都支持这个版本的 JavaScript 代码。
七、jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
// 解决项目中使用@作为路径别名,导致vscode无法跳转文件的问题
"@/*": ["src/*"]
},
// 解决prettier对于装饰器语法的警告
"experimentalDecorators": true,
// 解决.jsx文件无法快速跳转的问题
"jsx": "preserve"
},
//提高 IDE 性能
"exclude": ["node_modules", "dist", "build"]
}
exclude 为什么 提高 编译器 性能 ?
如果开发的项目根目录下没有 jsconfig.json,在默认情况下,像 VS Code, 默认不会把 node_modules文件夹排除掉。
官方给出建议是这样的:
只要有可能,您应该使用不属于项目源代码的JavaScript文件排除文件夹。
意思就是 与开发无关的文件可以让 IDE 全部在编译时排除掉,像上面的配置中就排除了,构建过程依赖文件(node_modules)和生成的文件(dist 目录) 排除这些文件,可以提高 vscode 的性能。。
八、package.json与package-lock.json
package.json
记录当前项目所依赖模块的版本信息,更新模块时锁定模块的大版本号(版本号的第一位),不能锁定后面的小版本,
package-lock.json
package-lock.json 是在 npm install
时候生成一份文件。记录了node_modules目录下所有模块(包)的名称、版本号、下载地址、及这个模块又依赖了哪些依赖。
两者区别:
npm5以前
npm5以前,没有package-lock.json这个文件。package.json文件会记录你项目中所需要的所有模块。当你执行npm install的时候,node会先从package.json文件中读取所有dependencies信息,然后根据dependencies中的信息与node_modules中的模块进行对比,没有的直接下载,已有的检查更新。
因为package.json只能锁定模块的大版本号(版本号的第一位),不能锁定后面的小版本,所以你每次重新npm install时候拉取的都是该大版本下面最新的版本。一般我们为了稳定性考虑我们不能随意升级依赖包,因为如果换包导致兼容性bug出现很难排查,这样很容易出现问题,所以package-lock.json就是来解决包锁定不升级问题的
另外,package.json文件只记录你通过npm install方式安装的模块信息,而这些模块所依赖的其他子模块的信息不会记录。
npm5以后
package-lock.json文件锁定所有模块的版本号,包括主模块和所有依赖子模块。当你执行npm install的时候,node从package.json文件读取模块名称,从package-lock.json文件中获取版本号,然后进行下载或者更新。
因此,正因为有了package-lock.json文件锁定版本号,所以当你执行npm install的时候,node不会自动更新package.json文件中的模块,必须用npm install packagename@x.x.x(指定版本号)来进行安装才会更新,package-lock.json文件中的版本号也会随着更新。
package-lock.json的作用
如果重新 npm install 的时候以及当node_modules文件夹并不存在或被删除时,需要用到npm install重新装载全部依赖时,通过package-lock.json可以直接表明下载地址和相关依赖,就无需再从package.json逐个分析包的依赖项,因此会大大加快安装速度,package-lock.json目的就是确保所有库包与你上次安装的完全一样。
如果要升级package-lock.json里面的库包
npm install XXX@x.x.x
九、vue.config.js
vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。
比较常见的配置项有:
baseUrl ( publicPath )
部署应用包时的基本 URL。
outputDir
当运行 vue-cli-service build 时生成的生产环境构建文件的目录。
assetsDir
放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
pages
在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。
lintOnSave
总结:
-
函数式编程其实是一种编程思想,它追求更细的粒度,将应用拆分成一组组极小的单元函数,组合调用操作数据流;
-
它提倡着 纯函数 / 函数复合 / 数据不可变, 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用;
Tips:
其实我们很难也不需要在面试过程中去完美地阐述出整套思想,这里也只是浅尝辄止,一些个人理解而已。博主也是初级小菜鸟,停留在表面而已,只求对大家能有所帮助,轻喷🤣;
我个人觉得: 这些编程范式之间,其实并不矛盾,各有各的 优劣势。
理解和学习它们的理念与优势,合理地 设计融合,将优秀的软件编程思想用于提升我们应用;
所有设计思想,最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用,开发更为高效和安全;