👩🏽‍🎓 👗 👈🏽 Tinggalkan aplikasi create-react dan buat template Anda sendiri untuk aplikasi React ♎️ 👱 🙋🏻

Penulis artikel, terjemahan yang kami terbitkan hari ini, mengundang pengembang React untuk menjauh dari penggunaan create-react-app(CRA) dan membuat templat mereka sendiri untuk aplikasi React. Di sini kita akan berbicara tentang kelebihan dan kekurangan CRA, serta akan diusulkan solusi yang dapat menggantikannya create-react-app.

Apakah CRA itu?

Create React App adalah seperangkat alat yang dibangun dan dikelola oleh pengembang di Facebook. CRA adalah untuk membuat aplikasi React dengan template dengan cepat. Dengan CRA, basis proyek React dibuat dengan satu perintah.

Kekuatan CRA

CRA memungkinkan Anda membuat basis untuk proyek React dengan satu perintah:
```
npx create-react-app my-app
```
Penggunaan CRA menyelamatkan pengembang dari kebutuhan akan studi mendalam tentang alat bantu. Pengembang dapat fokus pada React dan tidak perlu khawatir tentang pengaturan Webpack, Babel, dan mekanisme utilitas lainnya.
Saat menerapkan CRA, pengembang hanya membutuhkan satu ketergantungan yang relevan untuk membangun proyek. Ini dia react-scripts. Ketergantungan ini mencakup semua ketergantungan rakitan lainnya, akibatnya ternyata, misalnya, satu perintah sudah cukup untuk menginstal dan memperbarui ketergantungan:
```
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- . , , , .
CRA, menurut saya, dipenuhi dengan peluang yang, dalam beberapa proyek, mungkin ternyata tidak diklaim. Misalnya, stub aplikasi yang dibuat dengan dukungan CRA SASS. Artinya, jika proyek Anda menggunakan CSS biasa atau Kurang, dukungan SASS sama sekali tidak diperlukan. Di sini , jika Anda tertarik, adalah file package.jsonaplikasi CRA setelah perintah eject. File ini "membuka gulungan" dependensi yang disajikan sebelumnya react-scripts.

Sebuah alternatif untuk CRA adalah mengembangkan template Anda sendiri untuk membuat proyek React dasar dengan cepat.

Alternatif untuk CRA

Dalam mengembangkan alternatif untuk CRA, kami akan melengkapinya dengan kemampuan untuk membuat proyek React dasar dengan cepat hanya dengan menggunakan satu perintah. Ini mengulangi salah satu fitur yang berguna create-react-app. Dan kami, tentu saja, tidak akan mentransfer kerugian CRA ke sistem kami, menginstal dependensi secara mandiri dan menyiapkan proyek. Proyek kami tidak akan menyertakan dua fitur CRA berguna lainnya (menghilangkan kebutuhan pengembang untuk mempelajari mekanisme tambahan dan skema "satu ketergantungan"), karena keduanya juga membawa kerugian (menyembunyikan mekanisme internal subsistem tambahan dari pengembang dan kerumitan dalam menyesuaikan konfigurasi pembangunan proyek mereka sendiri) ...

Berikut adalah repositori yang berisi semua kode yang akan kita bahas di artikel ini.

Mari kita mulai dengan menginisialisasi proyek dengan alat npmdan menginisialisasi repositori gitnya:

npm init
git init

Mari buat file dengan .gitignorekonten berikut:

node_modules
build

Ini akan mengijinkan kita untuk tidak memasukkan dalam repositori folder yang namanya ada di dalam file.

Sekarang mari kita pikirkan tentang dependensi dasar apa yang kita perlukan untuk membangun dan menjalankan aplikasi React.

Library React dan react-dom

Ini adalah satu-satunya dependensi runtime yang kami butuhkan:

npm install react react-dom --save

Transpiler (Babel)

Transpiler Babel mengubah kode yang sesuai dengan ECMAScript 2015+ menjadi kode yang akan berfungsi di browser baru dan lama. Babel, berkat penggunaan preset, juga digunakan untuk memproses kode JSX:

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

Inilah konfigurasi Babel yang sederhana agar aplikasi React Anda aktif dan berjalan. Konfigurasi ini dapat ditambahkan ke file .babelrcatau ke package.json:

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

Babel mendukung banyak preset dan plugin . Mereka dapat ditambahkan ke proyek jika diperlukan.

Bandler (Webpack)

Bundler Webpack bertanggung jawab untuk membangun proyek, membentuk satu file aplikasi (bundel) berdasarkan kode proyek dan kode dependensinya. Saat menggunakan teknik pengoptimalan proyek seperti pemisahan kode, bundel aplikasi dapat menyertakan banyak file.

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

Konfigurasi Webpack sederhana untuk membuat paket aplikasi React terlihat seperti berikut:

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',
    }),
  ],
};

Berbagai bootloader dapat ditambahkan di sini, sesuai dengan kebutuhan aplikasi tertentu . Jika Anda tertarik dengan topik ini, lihat artikel saya , di mana saya berbicara tentang konfigurasi Webpack yang dapat Anda gunakan untuk menyiapkan aplikasi React untuk digunakan dalam produksi.

Ini semua adalah ketergantungan yang kita butuhkan. Sekarang mari tambahkan file HTML template dan komponen React stub ke proyek.

Buat folder di direktori proyek srcdan tambahkan file ke dalamnya index.html:

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

Buat komponen React di folder yang sama HelloWorld:

import React from 'react';

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

export default HelloWorld;

Tambahkan file ke folder yang sama index.js:

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

import HelloWorld from './HelloWorld';

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

Dan terakhir, tambahkan package.jsondeskripsi skrip untuk meluncurkan ( start) dan membangun ( build) proyek:

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

Itu saja. Kami sekarang memiliki aplikasi React rintisan yang bisa diterapkan. Anda dapat memverifikasi ini dengan menjalankan perintah npm startdan npm run build.

Sekarang mari lengkapi sistem kita dengan kemampuan untuk menyiapkan template proyek dengan satu perintah. Artinya, kami akan menciptakan kembali salah satu kekuatan CRA. Kami akan menggunakan file JS yang dapat dieksekusi yang akan dipanggil saat Anda memasukkan perintah yang sesuai pada baris perintah. Misalnya, perintah seperti ini mungkin terlihat seperti ini:

reactjs-boilerplate new-project

Untuk mengimplementasikan ide ini, kita akan menggunakan bagian bin dari file tersebut package.json.

Pertama, instal paket fs-extra :

npm i fs-extra

Sekarang mari buat file JS yang dapat dieksekusi start.js, yang akan ditempatkan di folder binproyek kita. Mari letakkan kode berikut di file ini:

#!/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));
      }
    );
  }
);

Sekarang mari kita tautkan JS yang dapat dieksekusi ini dengan perintah dari package.json:

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

Mari buat tautan lokal untuk paket:

npm link

Sekarang, setelah menjalankan perintah ini, jika kita menjalankan perintah dari formulir di terminal your-boilerplate-name my-app, file yang dapat dieksekusi akan dipanggil start.js. Ini akan membuat folder baru dengan nama my-app, menyalin file package.json, webpack.config.jsdan .gitignore, serta folder src, dan menginstal dependensi proyek baru my-app.

Hebat. Sekarang semuanya berjalan di komputer Anda dan memungkinkan Anda membuat proyek React dasar dengan konfigurasi build mereka sendiri dengan satu perintah.

Anda dapat melanjutkan dan menerbitkan template Anda ke registri npm . Untuk melakukan ini, Anda harus mengirimkan proyek ke repositori GitHub terlebih dahulu. Kemudian ikuti instruksi ini .

Selamat! Kami baru saja membuat alternatif hanya dalam beberapa menit create-react-app. Solusi kami tidak dibebani dengan fitur yang tidak perlu (dependensi dapat ditambahkan ke proyek berdasarkan itu saat dan ketika diperlukan). Dengan menggunakannya, Anda dapat dengan mudah menyesuaikan konfigurasi build proyek agar sesuai dengan kebutuhan Anda.

Tentu saja, solusi kami minimalis. Proyek yang dibuat atas dasar itu tidak dapat dianggap siap digunakan dalam produksi. Untuk mempersiapkan mereka untuk pekerjaan nyata, kita perlu melengkapi template kita dengan beberapa pengaturan Webpack yang bertanggung jawab untuk mengoptimalkan pembangunan proyek.

Saya sudah menyiapkan template reactjs-boilerplateyang memungkinkan Anda membuat proyek yang siap untuk bekerja dalam produksi. Ini menggunakan konfigurasi build yang sesuai, linting, dan hook yang bertanggung jawab untuk memeriksa project sebelum membuat commit. Coba template ini. Jika Anda memiliki ide untuk memperbaikinya, atau jika Anda memutuskan untuk berkontribusi pada pengembangannya, bergabunglah untuk mengerjakannya.

Hasil

Inilah yang kami bicarakan di artikel ini:

Kami telah memilah pro dan kontra create-react-app.
Kami telah mengimplementasikan dalam proyek kami fitur CRA yang berguna untuk membuat aplikasi React kosong dengan satu perintah. Dan kami menyingkirkan kekurangan CRA.
Kami telah melengkapi proyek kami dengan konfigurasi Webpack dan Babel minimal yang diperlukan untuk membangun dan menjalankan aplikasi React.
Kami membuat komponen React HelloWorld.js, menyediakan kemampuan untuk membangun proyek dan menjalankannya menggunakan server pengembangan.
Kami membuat file JS yang dapat dieksekusi dan menautkannya ke perintah yang sesuai menggunakan bagian binfile package.json.
Kami menggunakan tim tersebut npm linkuntuk membuat tautan lokal untuk proyek kami dan dapat membuat proyek dasar baru darinya dengan satu tim.

Saya harap materi ini akan membantu Anda dalam mengembangkan proyek berdasarkan React.

Apakah Anda menggunakan create-react-app saat membuat proyek React baru?

Tinggalkan aplikasi create-react dan buat template Anda sendiri untuk aplikasi React