Através deste artigo você aprenderá o seguinte:
- 1, npm cria processo de execução específico
- 2, três bibliotecas de minimalista, prompts e colorista
- 3. Análise do código-fonte do create-vite
Download do código-fonte do Vite:
//复制一份vite源码到自己的本地
git clone https://github.com/vitejs/vite.git
//安装依赖 npm i
Primeiro, como o comando npm create vite dispara?
A partir da vitedocumentação oficial, podemos saber que podemos npm create viteinicializar um viteprojeto através do , então npm create vitecomo funciona? Com esta questão em mente, verifiquei npminformações relevantes.
Primeiro de tudo, devemos primeiro entender npmo que exatamente é isso? Extraído da explicação oficial: NPMO nome completo é Node Package Manageruma NodeJSferramenta de gerenciamento e distribuição de pacotes, que se tornou o padrão para Nodemódulos de lançamento não oficiais (pacotes). Podemos compará-lo a uma ferramenta de gerenciamento de pacotes. Portanto, os pacotes que os usuários desejam usar e os pacotes que desejam fornecer a outros podem ser "negociados" por meio dessa ferramenta. Por se tratar de uma ferramenta, para utilizá-la, é preciso obedecer às regras que ela estabelece. Mas para entender npm createo princípio de , você deve primeiro saber npm init. Como você pode ver na foto abaixo, eles são uma coisa.
No site oficial do npm, ficamos sabendo que npm init + initializerele npmexecutará o npm execcomando. npm create vite->npm exec create vite
npm exec: execute o comando do pacote npm local ou remoto
Aqui, npmo create-vitepacote e, em seguida, package.json bino create-vitecomando será executado. Em seguida, vamos abrir o código-fonte para análise para ver o que realmente épackage.json bin executado em ?create-vite
2. Análise do diretório do código-fonte e depuração do código
githubDepois de baixar o vitecódigo-fonte, abra o diretório, primeiro analise sua estrutura de diretórios, você pode ver a seguinte figura:
Encontramos o comando create-vitepacote correspondente apackage.json bincreate-vite
encontre o finalindex.ts
Em seguida, depure o código. Depois de trabalhar por muito tempo, não tsconsigo nodeexecutar o comando diretamente. Encontrei dois métodos para depurar na Internet.
Uma delas é usar vscodecompilá-lo para jsexecutar o código.
Uma é usar ounpx esno src/index.ts depurar.npx tsx src/index.ts
npx esno src/index.tsAbrir o terminal de depuração com reportará um erro .
Não sei porque, mas o ponto de quebra do segundo método não pode surtir efeito, então ao depurar o código, será reportado um erro, ou compile primeiro jse depois execute. Durante o processo de execução, encontrei o erro mostrado na figura abaixo. Após a solução de problemas, descobri que era um nodeJsproblema de versão. Eu usei10.15.3
Precisa prestar atenção na nodeJsversão:
Três, análise de código-fonte do processo principal init
Antes da análise, primeiro você precisa estar familiarizado com várias bibliotecas introduzidas no código.
Então olhe o código, vai ser muito mais fácil
1. Obtenha as entradas e opções do usuário, bem como o diretório específico do download do projeto.
2. Determine se há atributos personalizados
3. Obtenha o diretório do modelo e grave-o na pasta especificada pelo usuário e modifique o arquivo package.json
4. Informe ao usuário como executar o projeto de inicialização
Em quarto lugar, a função de extensão
1. Cópia de arquivo
2. Substitua a barra invertida /por uma string vazia
3. Processamento de informações correspondentes ao gerenciador de pacotes
Finalmente
Recentemente, também organizei uma nota de JavaScript e ES, um total de 25 pontos de conhecimento importantes, e expliquei e analisei cada ponto de conhecimento. Ele pode ajudá-lo a dominar rapidamente o conhecimento relevante de JavaScript e ES e melhorar a eficiência do trabalho.
Amigos necessitados, você pode clicar no cartão abaixo para receber e compartilhar gratuitamente