🛬 🏸 👲🏼 Abandonando create-react-app e criando seu próprio modelo para aplicativos React ☎️ ⛴️ 🥀

O autor do artigo, cuja tradução publicamos hoje, convida os desenvolvedores do React a se afastarem do uso create-react-app(CRA) e a criarem seus próprios modelos para os aplicativos React. Aqui vamos falar sobre as vantagens e desvantagens do CRA, bem como será proposta uma solução que pode substituir create-react-app.

O que é CRA?

O aplicativo Create React é um conjunto de ferramentas criado e mantido pelos desenvolvedores do Facebook. O CRA serve para criar rapidamente aplicativos de modelo do React. Com o CRA, uma base de projeto React é criada com um único comando.

Forças do CRA

O CRA permite que você crie uma base para um projeto React com um comando:
```
npx create-react-app my-app
```
O uso de um CRA poupa o desenvolvedor da necessidade de um estudo aprofundado de ferramentas auxiliares. O desenvolvedor pode se concentrar no React e não se preocupar em configurar o Webpack, Babel e outros mecanismos utilitários.
Ao aplicar o CRA, o desenvolvedor precisa apenas de uma dependência que seja relevante para a construção do projeto. Isso é react-scripts. Esta dependência inclui todas as outras dependências do assembly, como resultado, por exemplo, um comando é suficiente para instalar e atualizar as dependências:
```
npm install react-scripts@latest
```

CRA

CRA . eject, CRA- . customize-cra react-app-rewired, .
CRA . React- , React- . CRA « », , react-scripts — , React-. , , , react-scripts — , , «» (Babel) (Webpack), React- . , , , .
O CRA, ao que me parece, está sobrecarregado de oportunidades que, em alguns projetos, podem muito bem ser não reclamadas. Por exemplo, stubs de aplicativos criados com o suporte CRA SASS. Ou seja, se seu projeto usa CSS regular ou Less, o suporte SASS será completamente desnecessário. Aqui , se você estiver interessado, está o arquivo do package.jsonaplicativo CRA após o comando eject. Este arquivo "desenrolou" as dependências apresentadas anteriormente react-scripts.

Uma alternativa ao CRA é desenvolver seu próprio modelo para criar rapidamente projetos básicos do React.

Alternativa para CRA

Ao desenvolver uma alternativa ao CRA, vamos equipá-lo com a capacidade de criar rapidamente projetos básicos do React usando apenas um comando. Isso repete um dos recursos úteis create-react-app. E nós, claro, não transferiremos as desvantagens do CRA para o nosso sistema, instalando dependências de forma independente e configurando o projeto. Nosso projeto não incluirá dois outros recursos de CRA úteis (dispensando o desenvolvedor da necessidade de estudar os mecanismos auxiliares e o esquema de "uma dependência"), uma vez que eles também trazem desvantagens (ocultar do desenvolvedor os mecanismos internos dos subsistemas auxiliares e a complexidade de personalizar suas próprias configurações de construção do projeto) ...

Aqui está o repositório que contém todo o código que discutiremos neste artigo.

Vamos começar inicializando o projeto com ferramentas npme inicializando seu repositório git:

npm init
git init

Vamos criar um arquivo com o .gitignoreseguinte conteúdo:

node_modules
build

Isso nos permitirá não incluir no repositório as pastas cujos nomes estão presentes no arquivo.

Agora vamos pensar sobre quais dependências básicas precisamos para construir e executar um aplicativo React.

Bibliotecas React e React

Estas são as únicas dependências de tempo de execução de que precisamos:

npm install react react-dom --save

Transpiler (Babel)

O transpiler Babel converte o código compatível com ECMAScript 2015+ em código que funcionará em navegadores novos e legados. Babel, graças ao uso de predefinições, também é usado para processar o código JSX:

npm install @babel/core @babel/preset-env @babel/preset-react --save-dev

Esta é a aparência de uma configuração simples do Babel para colocar seus aplicativos React em funcionamento. Esta configuração pode ser adicionada a um arquivo .babelrcou a package.json:

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

O Babel suporta muitos presets e plugins . Eles podem ser adicionados ao projeto conforme e quando necessário.

Bandler (Webpack)

O bundler Webpack é responsável por construir o projeto, formando um único arquivo de aplicação (bundle) baseado no código do projeto e no código de suas dependências. Ao usar técnicas de otimização de projeto, como divisão de código, um pacote de aplicativos pode incluir vários arquivos.

npm install webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader html-webpack-plugin --save-dev

Uma configuração simples do Webpack para criar pacotes de aplicativos React se parece com o seguinte:

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js',
  },
  resolve: {
    modules: [path.join(__dirname, 'src'), 'node_modules'],
    alias: {
      react: path.join(__dirname, 'node_modules', 'react'),
    },
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './src/index.html',
    }),
  ],
};

Vários bootloaders podem ser adicionados aqui, de acordo com as necessidades de um aplicativo específico . Se você estiver interessado neste tópico, dê uma olhada no meu artigo , onde falo sobre as configurações do Webpack que você pode usar para preparar aplicativos React para uso em produção.

Essas são todas as dependências de que precisamos. Agora vamos adicionar um arquivo HTML de modelo e um componente Stub React ao projeto.

Crie uma pasta no diretório do projeto srce adicione um arquivo a ela index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React Boilerplate</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

Vamos criar um componente React na mesma pasta HelloWorld:

import React from 'react';

const HelloWorld = () => {
  return (
      <h3>Hello World</h3>
  );
};

export default HelloWorld;

Adicione o arquivo à mesma pasta index.js:

import React from 'react';
import { render } from 'react-dom';

import HelloWorld from './HelloWorld';

render(<HelloWorld />, document.getElementById('root'));

E, finalmente, adicione às package.jsondescrições de scripts para iniciar ( start) e construir ( build) o projeto:

"scripts": {
    "start": "webpack-dev-server --mode=development --open --hot",
    "build": "webpack --mode=production"
  }

Isso é tudo. Agora temos um aplicativo stub React viável à nossa disposição. Você pode verificar isso executando os comandos npm starte npm run build.

Agora vamos equipar nosso sistema com a capacidade de preparar um modelo de projeto com um único comando. Ou seja, vamos recriar um dos pontos fortes do CRA. Vamos usar um arquivo JS executável que será chamado quando você inserir o comando apropriado na linha de comando. Por exemplo, um comando como este pode ter a seguinte aparência:

reactjs-boilerplate new-project

Para implementar essa ideia, vamos usar a seção bin do arquivo package.json.

Primeiro, instale o pacote fs-extra :

npm i fs-extra

Agora vamos criar um arquivo JS executável start.js, que ficará localizado em binnossa pasta de projeto. Vamos colocar o seguinte código neste arquivo:

#!/usr/bin/env node
const fs = require("fs-extra");
const path = require("path");
const https = require("https");
const { exec } = require("child_process");

const packageJson = require("../package.json");

const scripts = `"start": "webpack-dev-server --mode=development --open --hot",
"build": "webpack --mode=production"`;

const babel = `"babel": ${JSON.stringify(packageJson.babel)}`;

const getDeps = (deps) =>
  Object.entries(deps)
    .map((dep) => `${dep[0]}@${dep[1]}`)
    .toString()
    .replace(/,/g, " ")
    .replace(/^/g, "")
    //  ,     ,    
    .replace(/fs-extra[^\s]+/g, "");

console.log("Initializing project..");

//     npm-
exec(
  `mkdir ${process.argv[2]} && cd ${process.argv[2]} && npm init -f`,
  (initErr, initStdout, initStderr) => {
    if (initErr) {
      console.error(`Everything was fine, then it wasn't:
    ${initErr}`);
      return;
    }
    const packageJSON = `${process.argv[2]}/package.json`;
    //  ,   
    fs.readFile(packageJSON, (err, file) => {
      if (err) throw err;
      const data = file
        .toString()
        .replace(
          '"test": "echo \\"Error: no test specified\\" && exit 1"',
          scripts
        )
        .replace('"keywords": []', babel);
      fs.writeFile(packageJSON, data, (err2) => err2 || true);
    });

    const filesToCopy = ["webpack.config.js"];

    for (let i = 0; i < filesToCopy.length; i += 1) {
      fs.createReadStream(path.join(__dirname, `../${filesToCopy[i]}`)).pipe(
        fs.createWriteStream(`${process.argv[2]}/${filesToCopy[i]}`)
      );
    }
    // npm,   ,   .gitignore,        ;    .     GitHub-  raw- .gitignore
    https.get(
      "https://raw.githubusercontent.com/Nikhil-Kumaran/reactjs-boilerplate/master/.gitignore",
      (res) => {
        res.setEncoding("utf8");
        let body = "";
        res.on("data", (data) => {
          body += data;
        });
        res.on("end", () => {
          fs.writeFile(
            `${process.argv[2]}/.gitignore`,
            body,
            { encoding: "utf-8" },
            (err) => {
              if (err) throw err;
            }
          );
        });
      }
    );

    console.log("npm init -- done\n");

    //  
    console.log("Installing deps -- it might take a few minutes..");
    const devDeps = getDeps(packageJson.devDependencies);
    const deps = getDeps(packageJson.dependencies);
    exec(
      `cd ${process.argv[2]} && git init && node -v && npm -v && npm i -D ${devDeps} && npm i -S ${deps}`,
      (npmErr, npmStdout, npmStderr) => {
        if (npmErr) {
          console.error(`Some error while installing dependencies
      ${npmErr}`);
          return;
        }
        console.log(npmStdout);
        console.log("Dependencies installed");

        console.log("Copying additional files..");
        //     
        fs.copy(path.join(__dirname, "../src"), `${process.argv[2]}/src`)
          .then(() =>
            console.log(
              `All done!\n\nYour project is now ready\n\nUse the below command to run the app.\n\ncd ${process.argv[2]}\nnpm start`
            )
          )
          .catch((err) => console.error(err));
      }
    );
  }
);

Agora, vamos vincular este executável JS com o comando de package.json:

"bin": {
    "your-boilerplate-name": "./bin/start.js"
  }

Vamos criar um link local para o pacote:

npm link

Agora, depois de executar este comando, se executarmos um comando do formulário no terminal your-boilerplate-name my-app, nosso arquivo executável será chamado start.js. Ele vai criar uma nova pasta com um nome my-app, copiar os arquivos package.json, webpack.config.jse .gitignore, assim como a pasta src, e instalar as dependências do novo projeto my-app.

Maravilhoso. Agora tudo é executado no seu computador e permite que você crie projetos básicos do React com sua própria configuração de compilação com um único comando.

Você pode ir em frente e publicar seu modelo no registro npm . Para fazer isso, primeiro você precisa enviar seu projeto para o repositório GitHub. Em seguida, siga estas instruções.

Parabéns! Acabamos de criar uma alternativa em apenas alguns minutos create-react-app. Nossa solução não está sobrecarregada com recursos desnecessários (dependências podem ser adicionadas aos projetos criados em sua base conforme a necessidade). Usando-o, você pode ajustar facilmente a configuração de construção do projeto para atender às suas necessidades.

Claro, nossa solução é minimalista. Projetos criados com base nisso não podem ser considerados prontos para uso na produção. A fim de prepará-los para o trabalho real, precisamos equipar nosso modelo com algumas configurações do Webpack responsáveis por otimizar as compilações do projeto.

Eu preparei o modelo reactjs-boilerplatepermitindo que você crie projetos prontos para produção. Ele usa a configuração de compilação apropriada, linting e ganchos responsáveis por verificar o projeto antes de criar commits. Experimente este modelo. Se você tem alguma ideia para melhorá-lo, ou se decidir contribuir para seu desenvolvimento, junte-se ao trabalho nisso.

Resultado

Aqui está o que falamos neste artigo:

Cobrimos os prós e os contras create-react-app.
Implementamos em nosso projeto um recurso CRA útil para a criação de aplicativos React em branco com um comando. E nos livramos das deficiências do CRA.
Equipamos nosso projeto com as configurações mínimas de Webpack e Babel necessárias para construir e executar aplicativos React.
Criamos um componente React HelloWorld.js, fornecendo a capacidade de construir um projeto e executá-lo usando o servidor de desenvolvimento.
Criamos um arquivo JS executável e o vinculamos ao comando apropriado usando a seção de binarquivo package.json.
Usamos a equipe npm linkpara criar um link local para nosso projeto e poder criar novos projetos de linha de base a partir dele com uma única equipe.

Espero que este material ajude você no desenvolvimento de projetos baseados no React.

Você usa create-react-app ao criar novos projetos React?

Abandonando create-react-app e criando seu próprio modelo para aplicativos React