前端基础知识总结(五)--前端工程化

做梦都在学习前端
172 阅读8分钟

前端基础知识总结(五)--前端工程化

目的：方便自己整体复习前端的基础知识。
资源：在鱼皮整理的前端学习路线的基础上结合自身对相关知识的掌握程度进行的总结。

Node.JS

中文文档

package.json

参考资料

（一）、描述配置

主要是项目的基本信息，包括名称，版本，描述，仓库，作者等，部分会展示在 npm 官网上。

  1. name：项目的名称，不能以"."和"_"开头，不能包含大写字母。
  2. version：项目的版本号，开源项目的版本号通常遵循 semver 语义化规范,格式为：大版本号.次版本号.修订号。
  3. repository：项目的仓库地址以及版本控制信息。
  4. description：项目的描述，会展示在 npm 官网，让别人能快速了解该项目。
  5. keywords：一组项目的技术关键词。
  6. homepage：项目主页的链接，通常是项目 github 链接，项目官网或文档首页。
  7. bugs：项目 bug 反馈地址，通常是 github issue 页面的链接。
  8. license：项目的开源许可证。项目的版权拥有人可以使用开源许可证来限制源码的使用、复制、修改和再发布等行为。常见的开源许可证有 BSD、MIT、Apache 等。
  9. author：项目作者。
  10. funding：指定项目的资金支持方式和链接。

（二）、文件配置

包括项目所包含的文件，以及入口等信息。

  1. files：项目在进行 npm 发布时，可以通过 files 指定需要跟随一起发布的内容来控制 npm 包的大小，避免安装时间太长。发布时默认会包括 package.json，license，README 和 main  字段里指定的文件。忽略 node_modules，lockfile 等文件。

  2. type：node 使用模块方案。module--ES 模块，commonjs--CommonJS 模块规范(默认)。

  3. main：指定的是项目的入口文件，如果不设置 main 字段，那么入口文件就是根目录下的 index.js。

  4. browser：main 字段里指定的入口文件在 browser 和 Node 环境中都可以使用。如果只想在 web 端使用，不允许在 server 端使用，可以通过 browser 字段指定入口。

  5. module：指定 ES 模块的入口文件，当一个项目同时定义了 main，browser 和 module，像 webpack，rollup 等构建工具会感知这些字段，并会根据环境以及不同的模块规范来进行不同的入口文件查找。

  6. exports：node 在 14.13 中 exports 字段可以配置不同环境对应的模块入口文件，并且当它存在时，它的优先级最高。

  7. workspaces：项目的工作区配置，用于在本地的根目录下管理多个子项目。

（三）、脚本配置

  1. scripts：指定项目的一些内置脚本命令，这些命令可以通过 npm run 来执行。通常包含项目开发，构建 等 CI 命令。
  2. config：用于设置 scripts 里的脚本在运行时的参数。

（四）、依赖配置

  1. dependencies：运行依赖，也就是项目生产环境下需要用到的依赖。比如 react，vue，状态管理库以及组件库等。使用 npm install xxx 或则 npm install xxx --save 时，会被自动插入到该字段中。
  2. devDependencies：开发依赖，项目开发环境需要用到而运行时不需要的依赖，用于辅助开发，通常包括项目工程化工具比如 webpack，vite，eslint 等。使用 npm install xxx -D 或者 npm install xxx --save-dev 时，会被自动插入到该字段中。
  3. peerDependencies：同伴依赖，一种特殊的依赖，不会被自动安装，通常用于表示与另一个包的依赖与兼容性关系来警示使用者。
  4. optionalDependencies：可选依赖，它不会阻塞主功能的使用，安装或者引入失败也无妨。这类依赖如果安装失败，那么 npm 的整个安装过程也是成功的。使用 npm install xxx -O 或者 npm install xxx --save-optional 时，依赖会被自动插入到该字段中。
  5. peerDependenciesMeta：同伴依赖也可以使用 peerDependenciesMeta 将其指定为可选的。
  6. bundleDependencies：打包依赖。它的值是一个数组，在发布包时，bundleDependencies 里面的依赖都会被一起打包。，这个字段数组中的值必须是在 dependencies，devDependencies 两个里面声明过的依赖才行。
  7. overrides：overrides 可以重写项目依赖的依赖，及其依赖树下某个依赖的版本号，进行包的替换。

（五）、发布配置

主要是和项目发布相关的配置。

  1. private：如果是私有项目，不希望发布到公共 npm 仓库上，可以将 private 设为 true。
  2. publishConfig： npm 包发布时使用的配置。

（六）、系统配置

和项目关联的系统配置，比如 node 版本或操作系统兼容性之类。这些要求只会起到提示警告的作用，即使用户的环境不符合要求，也不影响安装依赖包。

  1. engines： node 或者包管理器特定的版本号要求。
  2. os：在 linux 上能正常运行的项目可能在 windows 上会出现异常，使用 os 字段可以指定项目对操作系统的兼容性要求。
  3. cpu：指定项目只能在特定的 CPU 体系上运行。

（七）、第三方配置

一些第三方库或应用在进行某些内部处理时会依赖这些字段，使用它们时需要安装对应的第三方库。

  1. types 或者 typings：指定 TypeScript 的类型定义的入口文件。
  2. unpkg：可以让 npm 上所有的文件都开启 CDN 服务。
  3. jsdelivr：与 unpkg 类似。
  4. browserslist：设置项目的浏览器兼容情况。也可以使用 .browserslistrc 单文件配置。
  5. sideEffects：显示设置某些模块具有副作用，用于 webpack 的 tree-shaking 优化。
  6. lint-staged：用于对 git 的暂存区的文件进行操作的工具，比如可以在代码提交前执行 lint 校验，类型检查，图片优化等操作。

包管理

npm

npm（Node Package Manager）是 Node.js 的默认包管理器，用于安装和管理 Node.js 应用程序的依赖项。

npm install: 用于安装新的包。如果你在项目的 package.json 文件中声明了依赖，使用此命令会自动安装所有声明的依赖包。

  • -g 或--global: 在全局范围内安装一个包。例如，全局安装 Express 框架：npm install -g express。
  • -D 或--save-dev：将某个模块作为开发依赖（devDependencies）安装。
  • -S 或--save：将某个模块作为生产依赖（dependencies）安装。

pnpm

pnpm（performant npm）是一个高性能的 JavaScript 包管理器，它使用了一个称为“内容寻址存储”的技术来避免包的重复安装。

npm install -g pnpm

npx

npx 则是 Node.js 官方提供的一个工具，它是 npm v5.2.0 版本引入的一个命令。npx 的主要作用在于执行 Node 软件包。npm 主要关注包的长期管理和维护，而 npx 则侧重于临时执行 Node 软件包。

JavaScript 框架

Vue

Vue2 中文文档

Vue3 中文文档

Vue CLI

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。

Vue CLI 中文文档

Vite

Vite 中文文档

代码质量

开发规范

类型校验

TypeScript

TypeScript 是 JavaScript 的一个超集，添加了静态类型、类、接口和模块等特性。

代码检查

ESLint

ESLint 是一个强大的代码检查工具，它的主要作用是统一团队的代码风格规则，减少错误，提高代码质量，并处理其他与代码风格和质量相关的问题。

ESLint 支持多种格式的配置文件，如.eslintrc.js、.eslintrc.yaml、.eslintrc.json 等，也可以在 package.json 中创建一个 eslintConfig 属性来定义配置。当.eslintrc.js 和 package.json 中的 eslintConfig 同时存在时，ESLint 只会读取.eslintrc.js 文件。

StyleLint

StyleLint 是一个强大的现代 CSS 检测器（linter），主要用于帮助开发者规避 CSS 代码中的错误，并保持一致的编码风格。通过 StyleLint，开发者可以确保 CSS 样式表的描述清晰、规则统一，从而避免因样式混乱或没有规则而导致的潜在问题。可以创建.stylelintrc.js 配置文件来定义 StyleLint 的规则和选项。

测试

Web 服务器

Nginx

Nginx 是一个开源的高性能 HTTP 和反向代理服务器。它可以用于处理静态资源、负载均衡、反向代理和缓存等任务。

配置跨域请求

server {
    listen   80;
    location / {
        # 服务器默认是不被允许跨域的。
        # 配置`*`后，表示服务器可以接受所有的请求源（Origin）,即接受所有跨域的请求
        add_header Access-Control-Allow-Origin *;
        
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
        
        # 发送"预检请求"时，需要用到方法 OPTIONS ,所以服务器需要允许该方法
        # 给OPTIONS 添加 204的返回，是为了处理在发送POST请求时Nginx依然拒绝访问的错误
        if ($request_method = 'OPTIONS') {
            return 204;
        }
    }
}

容器

Docker

Docker 是一个开源的应用容器引擎，它允许开发者将他们的应用及其依赖包打包到一个可移植的镜像中，然后发布到任何流行的 Linux 或 Windows 操作系统的机器上，实现虚拟化。

拓展学习资源

框架模板

优秀的 Vue3 开源后台模板推荐

Vue Pure Admin

Vue Vben Admin

avatar
文章
阅读
粉丝