模块化、组件化、规范化、自动化

模块化

后期的模块化才算是真正的模块化，它包括CJS、AMD、CMD、UMD和ESM，经过多年演变，目前Web开发倾向于ESM，Node开发倾向于CJS。

使用以下目录结构将整个项目划分为各种通用模块

Web项目``SPA/MPA

project
├─ dist          # 输出目录
│  ├─ prod         # 生产环境执行代码
│  └─ test         # 测试环境执行代码
├─ src           # 源码目录
│  ├─ apis         # 接口模块：包括全局接口请求的功能，控制数据定向转换
│  ├─ assets       # 资源模块：包括样式、脚本、字体、图像、音频、视频等资源文件
│  ├─ components   # 组件模块：包括全局通用的基础组件、皮肤主题和字体图标
│  ├─ layouts      # 布局模块：包括以布局为最小粒度的组件集合，由至少一个基础组件组成
│  ├─ flows        # 流程模块：包括以流程为最小粒度的组件集合，由至少一个基础组件组成
│  ├─ pages        # 页面模块：包括以页面为最小粒度的组件集合，由至少一个基础组件组成
│  ├─ routes       # 路由模块：包括全局页面跳转的功能，控制页面自由切换
│  ├─ stores       # 数据模块：包括全局数据状态的功能，控制数据驱动视图
│  ├─ views        # 视图模块：包括以视图为最小粒度的组件集合，由至少一个基础组件组成
│  ├─ utils        # 工具模块：包括全局通用的常量与方法
│  ├─ index.html   # 模板入口文件
│  ├─ index.js     # 脚本入口文件
│  └─ index.scss   # 样式入口文件
└─ package.json

Node项目``接口系统

project
├─ dist          # 输出目录
│  ├─ prod         # 生产环境执行代码
│  └─ test         # 测试环境执行代码
├─ src           # 源码目录
│  ├─ assets       # 资源模块：包括样式、脚本、字体、图像、音频、视频等资源文件
│  ├─ models       # 模型模块：包括全局数据模型的功能
│  ├─ routes       # 路由模块：包括全局接口请求的功能
│  ├─ utils        # 工具模块：包括全局通用的常量与方法
│  └─ index.js     # 脚本入口文件
└─ package.json

运行时加载指整体加载模块生成一个对象，再从对象中获取所需的属性方法去加载。最大特性是全部加载，只有运行时才能得到该对象，无法在编译时做静态优化。
编译时加载指直接从模块中获取所需的属性方法去加载。最大特性是按需加载，在编译时就完成模块加载，效率比其他方案高，无法引用模块本身(本身不是对象)，但可拓展JS高级语法(宏与类型校验)。

生成package.json文件

要生成一个 package.json 文件，您可以使用 Node.js 的 npm init 命令。这个命令会引导您填写一些项目相关的信息，并自动生成一个新的 package.json 文件。

以下是使用步骤：
打开命令行窗口（Linux 或 MacOS 上打开终端）
在需要创建 package.json 文件的目录下，输入以下命令并按下回车键：
复制代码
npm init
这时候命令行会提示您输入一些关于项目的信息。您需要根据提示输入相关信息，例如项目名称、版本号、描述、入口文件等等。如果您不确定如何回答某个问题，可以直接按下回车键，系统将采用默认值。

输入完所有信息后，npm init 命令会要求您确认所输入的信息。如果一切都符合您的期望，输入 yes 并按下回车键即可。

系统随即会在当前工作目录下生成一个名为 package.json 的文件，包含您输入的所有信息。

CJS与ESM这两种模块规范

commonjs模块化规范：运行时加载，简单来说就是在js运行阶段(v8执行js时)通过同步的方法进行加载

在 package.json 中，增加 "type": "module" 配置；

目录结构

.
├── index.js
├── package.json
└── utils
    └── speak.js

// utils/speak.js
export function speak() {
    console.log('Come from speak.')
}

// index.js
import { speak } from './utils/speak.js';
speak(); //come from speak

在 .mjs 文件可以直接使用 import 和 export；

.
├── index.mjs
├── package.json
└── utils
    └── sing.mjs

// utils/sing.mjs
export function sing() {
    console.log('Come from sing')
}

// index.mjs
import { sing } from './utils/sing.mjs';
sing(); //come from sing

组件化

提升复用性，高内聚低耦合数据流的正向传递与反向传递

规范化

自动化整体重心偏向于构建，构建为工程服务，工程又为用户服务，因此一个项目会演化出至少两种运行环境，分别是与。其中开发环境工程为开发者服务，生产环境工程为用户服务。开发环境生产环境

部署VSCode的代码格式化，保存代码时一键校验

eslint部分配置与prettier部分配置存在冲突且互相影响
VSCode只需安装Stylelint与Eslint两个插件

安装依赖

Stylelint的配置文件可同时校验html/css/scss/less/vue文件，Eslint需配置不同文件分别校验html/js/ts/jsx/tsx/vue文件。两个插件可在settings.json中通过指定字段覆盖默认配置。

执行以下命令安装@yangzw/bruce-std

npm i -g @yangzw/bruce-std

提交规范

Angular提交规范的格式包括Header、Body和Footer三个内容。Header为必填项，Body与Footer为可缺省项，这些内容通过以下结构组成一个完整的提交格式。

<type>(<scope>): <subject>
# 空一行
<body>
# 空一行
<footer>

Header

该部分仅书写一行，包括三个字段，分别是type、scope和subject。

type：用于说明commit的提交类型，必选
scope：用于说明commit的影响范围，可选
subject：用于说明commit的细节描述，可选

企业微信截图_16856122028309.png scope用于说明commit的影响范围。简要说明本次改动的影响范围，例如根据功能可划分为数据层、视图层和控制层，根据交互可划分为组件、布局、流程、视图和页面。从Angular以往的提交说明来看，还是建议你在提交时对scope补全。

subject用于说明commit的细节描述。文字一定要精简精炼，无需太多备注，因为Body部分可备注更多细节，同时尽量遵循以下规则。

以动词开头
使用第一人称现在时
首个字母不能大写
结尾不能存在句号(.)

Body

该部分可书写多行，对subject做更详尽的描述，内容应包括改动动机与改动前后对比。

Footer

该部分只适用两种情况，分别是不兼容变动与问题关闭。

不兼容变动：当前代码与上一版本不兼容，则以BREAKING CHANGE开头，关联变动描述、变动理由和迁移方法
问题关闭：当前代码已修复某些Issue，则以Closes开头，关联目标Issue commitizen commitizen是一个基于模板驱动的约束规范工具，可扩展性很强，因此推荐使用commitizen。

方案：部署G

围绕

前后端分离技术选型重构封装工程设计

268296e49cbe4af682a8edb6e6743445~tplv-k3u1fbpfcp-zoom-in-crop-mark_3024_0_0_0.awebp

模块规范：在Node环境中运行ESM，可行吗？

Node无法直接使用ESM编码。本章将带领你部署Node的ESM开发环境，无需关注JS运行环境涉及模块方案的差异性，让Node开发也变得像Web开发那样丝滑。

前端工程学习-0到1