1. Preparation before learning

The following content comes from The source code read group ~ ~

  • This period is easier than the first period, those who did not finish the notes in the last period can continue to finish the notes and study, and can also communicate in the group.
  • Clone vue-Next project, or my project, install dependencies, package builds
  • Vue3 tool function source juejin.cn/post/699497…
  • Github.com/lxchuan12/v…
  • Github1s.com/lxchuan12/v…
  • Git clone github.com/vuejs/vue-n…
  • Git clone github.com/lxchuan12/v…

1.1 HERE I go

step1:

    git clone https://github.com/vuejs/vue-next.git
Copy the code

Listen to Chuan Chuan and check out the version

admin@ayuandeMacBook-Pro vue-next % node -v
v10.19.0
admin@ayuandeMacBook-Pro vue-next % yarn -v 
zsh: command not found: yarn
Copy the code

There’s no YARN. Make arrangements

    npm install --global yarn
    
Copy the code

OK:

admin@ayuandeMacBook-Pro vue-next % yarn build
yarn run v1.22.11
    
Copy the code

All in place: the result… NPM install??

NPM run build??

Yarn install?? No response, has been reporting errors, mentality explosion, carefully examine the topic is very important, look at the document is the same!

Later found that silly baji of all wrong, people chuan Chuan so detailed article wrote (quickly copy over to take notes) :

In order to reduce the difficulty of the article, I packaged ts into JS as described in the contribution guide. If you need to package, you can also refer to the package Build below.

You need to make sure the node. js version is 10+ and the yarn version is 1.x yarn 1.x.

The node.js version you have installed is probably less than 10. The easiest way is to go to the official website and reinstall. You can also use NVM to manage node.js versions

Node - v # # # v14.16.0 global installation yarn recommended clone git clone https://github.com/lxchuan12/vue-next-analysis.git CD I project Vue - next - analysis/vue - next # or official cloning project git clone https://github.com/vuejs/vue-next.git CD vue - next NPM install - global yarn yarn # install the dependencies of the project yarn buildCopy the code

After installing YARN, you only need to perform the following operations:

yarn

yarn build

Copy the code

Finally, we successfully packaged ts into JS. Absolutely absolutely son, think impassability oneself waste a lot of time in this relatively what strength!

1.2 Installation Environment Summary of episode:

My previous version of Node is V.10.x, some advanced things need a higher version, in order not to install different versions of Node back and forth, I need to use NVM tools!! But I didn’t install it on my Mac, so there’s the following summary of operations under the mask of pain

1. For MacOS, NVM Node version management tool needs to be installed to facilitate node version change.

Macos must uninstall NPM and Node before installing NVM.

3. After uninstallation, install according to the official website tutorial:

The curl - o - https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bashCopy the code

Results throw SSL_ERROR_SYSCALL in connection to raw.githubusercontent.com: 443 errors, brain kuo pain!

4, search around, say need to modify the hosts file, add DNS domain name configuration: configuration update no result or 443, angry ing (reason: it is said that MAC cannot be installed through external links, also have a kind of saying that is DNS pollution, need to configure host, but the configuration of host is invalid.)

199.232.68.133	raw.githubusercontent.com
Copy the code

5, finally found the effective method: use gitee image installation

Install using a Gitee image

1. Install the NVM
git clone https://gitee.com/mirrors/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`
Copy the code
2. Configure NVM environment variables

A. Go to the. Bash_profile file and set environment variables:

vi ~/.bash_profile
Copy the code

B. Configure environment variables:

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
Copy the code

C. Run the command to take effect:

source ~/.bash_profile
Copy the code

If the shell uses non-ZSH, complete the preceding three steps. If the shell uses ZSH, you need to perform the following steps

How to view a shell:

Echo $SHELL --------- If /bin/zsh is displayedCopy the code

Go to d,

D. ZSH configuration: Open the. ZSHRC file as follows:

vim ~/.zshrc
Copy the code

The configuration information is as follows:

source ~/.bash_profile
Copy the code

Save the configuration and exit the following command to take effect:

source ~/.zshrc
Copy the code

After the preceding configuration, the NVM is successfully configured. You can view the NVM version:

NVM -v 0.38.0Copy the code

Hold your head and cry. Something so simple has finally been assembled for me. !!!!!!!!!

NPM install — Global YARN yarn has not been installed before, and I need to reinstall it. After the operation, I was greeted by another terminal error. I gradually lost my patience, and suddenly remembered my MacOS!! I no longer have access to it.

sudo npm install --global yarn
Copy the code

A fierce operation such as tiger, finally put the vuex-next package fixed, absolutely child, this can feel at ease to see the small tool source, do not charge chuanchuan was I harassment thousands of back to solve the problem ah, well, I want to start to seriously learn to see the source code!

Ii. Key points: tool functions

Saw the article directory vue – next/packages/Shared/SRC/index. The ts in order of the code in this file, then I can to see slowly

1, parsing babelParserDefaultPlugins Babel is the default plug-ins

Let’s copy a source code

/**
 * List of @babel/parser plugins that are used for template expression
 * transforms and SFC script transforms. By default we enable proposals slated
 * for ES2020. This will need to be updated as the spec moves forward.
 * Full list at https://babeljs.io/docs/en/next/babel-parser#plugins
 */
export const babelParserDefaultPlugins = [
  'bigInt',
  'optionalChaining', 
  'nullishCoalescingOperator'
] as const

Copy the code

Const TS = TS; const TS = TS; Type assertion in TS.

After converting to JS, the code is as follows, and by the way, it comes with a translation note:

/** * @babel/ Parser plugin list for template expressions * conversions and SFC script conversions. By default, our enablement plan proposal * the following is for Babel transformation for new ES2020 features. * Detailed Babel plugin list to view: https://babeljs.io/docs/en/next/babel-parser#plugins */ const babelParserDefaultPlugins = [ 'bigInt', / / ES2020 new features' optionalChaining ', / / optional chain `? ` 'nullishCoalescingOperator / / null merge operator `?? `];Copy the code

1.1 Babel parses the default plug-in

1.1.1 bigInt

We have used Number to represent the numbers in JS, the problem is that the largest Number is 2⁵³, and the numbers above that are unreliable.

const x = Number.MAX_SAFE_INTEGER; // 9007199254740991
const y = x + 1; // 9007199254740992 • equal to 2^53
const z = x + 2; // 9007199254740992 • well, it's broken
Copy the code

BigInt provides a way to represent numbers greater than 2⁵³. Created by adding n to the end of the integer

const aBigInteger = 9007199254740993n;
// There is also a constructor:
const evenBigger = BigInt(9007199254740994); // 9007199254740994n
const fromString = BigInt("9007199254740995"); // 9007199254740995n
Copy the code

BigInt usually has the same operation as a number, but cannot be used in conjunction with an operation:

let sum = 1n + 2, multiplication = 1n * 2;
// TypeError: Cannot mix BigInt and other types, use explicit conversions
Copy the code

The constructor Number() can be used to convert BigInt to Number, but precision may be lost in some cases. Therefore, it is recommended to use BigInt only when the corresponding expected value in your code is large.

Number(900719925474099267n); 900719925474099300, / /?????? Came ️Copy the code

@ Babel/plugin – syntax – bigint: website – @ Babel/plugin – syntax – bigint

1.1.2 optionalChaining- Optional chain operator? .

For example, the original traversal object is as follows:

// Checking for intermediate nodes: const deeplyNestedValue = obj && obj.prop1 && obj.prop1.prop2; // Checking if the node exists in the DOM: const fooInputEl = document.querySelector('input[name=foo]'); const fooValue = fooInputEl && fooInputEl.value;Copy the code

With the optional chain operator:

// Checking for intermediate nodes: const deeplyNestedValue = obj? .prop1? .prop2; // Checking if the node exists in the DOM: const fooValue = document.querySelector('input[name=foo]')? .value;Copy the code

The optional chain operator is a short-circuit calculation operation, that is, when the left? . When null or undefined is detected, the expression is stopped

// x is incremented if and only if 'a' is not null or undefined a? .[++x]Copy the code

Use of plugin-proposal-optional-chaining

1.1.3 nullishCoalescingOperator – null merge operator??

When attempting to provide default values when performing property access, the new approach is to use the null-value merge operator. Unlike the or operator, we use the?? To replace the | | operator.

const test = {
  null: null,
  number: 0,
  string: '',
  boolean: false
};
const undefinedValue = test.dog || "Cat"; // "Cat"
const undefinedValue = test.dog ?? "Cat"; // "Cat"const nullValue = test.null || "Default"; // "Default"
const nullValue2 = test.null ?? "Default"; // "Default"const numberValue = test.number || 1; // 1
const numberValue2 = test.number ?? 1; // 0const stringValue = test.string || "Hello"; // "Hello"
const stringValue2 = test.string ?? "Hello"; // ""const booleanValue = test.boolean || true; // true
const booleanValue2 = test.boolean ?? true; // false
Copy the code

As shown above, the null-value merge operator is used only in?? Returns the right-hand operand when the left-hand operand is null or undefined.

Liverpoolfc.tv: @ Babel/plugin – proposal – nullish – coalescing – operator

1.2 TS Syntax – Type assertion for TS

1.2.1 Concepts and Functions of TS assertions?

Sometimes you’ll find that you know more about a value than TypeScript does. Usually this happens when you clearly know that an entity has a more exact type than its existing type.

Type assertions are a way of telling the compiler, “Trust me, I know what I’m doing.” Type assertion is like conversion in other languages, but without special data checking and deconstruction. It has no run-time impact, only at compile time. TypeScript assumes that you, the programmer, have done the necessary checks.

1.2.2 TS Assertion Syntax?

Type assertions come in two forms. The first is the Angle bracket syntax:

let someValue: any = "this is a string"; let strLength: number = (<string>someValue).length; // There are compatibility issues, which are not very compatible when using JSXCopy the code

The other is the as syntax:

let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;
Copy the code

The two forms are equivalent.

Which to use is mostly a matter of personal preference; However, when you use JSX in TypeScript, only AS syntax assertions are allowed.

Extended reference: type assertion for TS

1.3 summarize

The first tool methods: babelParserDefaultPlugins – Babel parser plug-in by default Looking at a few lines of code, but for my own use at ordinary times is not much, little write code of TS grammar. All three in Babel are used to transform new ES2020 features. It looks at the functions of several Babel plug-ins in detail, and reviews the functions of TS assertions. It is quite impressive to understand step by step operation.

Until October 08, 2021, continue!