mxydl2009的博客

手写一个简单的类似webpack的打包器 打包流程说明： 定义依赖分析函数，通过读取文件内容，分析得到该文件导入的依赖项 code => AST => 得到导入声明,记录导入声明中的依赖项路径 => AST->code => 返回记录当前文件filename、依赖项dependencies和转译后的code的对象 定义分析依赖图列表的函数，传入项目的入口文件，递归调用依赖分析函数，得到所有文件的依赖关系图列表，返回该列表。 核心在于如何递归调用依赖分析函数，这里使用广

封装Vue组件 组件库开发 很多项目都会用到界面和功能相似的组件，为了能在不同项目中最大程度重用组件，所以会进行组件库开发，以提供不同项目基础的组件 开源组件库 Element-UI iView 组件驱动开发CDD Component-Driven Development 自下而上构建UI 从组件开始，到页面结束：先隔离开发组件，再组合成页面 组件最大程度重用 并行开发 可视化测试 组件边界情况的处理 组件可以访问$root属性，获取到当前组件树的根Vue实例，如果当前组件没有父实

为什么要有规范标准 开发需要多人协同 开发者不同的编码喜好 统一标准，降低维护成本 哪里需要规范化标准 代码、文档、日志 开发过程中的人为成果 代码标准化决定项目质量，最为重要 如何实施规范化 人为的标准约定 通过工具实现Lint ESLint 安装 安装：npm install eslint -D，安装后就会在node_modules/.bin/下有一个CLI程序。 使用 先配置，再检查 使用eslint --init生成配置文件，可以是JavaScript，也可以是JSON文件。 使用npx

Rollup：打包ESM 主要面向打包JavaScript类库。 使用方法 安装npm install rollup -D，同时在node_modules/.bin/目录下会安装有CLI程序。 使用npx rollup <entry file> --format <module type> --file <output file>来对指定的入口文件进行打包，其中–format后面的<module type>指定打包后的模块遵循的模块规范（如iife – 立即

打包：从开发到生产 解决ES Module的浏览器兼容问题，编译ES6+到ES5 解决模块请求频繁的问题，模块打包成一个文件 资源都需要模块化，管理所有资源的依赖关系，便于业务代码与相关资源的统一维护 打包工具 作用：使用模块化为开发环境提供便利，使用打包为生产环境提供效率。 Webpack：打包所有资源 webpack的执行是node环境，因此相对路径必须要用./开头，不能省略。 配置文件 webpack会运行配置文件，拿到配置文件导出的配置对象，有多种导出配置对象的方式 直接导出配置对象modul

模块化演进 阶段一：文件即模块，使用<script>标签引入 污染全局作用域 命名冲突 无法管理模块依赖关系 阶段二：命名空间方式，文件暴露一个全局对象，所有方法挂载到全局对象上形成命名空间 缓解命名冲突，但无法避免 没有私有属性，从而无法避免出现私有属性值被不小心更改的情况 依赖关系仍然无法管理 阶段三：IIFE立即执行函数表达式，可以给全局对象上挂载属性来暴露接口，也可以返回一个对象来暴露接口。 私有成员得到保证 通过IIFE传递参数，可以在一定意义上管理依赖关系。如 ;(fun

自动化构建 源代码自动转换为生产环境代码 NPM Scripts脚本实现自动化 利用npm scripts脚本实现自动化，npm scripts原理参照阮一峰老师博客 钩子机制实现构建流： pre-<name>：该命令在name命令之前先启动 post-<name>：该命令在name命令之后才启动 npm-run-all模块：同时并行执行多个脚本命令，如npm-p build serve同时启动build和serve脚本命令 常用自动化构建工具 gulp：基于虚拟文件对象

脚手架工具 常用脚手架工具 React项目create-react-app Vue项目vue-cli Angular项目angular-cli Yeoman通用型脚手架工具 Plop创建一个组件/模块所需要的文件（类似于Yeoman的sub-generator） Yeoman 基本使用 全局安装yeoman：npm install yo -g 全局安装generator：安装项目对应的generator包，让yeoman运行generator包来创建项目基本结构。yeoman + generator包