Mini-vue pre-installation preparations are realized

preface

This section code demonstration address, with the source code to eat more appetizing oh!

To implement mini-Vue by hand, we need to know some pre-knowledge before implementation:

  • Vue3 new features
  • TDD test-driven development

Vue3 new features

  • Performance is about 2 times faster than Vue 2.x
  • Tree Shaking Compile on demand, static node tags, event listening caches, etc
  • Fragments, Teleport, Suspense more advanced components
  • Composition combination API
  • Vue3 uses a proxy data proxy, while Vue2 uses Object.defineProperty for data hijacking
  • Better Ts support
  • The Custom Renderer API exposes the Custom rendering API
  • Vue3 source code using Monorepo management, to achieve the transformation from module management to package management

TDD test-driven development

Test-Driven Development

TDD is a workflow for developing test and business code that allows you to write code with extremely high test coverage (often close to 90%). TDD also reduces the likelihood of finding bugs that are difficult to locate during testing.

The general process of TDD is:

  • Write a test to run the test
  • See the expected failure to write as little business code as possible
  • Let the test repeat this process over and over again by refactoring the code

TDD is one approach to unit testing, and BDD — Behavior-Driven Development

Read the article in about 10 minutes.

Vue3 Project description

monorepo

Monorepo is a way of managing code by managing multiple packages under a project repository (REPO), that is, maintaining multiple packages in a repository.

  • Advantages: Easy version management, dependency management, and inter-module references
  • Cons: The warehouse gets bigger

directory

  • Compiler-core: Platform-independent compiler core
  • Compiler-dom: a compiler module for browsers
  • Compiler-sfc: resolves to a single file
  • Compiler-ssr: a compiler module for server rendering
  • Reactivity: Responsive system, core
  • Run-time core: Platform-independent runtime core
  • Runtime-dom: runtime for the browser. This includes DOM apis, properties, event handling, and more
  • Run-time test: used for testing
  • Server-renderer: Used for server-side rendering
  • Size-check: Used to test code size
  • Shared: Content shared between multiple packages
  • Template-explorer: a development tool for debugging compiler output
  • Vue: Full version, including runtime and compiler

To read the source code, you can start with ReActivity, which has a single test for each function

TDD project preparation

Jestjs. IO/zh-hans /doc…

  • Install vscode plug-ins: Jest, Jest Runner, and Jest Snippets
    • Once installed, the run logo is visible in the xxx.test.js file before each single test
    • Click to run the single test
  • yarn init -y
    • Start with a package.json
  • yarn add –dev jest
    • Install the jest
    • Add –dev, which is only used in development environments
  • Writing test files
  • Install ts configuration file to resolve jEST code block error
    • npx tsc –init
    • Modify json file 
      "lib": ["DOM"."ES6"]./* Specify library files to be included in the compilation. */
"noImplicitAny": false /* Raise error on expressions and declarations with an implied 'any' type. */.Copy the code
    • Install the appropriate packages 
      yarn add typescript --dev
yarn add @types/jest --dev
Copy the code
// hello.js
module.exports = () = > 'Hello world'

// hello.test.js
let hello = require('hello.js')

test('should get "Hello world"'.() = > {
    expect(hello()).toBe('Hello world') // The test succeeded
    // expect(hello()).tobe (' hello ') // Test fails
})
Copy the code

Jest runs in the Node environment and supports commonJs, so js uses module.exports and requires require imports.

Use the EMS configuration method

  • Babel translation
    • The installation
      • yarn add –dev babel-jest @babel/core @babel/preset-env
    // babel.config.js
module.exports = {
  presets: [['@babel/preset-env', { targets: { node: 'current'}}].'@babel/preset-typescript']};// compile to nodeJS code
Copy the code
  • Node 14 itself, add the corresponding field to support 
    // package.json
{
  "type": "module"."scripts": {
     "test": "NODE_OPTIONS=--experimental-vm-modules jest"}}Copy the code

NPM I cross-env = “test”: “cross-env NODE_OPTIONS=”

// sum.js
export function add(a, b) {
    return a + b;
}

// sun.test.js
import { add } from './add';

test('adds 1 + 2 to equal 3'.() = > {
    expect(add(1.2)).toBe(3);
});
Copy the code

Write in the back

This project is a reference to the mini-Vue author’s project + some thinking of reading vuE-next, re-type mini-Vue in the process of sorting out the document.

The project address

  • Mini-vue:github.com/cuixiaorui/…
  • Vue-next:github.com/vuejs/vue-n…