O que exatamente é o comando 'react-scripts start'?

Estou trabalhando com um projeto React, usando create-react-app, e tenho duas opções para iniciar o projeto:

Primeira maneira:

npm run startcom a definição package.jsoncomo esta:

"start": "react-scripts start",

Segunda maneira:

e npm start

Qual é a diferença entre esses dois comandos? E qual é o propósito do react-scripts start?

Tentei encontrar a definição, mas encontrei um pacote com o nome e ainda não sei qual é o significado desse comando.

create-react-app e react-scripts

react-scriptsé um conjunto de scripts do create-react-appstarter pack. O create-react-app ajuda você a iniciar projetos sem configurar, para que você não precise configurar seu projeto sozinho.

react-scripts startconfigura o ambiente de desenvolvimento e inicia um servidor, além de recarregar o módulo quente. Você pode ler aqui para ver o que tudo faz por você.

Com o create-react-app, você tem os seguintes recursos prontos para uso.

• Suporte a sintaxe React, JSX, ES6 e Flow.
• Os extras de idiomas além do ES6, como o operador de propagação de objetos.
• CSS com correção automática automática, para que você não precise de -webkit- ou de outros prefixos.
• Um corredor de teste de unidade interativo rápido com suporte integrado para relatórios de cobertura.
• Um servidor de desenvolvimento ativo que avisa sobre erros comuns.
• Um script de construção para agrupar JS, CSS e imagens para produção, com hashes e mapas de origem.
• Um trabalhador de serviço offline primeiro e um manifesto de aplicativo da Web, atendendo a todos os critérios do Progressive Web App.
• Atualizações sem problemas para as ferramentas acima com uma única dependência.

scripts npm

npm starté um atalho para npm run start.

npm runé usado para executar scripts que você define no scriptsobjeto do seu package.json

se não houver startchave no objeto scripts, o padrão seránode server.js

Às vezes, você deseja fazer mais do que os scripts de reação oferecem, nesse caso, você pode fazer react-scripts eject. Isso transformará seu projeto de um estado "gerenciado" para um estado não gerenciado, onde você tem controle total sobre dependências, compila scripts e outras configurações.

Como Sagiv bg apontou, o npm startcomando é um atalho para npm run start. Eu só queria adicionar um exemplo da vida real para esclarecer um pouco mais.

A configuração abaixo vem do create-react-apprepositório do github. O package.jsondefine um monte de scripts que definem o fluxo real.

"scripts": {
  "start": "npm-run-all -p watch-css start-js",
  "build": "npm run build-css && react-scripts build",
  "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
  "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
  "start-js": "react-scripts start"
},

Para maior clareza, adicionei um diagrama.

As caixas azuis são referências a scripts, todos os quais você pode executar diretamente com um npm run <script-name>comando. Mas como você pode ver, na verdade existem apenas 2 fluxos práticos:

• npm run start
• npm run build

As caixas cinzas são comandos que podem ser executados na linha de comando.

Então, por exemplo, se você executar npm start(ou npm run start) que realmente se traduz no npm-run-all -p watch-css start-jscomando, que é executado a partir da linha de comando.

No meu caso, eu tenho esse npm-run-allcomando especial , que é um plugin popular que procura por scripts que começam com "build:" e executa todos esses. Na verdade, eu não tenho nenhum que corresponda a esse padrão. Mas também pode ser usado para executar vários comandos em paralelo, o que ocorre aqui, usando o -p <command1> <command2>switch. Então, aqui ele executa 2 scripts, ou seja, watch-csse start-js. (Os últimos scripts mencionados são observadores que monitoram as alterações nos arquivos e só terminam quando eliminados.)

• A watch-cssgarante que os *.scssarquivos são convertidos para *.cssarquivos, e olha para futuras atualizações.

• Os start-jspontos para os react-scripts startquais hospeda o site em um modo de desenvolvimento.

Em conclusão, o npm startcomando é configurável. Se você quiser saber o que faz, verifique o package.jsonarquivo. (e você pode fazer um pequeno diagrama quando as coisas ficarem complicadas).

"start" é o nome de um script, no npm você executa scripts como este npm run scriptName, npm start também é uma abreviação de npm run start

Quanto a "react-scripts", este é um script relacionado especificamente ao create-react-app