ایجاد پروژه جدید React بدون CRA

در این پست به چگونگی ساخت پروژه reactjs بدون ابزارهایی مانند "create-react-app" پرداخته می‌شود.

ساخت پروژه جدید node js

ابتدا یک فولدر با نام دلخواه ایجاد میکنیم، سپس وارد این فولدر می‌شویم و ترمینال را درون این پوشه بازکرده سپس با کمک دستور زیر فایل package.json مربوط به npm را ایجاد می‌کنیم:

npm init

نصب typescript

ابزار typescript کمک می‌کند در هنگام توسعه به تمییزتر شدن کدها کمک می‌کند:

npm i --save-dev typescript @types/node 

سپس فایل tsconfig.ts را ایجاد می‌کنیم:

{
   &quotcompilerOptions&quot: {
         &quotesModuleInterop&quot: true,
         &quotjsx&quot: &quotreact&quot,
        &quotmodule&quot: &quotesnext&quot,
        &quotmoduleResolution&quot: &quotnode&quot,
       &quotlib&quot: [
          &quotdom&quot,
         &quotesnext&quot
       ],
      &quotstrict&quot: true,
      &quotsourceMap&quot: true,
      &quottarget&quot: &quotesnext&quot,
   },
   &quotexclude&quot: [
      &quotnode_modules&quot
   ]
}

نصب webpack

ابزار webpack را برای ایجاد build نهایی و یا ایجاد server هنگام توسعه نیاز داریم.

npm install --save-dev webpack webpack-cli webpack-dev-server css-loader html-webpack-plugin mini-css-extract-plugin

همچنین :

npm install --save-dev  ts-loader

اکنون در روت پروژه یک فایل بنام webpack.config.js ایجاد می‌کنیم :

const prod = process.env.NODE_ENV === 'production';

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
   mode: prod ? 'production' : 'development',
   entry: './src/index.tsx', // index.ts/index.js path
   output: {
      path: __dirname + '/dist/',  //build directory
   },
   module: {
   rules: [
      {
         test: /\.(ts|tsx)$/,
         exclude: /node_modules/,
         resolve: {
            extensions: ['.ts', '.tsx', '.js', '.json'],
         },
         use: 'ts-loader',
      },
      {
         test: /\.css$/,
         use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
   ]
   },
   devtool: prod ? undefined : 'source-map',
   plugins: [
      new HtmlWebpackPlugin({
         template: './public/index.html', //index.html path
      }),
      new MiniCssExtractPlugin(),
   ],
};

نصب Babel

مرورگرها قادر به درک ECMAScript نیستند. این ابزار کدهای ECMAScript را به کدهای جاوااسکریپت قابل درک برای مرورگرها تبدیل می‌کند:

npm install --save-dev babel-loader @babel/preset-env @babel/core @babel/plugin-transform-runtime @babel/preset-react @babel/eslint-parser @babel/runtime @babel/cli

نصب eslint

ابزار eslint در هنگام توسعه به پیدا کردن مشکلات کد به توسعه دهنده کمک می‌کند:

npm install --save-dev eslint eslint-config-airbnb-base eslint-plugin-jest eslint-config-prettier

نصب path

از این ابزار به جهت کار با مسیرها استفاده می‌کنیم:

npm install --save-dev path

نصب react

کتابخانه react سرعت توسعه برنامه‌های جاوااسکریپتی را با کمک کدهای از پیش نوشته افزایش می‌دهد:

npm install react react-dom

همچنین :

npm install --save-dev @types/react @types/react-dom

ساخت فایل index.html

درون فولدر پروژه یک فولدر بنام public کنار package.json ایجاد می‌کنیم و سپس درون این فولدر فایل index.html را قرار می‌دهیم:

دقت شود که ما یک تگ div درون فایل html با شناسه "my-app-root" هم ایجاد کردیم.

ساخت فایل index.ts

درون پوشه src فایل index.ts خود را اضافه میکنیم:

اجرا در مرورگر

برای تست فایل ابتدا سراغ فایل package.json رفته و اسکریپت test و build را به این فایل اضافه می‌کنیم:

اسکریپت‌های مربوط به test و start در ویندوز:

&quotstart&quot: &quotwebpack serve --port 3000&quot, 
&quotbuild&quot: &quotset NODE_ENV=production && webpack&quot

درون لینوکس:

&quotstart&quot: &quotwebpack serve --port 3000&quot,
 &quotbuild&quot: &quotNODE_ENV=production webpack&quot

سپس با دستور زیر می‌توان اپ را روی پورت 3000 اجرا کرد:

npm start

بیلد گرفتن از پروژه

برای گرفتن build کافیست دستور زیر را در ترمینال وارد میکنیم:

npm run build