mxydl2009的博客

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

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

为什么要有规范标准开发需要多人协同开发者不同的编码喜好统一标准，降低维护成本哪里需要规范化标准代码、文档、日志开发过程中的人为成果代码标准化决定项目质量，最为重要如何实施规范化人为的标准约定通过工具实现LintESLint安装安装：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-appVue项目vue-cliAngular项目angular-cliYeoman通用型脚手架工具Plop创建一个组件/模块所需要的文件（类似于Yeoman的sub-generator）Yeoman基本使用全局安装yeoman：npm install yo -g全局安装generator：安装项目对应的generator包，让yeoman运行generator包来创建项目基本结构。yeoman + generator包