search

huixisheng / huixisheng.github.com

前端开发者说，记录前端的故事
http://huixisheng.github.io/
12 stars 3 forks source link

Vue源码分析-项目目录结构 #78

Open huixisheng opened 5 years ago

huixisheng commented 5 years ago

对 Vue 的源码分析，目前社区已经有很多，比如Vue.js 技术揭秘 | Vue.js 技术揭秘、answershuto/learnVue: Vue.js 源码解析，而且分析很透彻。然而那都是别人，你只有自己钻研进去，深入进去，迈出第一步，你才会看到不一样的风景。当然你可以站在巨人的肩膀上，感谢互联网那些无私的贡献者们。

在大量的项目中均有实践，对社区的 Vue 组件也做过一点点贡献。终究还是觉得知之甚少，不得不迫使自己更进一步。学无止境，不然仅仅只是文档和 Api 的搬运工，这不是一个作为技术人员的情怀。之前在写组件的时候碰到问题，也粗粗地阅读过相关的代码，并没有全面的深入。这次要花一段时间好好地读读 Vue 的源码，并做好相关的笔记。

希望解决的疑惑:

  1. Vue 用到了哪些技术
  2. 数组是怎么响应的
  3. 复杂的对象是怎么响应的

.circleci Continuous Integration and Delivery - CircleCI 持续集成和持续部署，有点像 Travis CI。用于集成自动化测试和代码 lint

.github 包含代码提交规范、代码贡献指南（有相关的项目接口介绍）、提 issue（ISSUE_TEMPLATE.md）、 pr（PULL_REQUEST_TEMPLATE.md） 模板、代码贡献者的行为准则。

benchmarks 一些代码功能的测试

examples 实践应用的例子。文档中提到的示例 https://cn.vuejs.org/v2/examples/

flow 静态代码检测，Vue 3.x 放弃对 flow 的支持，转向 TypeScript，由于迁移成本大，Vue 2.x 保留 flow。

packages 包含 vue-server-renderer、vue-template-compiler、weex-template-compiler、weex-vue-framework ，属于自动生成的包，源码在 src/platforms/ 。用于 vue、weex 的模板编译，weex web render，Node.js server-side rendering。

scripts构建脚本、相关构建配置、git hooks 配置

src 源码

test 代码的单元测试

types TypeScript 声明

.babelrc.js babel 配置文件。@babel/plugin-proposal-class-properties · Babel tc39/proposal-static-class-features: The static parts of new class features, in a separate proposal 用来支持class属性。 @babel/plugin-transform-flow-strip-types · Babel Flow | 运行 Flow 代码 移除 Flow 注解。 @babel/preset-env Env preset | Babel中文网 Webpack 4 与 Babel/preset-env 升级不完全指南 · Issue #14 · zchen9/code

  • presets 设置从原来的 env 换成了 @babel/preset-env，配置目标使用 target 字段配置，包含 ES Modules、Node、Browsers 等。其中浏览器配置支持 Browserslist 配置，即配置 .browserslistrc 文件

vuejs/babel-plugin-transform-vue-jsx: babel plugin for vue 2.0 jsx 新版修改为@vue/babel-plugin-transform-vue-jsx - npm。用于支持 JSX

@babel/plugin-syntax-dynamic-import · Babel 用来解析 import() 语法。code splitting

.editorconfig 统一编辑器代码风格

.eslintignore 忽略 eslint 检测

.eslintrc.js eslint 配置。

babel/babel-eslint: A wrapper for Babel's parser used for ESLint 一个对Babel解析器的包装，使其能够与 ESLint 兼容。

ecmaVersion - 默认设置为3，5（默认）， 你可以使用 6、7、8 或 9 来指定你想要使用的 ECMAScript 版本。你也可以用使用年份命名的版本号指定为 2015（同 6），2016（同 7），或 2017（同 8）或 2018（同 9） http://eslint.cn/docs/user-guide/configuring

sourceType - 设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)。

gajus/eslint-plugin-flowtype: Flow type linting rules for ESLint.

env.es6 - 启用除了 modules 以外的所有 ECMAScript 6 特性（该选项会自动设置 ecmaVersion 解析器选项为 6）

使用 "extends": "eslint:recommended" 来启用推荐的规则，报告一些常见的问题，在下文中这些推荐的规则都带有一个标记。 https://cn.eslint.org/docs/rules/ https://eslint.org/docs/rules/

eslint-plugin-flowtype/recommended.json at master · gajus/eslint-plugin-flowtype

以下配置做了关闭

.flowconfig flow 的配置文件，这里不展开。

.gitignore git 忽略配置文件。有意思的是有 explorations、TODOs.md、RELEASE_NOTE*.md 作者也是做了很多的准备工作。

BACKERS.md 赞助商和支持们

LICENSE MIT 开源协议。如何选择开源许可证？ - 阮一峰的网络日志

package.json

额外字段: "module": "dist/vue.runtime.esm.js", 定义一个针对 es6 模块及语法的入口文件。 "typings": "types/index.d.ts", 定义一个针对 TypeScript 的入口文件。 "jsdelivr": "dist/vue.js", Features - jsDelivr "unpkg": "dist/vue.js", 让 npm 上所有的文件都开启 cdn 服务。

"sideEffects": false,

并不是我这个模块真的没有副作用，而只是为了在摇树时告诉 webpack：我这个包在设计的时候就是期望没有副作用的，即使他打完包后是有副作用的，webpack 同学你摇树时放心的当成无副作用包摇就好啦！。Webpack 中的 sideEffects 到底该怎么用？ - 知乎

  "gitHooks": {
    "pre-commit": "lint-staged",
    "commit-msg": "node scripts/verify-commit-msg.js"
  },

yorkie 的配置，用于执行 git 的钩子

pre-commit 钩子在键入提交信息前运行。 它用于检查即将提交的快照，例如，检查是否有所遗漏，确保测试运行，以及核查代码。 如果该钩子以非零值退出，Git 将放弃此次提交，不过你可以用 git commit --no-verify 来绕过这个环节。 你可以利用该钩子，来检查代码风格是否一致（运行类似 lint 的程序）、尾随空白字符是否存在（自带的钩子就是这么做的），或新方法的文档是否适当。 https://git-scm.com/book/zh/v2/%E8%87%AA%E5%AE%9A%E4%B9%89-Git-Git-%E9%92%A9%E5%AD%90

commit-msg 钩子接收一个参数，此参数即上文提到的，存有当前提交信息的临时文件的路径。 如果该钩子脚本以非零值退出，Git 将放弃提交，因此，可以用来在提交通过前验证项目状态或提交信息。 在本章的最后一节，我们将展示如何使用该钩子来核对提交信息是否遵循指定的模板。

  "lint-staged": {
    "*.js": [
      "eslint --fix",
      "git add"
    ]
  },

对提交区的文件 eslint，并自动修复

"config.commitizen": 规范 git commit msg。使用 npm run commit 代替 git commit

"scripts" 页面预览，发布，单元测试的脚本入口

README.md Vue 项目说明文件。勋章 Shields.io: Quality metadata badges for open source projects 云测试服务 Sauce Labs | Login 捐赠平台 https://opencollective.com 项目贡献者们 https://opencollective.com/vuejs/contributors.svg?width=890

yarn.lock yarn 的版本锁定文件，看来是推荐使用 yarn

参考