poemkit
PoemKit Stable
"width = "180" style = "max-width: 100٪؛">
مجموعة ويب مجانية مع React لتصميم وتطوير الويب بسرعة عبر SSR. إنها أيضًا بنية Micro-Frontend. استخدام رد الفعل، والإعادة، وجهاز التوجيه، وaxios وexpress. تم تمهيد هذا المشروع باستخدام مكتبة Nodejs. يدعم Project عمليات النشر التلقائي من عدد من خدمات استضافة المستودعات عبر PM2. يقدم poemkit أكثر من 50+ مكونًا مدمجًا لواجهة المستخدم لإنشاء تطبيقات الويب الحديثة.
يمكن أن يعمل poemkit ويتم نشره من خلال الأوامر، إلا أنه لا يزال يتطلب كتابة كود حقيقي خلفها. تعمل هذه المجموعات كمكونات لواجهة المستخدم وبعض الوحدات المنطقية التي يمكن تجميعها معًا في موقع ويب حقيقي أو نموذج أولي للتطبيق والذي سيظل يتطلب وظائف برمجة لجعلها تعمل في العالم الحقيقي. يلبي poemkit متطلبات حزمة الويب القابلة للتخصيص بالكامل.
؟ يمكنك أيضًا استخدام مكتبة مكونات React UI المستقلة (استنادًا إلى BootStrap 5) Funda UI.
للحصول على العرض التجريبي عبر الإنترنت، يرجى الخروج https://uiux.cc/poemkit
يعمل الخادم على http://localhost:3000
poemkit /
├── README.md
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── ecosystem.config.js ------------------------- # for pm2
├── babel.config.js
├── tsconfig.json
├── webpack.config.js
├── package-lock.json
├── package.json
├── test/ --------------------------- # Unit Testing scripts
├── public/ --------------------------- # HTML template of Homepage
│ ├── index.html
│ ├── manifest.json
│ └── server/ ------------------------------- # PHP scripts used to the server for testing
│ └── assets/
├── dist/ ------------------------------- # Files compiled, used in the production environment
│ ├── css/
│ │ ├── poemkit .css
│ │ └── poemkit .min.css
│ └── js/
│ │ ├── poemkit .js
│ │ └── poemkit .min.js
├── src/
│ ├── client/
│ │ ├── client.js
│ │ ├── actions/
│ │ ├── reducers/
│ │ ├── helpers/
│ │ ├── services/
│ │ ├── router/
│ │ ├── components/ ------------------------- # Independent React components
│ │ │ ├── * /
│ │ │ ├── _utils/ ----------------------- # General utilities & snippets(js & css)
│ │ │ └── _plugins/ --------------------- # Third-party plugins
│ │ ├── views/ ------------------------------ # Website pages
│ │ │ ├── _pages/
│ │ │ └── _html/
│ └── server/
│ │ ├── app.js
│ │ ├── server.js
│ │ └── renderer.js
│ └── store/
│ │ └── createStore.js
│ └── config/
│ │ ├── tmpl-manifest.json ----------------- # `manifest.json` file template
│ │ └── websiteConfig.js ------------------- # website config
└──webpack.config.js لاستخدام أداة تثبيت الذاكرة) سوف تحتاج إلى إعداد العقدة على جهازك. سيؤدي ذلك إلى إخراج التوزيعات المضمنة إلى ./dist/* و ./public/*.html .
الخطوة 1. استخدم NPM (حدد موقع الدليل الحالي للمشروع، وأدخل الأمر التالي.) أو قم بتنزيل أحدث إصدار من Github. بالنسبة لـNodejs، يجب عليك تثبيت بعض التبعيات.
$ npm install poemkitأو قم باستنساخ الريبو للحصول على جميع الملفات المصدر بما في ذلك البرامج النصية للإنشاء:
$ git clone git://github.com/xizon/ poemkit .git الخطوة 2. أولاً، استخدم المسار المطلق إلى دليل المجلد " poemkit /" .
$ cd /{your_directory}/ poemkit الخطوة 3. قبل القيام بجميع أمور التطوير، تأكد من تثبيت Node 10+ . بعد ذلك، قم بتشغيل التعليمات البرمجية التالية في الدليل الرئيسي لتثبيت تبعيات وحدة العقدة.
$ npm installبيئة الاختبار الحالية هي `Node 18+`، `npm 9+`. إذا فشل تثبيت التبعيات (عادة ما يكون ذلك بسبب قيامك بترقية إصدار Nodejs الخاص بك، والذي تم اختباره حاليًا إلى Node 18+)، فربما يتعارض الإصدار الجديد من npm مع الإصدار القديم من npm، يرجى استخدام الأمر التالي لتثبيت التبعيات:$ npm install --legacy-peer-depsإذا استمر فشل التثبيت، فيرجى استخدام هذه الطريقة: إزالة devDependeency والتبعيات و peerDependeency في
package.json، وحذف الملفpackage-lock.jsonوإعادة تثبيت التبعيات:$ npm install --save-dev @testing-library/jest-dom @testing-library/[email protected] @types/react @typescript-eslint/eslint-plugin @typescript-eslint/parser babel-loader clean-webpack-plugin cross-env css-loader css-minimizer-webpack-plugin eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react file-loader glslify-loader html-loader html-webpack-plugin identity-obj-proxy include-file-webpack-plugin jest jsdom jest-environment-jsdom json-loader log-timestamp mime-types mini-css-extract-plugin sass nodemon postcss prettier prettier-loader random-string raw-loader [email protected] safe-buffer sass-loader style-loader tar terser-webpack-plugin ts-jest ts-node tsconfig-paths typescript webpack webpack-cli webpack-dev-middleware webpack-dev-server $ npm install @babel/core @babel/node @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime @babel/polyfill @babel/preset-env @babel/preset-flow @babel/preset-react @babel/preset-typescript @babel/register axios babel-plugin-module-resolver compression cors express ignore-styles moment [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]
الخطوة 4. الأوامر شائعة الاستخدام:
تطبيق التصحيح. يمكن التحقق منه بشكل منفصل على أنه TypeScript دون سلوك التجميع والتعبئة.
$ npm run checkلاستخدام webpack لتجميع الملفات.
$ npm run build قم بتشغيل الأوامر التالية للاختبار المحلي وفحص التعليمات البرمجية. يمكنك أن ترى أن الخادم قيد التشغيل. (قم بتشغيل خادم Express فقط). باستخدام Ctrl + C لإيقافه.
$ npm run devالخطوة 5. عند الانتهاء، سيؤدي ذلك إلى إنشاء خادم يمكن الوصول إليه من خلاله
http://localhost:3000يوصى بتجميع الكود الجديد قبل تصحيح الأخطاء.
الخطوة 6 (اختياري). نشر خادم العقدة على خادم الاستضافة
يرجى تشغيل أمر الإنشاء قبل النشر. (إذا لم يعمل بسبب إذن Node، استخدم الأوامر التالية)
$ npm run deploy إيقاف عمليات النشر الحالية
$ npm run destroyالخطوة 7 (اختياري). اختبار الوحدة
$ npm run testملحوظة:
أ) خطأ: فشل التحقق من تحديث npm.
حل:
$ sudo chown -R $USER : $( id -gn $USER ) /Users/{username}/.configب) خطأ: إصدار Node sass 6.xx غير متوافق مع ^ 4.xx
حل:
$ npm install [email protected]ج) إذا قمت بترقية إصدار Node، يرجى تنفيذ التعليمات البرمجية التالية:
$ npm install $ npm rebuild node-sass
ابدأ تطبيق Reactjs مع PM2 كخدمة (يعمل فقط إذا كنت تستخدم Node v13.9.0 أو أعلى.)
سيتم تثبيت الإصدار Node14+ هنا
$ curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash -
$ sudo yum install nodejs
$ node --version # v14.16.1
$ npm --version # 6.14.12
$ which node babel-node # check the location of node and babel-node $ sudo npm install pm2@latest -g$ sudo npm install -g babel-cli
$ sudo npm install -g @babel/core @babel/cli @babel/preset-env $ sudo npm install -g typescript ts-node$ sudo pm2 install typescript # into your `" poemkit /"` folder directory.
$ cd /{your_directory}/ poemkit
# run app
$ pm2 start ecosystem.config.js
# Detect available init system, generate configuration and enable startup system, and you can check the status of the same using
$ pm2 startup
$ systemctl status pm2-root
$ pm2 start /{your_directory}/ poemkit /ecosystem.config.js --restart-delay=3000
$ pm2 save
# other commands
$ pm2 restart ecosystem.config.js
$ pm2 stop ecosystem.config.js
$ pm2 delete ecosystem.config.js
$ pm2 list
$ pm2 logsبعض الحلول للمشاكل التي قد تحدث عند نشر التطبيق مع NPM أو PM2 على الخادم السحابي:
أ) خطأ: تم رفض الإذن، الوصول إلى "/usr/lib/node_modules"
حل:
chmod -R a+x node_modulesب) خطأ: نفاد الذاكرة في كومة جافا سكريبت
يوجد حد قياسي صارم لاستخدام الذاكرة في الإصدار V8 يبلغ الحد الأقصى ~1 جيجابايت (32 بت) و~1.7 جيجابايت (64 بت)، إذا لم تقم بزيادته يدويًا.
حل:
export NODE_OPTIONS=--max_old_space_size=4096ج) خطأ: EACCES: تم رفض الإذن، mkdir '/root/.pm2/xxxx'
حل:
بشكل عام، فقط تجنب استخدام
NPMلتشغيل أوامر PM2.لا يزال بإمكانك تجربة ما يلي:
تأكد من قتل أي مثيل لـ PM2 قبل بدء تشغيل PM2 في وضع عدم وجود شيطان (قتل PM2).
# re-install PM2 (optional) sudo npm i -g pm2 # if pm2 was reinstalled, ts-node must be reinstalled (optional) sudo npm install -g ts-node@latest # clear all pm2 instances pm2 kill # then restart it pm2 start xxxxxx
لقد قمت بإنشاء تطبيق React أساسي من هنا، فأنت بحاجة إلى نشر تطبيق React على خادم الويب Apache أو Nginx. يرجى الرجوع إلى الشبكة للحصول على البرنامج التعليمي حول إعداد الوكيل.
الآن بعد أن أصبح التطبيق جاهزًا للنشر، علينا إعداد نهاية Nginx. في حالة عدم تثبيت Nginx، يمكن تثبيته بسهولة باستخدام نظام التغليف apt عن طريق تشغيل الأمرين التاليين:
$ sudo apt update
$ sudo apt install nginxأو
$ sudo yum install nginx -yابدأ إنجينكس:
$ systemctl start nginxالبدء عند التمهيد:
$ systemctl enable nginxقم بإعداد جدار الحماية باستخدام FirewallD على CentOS 8:
$ firewall-cmd --permanent --zone=public --add-service=http
$ firewall-cmd --permanent --zone=public --add-service=https
$ firewall-cmd --permanent --zone=public --add-port=3000/tcp
$ firewall-cmd --reload
$ systemctl restart nginx يمكننا التحقق مما إذا كان Nginx يعمل على النظام:
$ systemctl status nginx حسنًا، الآن بعد أن بدأت خدمة Nginx في التشغيل بنجاح، يمكننا المضي قدمًا وتعديل ملف التكوين الموجود في /etc/nginx/conf.d/default.conf . هذا هو المكان الذي سنوجه فيه النطاق لتشغيل تطبيق React الصحيح:
$ vi /etc/nginx/conf.d/default.confوفي نهاية الملف أضف:
server {
listen 443 ssl ;
server_name backend1.example.com ;
...
location / {
proxy_set_header Host $http_host ;
proxy_pass http://{YOUR_IP}:3000 ;
}
}بعد إضافة هذه الأسطر إلى الملف، نحتاج إلى إعادة تشغيل خدمة Nginx:
$ systemctl restart nginxربما لن تكون هناك أية رسائل إذا تمت إعادة تشغيل الخدمة بنجاح. وإلا فإنه سوف بصق سطور من رسائل الخطأ.
قم بتعديل الملف ./src/server/app.js ، استخدم https.createServer([options][, requestListener]) لتغليف الخدمة السريعة، يرجى التحقق من نموذج التعليمات البرمجية أدناه:
import path from 'path' ;
import https from 'https' ;
const cert = fs . readFileSync ( path . join ( __dirname , '../../path/bundle.crt' ) ) ;
const key = fs . readFileSync ( path . join ( __dirname , '../../path/ca.key' ) ) ;
const server = https . createServer ( { key : key , cert : cert } , app ) ;
...
app . get ( '/' , ( req , res ) => { res . send ( 'this is an secure server' ) } ) ;
...
server . listen ( port , ( ) => console . log ( `Frontend service listening on port: ${ port } , access https://localhost: ${ port } in the web browser` ) ) ; لتوضيح الغموض في webpack.config.js بين إصدارات التطوير والإنتاج، يمكنك استخدام متغيرات البيئة.
إذا كنت تريد النظر في كل من نظامي التشغيل OS X وWindows، فيمكنك استخدام أداة cross-env التابعة لجهة خارجية
الخطوة 1. قم بتشغيل الأمر لتثبيت cross-env
$ npm install --save-dev cross-env الخطوة 2. علاوة على ذلك، في ملف package.json في البرامج النصية، سنشير إلى الأمر الجاهز لتجميع حزمة الويب في إصدار الإنتاج
"scripts" : {
"dev" : " cross-env NODE_ENV=development nodemon --require ignore-styles --exec ts-node -r tsconfig-paths/register ./src/server/server.js " ,
"build" : " cross-env NODE_ENV=production webpack --progress --mode production "
} حيث من خلال مجموعة cross-env المتغير والقيمة NODE_ENV=xxx ثم نحصل على هذا المتغير أثناء تنفيذ حزمة الويب
الخطوة 3. في ملف التكوين webpack.config.js دعونا نطبق هذا التحقق من عملية الكائن والخصائص الإضافية env على المتغير NODE_ENV :
if ( process . env . NODE_ENV === 'production' ) {
// .. тwe apply (or add) some kind of plugin
} قم بتعديل القالب الافتراضي ./src/client/views/_html/index.html . سيتم إنشاؤه تلقائيًا كـ ./public/index.html . يحتوي على علامات HTML التي تحتاج React Helmet إلى استخدامها، على سبيل المثال:
<!DOCTYPE html >
< html {{helmetHtmlAttributes}} >
< head >
< meta charset =" utf-8 " />
{{helmetTitle}}
<!-- manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
============================================= -->
< link rel =" manifest " href =" @@{website_root_directory}/manifest.json " />
<!-- Mobile Settings
============================================= -->
< meta name =" viewport " content =" width=device-width, initial-scale=1, maximum-scale=1 " />
<!-- Mobile Settings end -->
<!-- Compatibility
============================================= -->
< meta http-equiv =" X-UA-Compatible " content =" IE=edge " />
<!-- Compatibility end -->
<!-- Core & Theme CSS
============================================= -->
< link rel =" stylesheet " href =" @@{website_root_directory}/dist/css/ poemkit .min.css?ver=@@{website_hash} " />
<!-- Core & Theme CSS end -->
<!-- Overwrite Font Files
*
* The fonts extracted with `mini-css-extract-plugin` may not load correctly
* Font files in `dist/fonts/` are fetched automatically by `file-loader`, you can configure webpack.config.js to name them.
============================================= -->
< style >
@font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 900;
font-display: $fa-font-display;
src: url('@@{website_root_directory}/dist/fonts/fa-solid-900.eot');
src: url('@@{website_root_directory}/dist/fonts/fa-solid-900.eot?#iefix') format('embedded-opentype'),
url('@@{website_root_directory}/dist/fonts/fa-solid-900.woff2') format('woff2'),
url('@@{website_root_directory}/dist/fonts/fa-solid-900.woff') format('woff'),
url('@@{website_root_directory}/dist/fonts/fa-solid-900.ttf') format('truetype'),
url('@@{website_root_directory}/dist/fonts/fa-solid-900.svg#fontawesome') format('svg');
}
.fa,
.fas {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
@font-face {
font-family: 'Font Awesome 5 Brands';
font-style: normal;
font-weight: 400;
font-display: $fa-font-display;
src: url('@@{website_root_directory}/dist/fonts/fa-brands-400.eot');
src: url('@@{website_root_directory}/dist/fonts/fa-brands-400.eot?#iefix') format('embedded-opentype'),
url('@@{website_root_directory}/dist/fonts/fa-brands-400.woff2') format('woff2'),
url('@@{website_root_directory}/dist/fonts/fa-brands-400.woff') format('woff'),
url('@@{website_root_directory}/dist/fonts/fa-brands-400.ttf') format('truetype'),
url('@@{website_root_directory}/dist/fonts/fa-brands-400.svg#fontawesome') format('svg');
}
.fab {
font-family: 'Font Awesome 5 Brands';
font-weight: 400;
}
@font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 400;
font-display: $fa-font-display;
src: url('@@{website_root_directory}/dist/fonts/fa-regular-400.eot');
src: url('@@{website_root_directory}/dist/fonts/fa-regular-400.eot?#iefix') format('embedded-opentype'),
url('@@{website_root_directory}/dist/fonts/fa-regular-400.woff2') format('woff2'),
url('@@{website_root_directory}/dist/fonts/fa-regular-400.woff') format('woff'),
url('@@{website_root_directory}/dist/fonts/fa-regular-400.ttf') format('truetype'),
url('@@{website_root_directory}/dist/fonts/fa-regular-400.svg#fontawesome') format('svg');
}
.far {
font-family: 'Font Awesome 5 Free';
font-weight: 400;
}
</ style >
<!-- Overwrite Font Files end -->
<!-- SEO
============================================= -->
{{helmetMeta}}
{{helmetLink}}
< meta name =" generator " content =" @@{website_generator} " />
< meta name =" author " content =" @@{website_author} " />
<!-- SEO end -->
<!-- Favicons
============================================= -->
< link rel =" icon " href =" @@{website_root_directory}/assets/images/favicon/favicon-32x32.png " type =" image/x-icon " />
< link rel =" shortcut icon " href =" @@{website_root_directory}/assets/images/favicon/favicon-32x32.png " sizes =" 32x32 " />
< link rel =" apple-touch-icon " href =" @@{website_root_directory}/assets/images/favicon/apple-touch-icon-57x57.png " />
< link rel =" apple-touch-icon " sizes =" 72x72 " href =" @@{website_root_directory}/assets/images/favicon/apple-touch-icon-72x72.png " />
< link rel =" apple-touch-icon " sizes =" 114x114 " href =" @@{website_root_directory}/assets/images/favicon/apple-touch-icon-114x114.png " />
<!-- Favicons end -->
</ head >
< body {{helmetBodyAttributes}} >
< noscript >
You need to enable JavaScript to run this app.
</ noscript >
< div id =" app " > {{reactApp}} </ div >
<!-- Your Plugins & Theme Scripts
============================================= -->
< script >
var REVISION = "@@{website_version}" ,
APP_ROOTPATH = {
"templateUrl" : "@@{website_root_directory}" , //If the file is in the root directory, you can leave it empty. If in another directory, you can write: "/blog" (but no trailing slash)
"homeUrl" : "" , //Eg. https://uiux.cc
"ajaxUrl" : "" //Eg. https://uiux.cc/wp-admin/admin-ajax.php
} ;
</ script >
< script > window . __PRELOADED_STATE__ = { { preloadedState } } ; </ script >
< script src =" @@{website_root_directory}/dist/js/ poemkit .min.js?ver=@@{website_hash} " > </ script >
<!-- Your Plugins & Theme Scripts end -->
</ body >
</ html > يتم إنشاء الملف ./public/manifest.json تلقائيًا استنادًا إلى ./src/config/tmpl-manifest.json
يمكنك تكوين دقة الوحدة عن طريق إضافة الدقة إلى webpack.config.js . إذا كنت تستخدم مسارًا نسبيًا عند استيراد وحدة نمطية أخرى، فسيكون ذلك مزعجًا لأنه سيتعين عليك اكتشاف جميع المسارات النسبية. لذلك، يمكنك إضافة اسم مستعار لتسهيل الأمر عليك.
webpack.config.js :
...
const alias = {
pathConfig : './src/config' ,
pathComponents : './src/client/components' ,
pathRouter : './src/client/router' ,
pathHelpers : './src/client/helpers' ,
pathServices : './src/client/services' ,
pathReducers : './src/client/reducers' ,
pathPages : './src/client/views/_pages' ,
pathActions : './src/client/actions' ,
pathServer : './src/server' ,
pathStore : './src/store'
} ;
...
resolve : {
extensions : [ '.js' , '.jsx' , '.ts' , '.tsx' , '.scss' , '.sass' ] ,
alias : {
// specific mappings.
// Supports directories and custom aliases for specific files when the express server is running,
// you need to configure the `babel.config.js` and `tsconfig.json` at the same time
'@/config' : path . resolve ( __dirname , alias . pathConfig ) ,
'@/components' : path . resolve ( __dirname , alias . pathComponents ) ,
'@/router' : path . resolve ( __dirname , alias . pathRouter ) ,
'@/helpers' : path . resolve ( __dirname , alias . pathHelpers ) ,
'@/services' : path . resolve ( __dirname , alias . pathServices ) ,
'@/reducers' : path . resolve ( __dirname , alias . pathReducers ) ,
'@/pages' : path . resolve ( __dirname , alias . pathPages ) ,
'@/actions' : path . resolve ( __dirname , alias . pathActions ) ,
'@/server' : path . resolve ( __dirname , alias . pathServer ) ,
'@/store' : path . resolve ( __dirname , alias . pathStore ) ,
}
} ,
... babel.config.js :
...
"plugins" : [
[ "module-resolver" , {
"root" : [ "./src" ] ,
"alias" : {
"@/config" : "./src/config" ,
"@/components" : "./src/client/components" ,
"@/router" : "./src/client/router" ,
"@/helpers" : "./src/client/helpers" ,
"@/services" : "./src/client/services" ,
"@/reducers" : "./src/client/reducers" ,
"@/pages" : "./src/client/views/_pages" ,
"@/actions" : "./src/client/actions" ,
"@/server" : "./src/server" ,
"@/store" : "./src/store"
}
} ]
]
. . . tsconfig.json :
{
"compilerOptions" : {
"baseUrl" : " ./src " ,
"paths" : {
"@/config/*" : [ " config/* " ],
"@/components/*" : [ " client/components/* " ],
"@/router/*" : [ " client/router/* " ],
"@/helpers/*" : [ " client/helpers/* " ],
"@/services/*" : [ " client/services/* " ],
"@/reducers/*" : [ " client/reducers/* " ],
"@/pages/*" : [ " client/views/_pages/* " ],
"@/actions/*" : [ " client/actions/* " ],
"@/server/*" : [ " server/* " ],
"@/store/*" : [ " store/* " ]
}
}
} package.json :
{
"jest" : {
"testEnvironment" : " jsdom " ,
"moduleNameMapper" : {
" \ .(css|less|scss|sass)$" : " identity-obj-proxy " ,
"^@/config/(.*)" : " <rootDir>/src/config/$1 " ,
"^@/components/(.*)" : " <rootDir>/src/client/components/$1 " ,
"^@/router/(.*)" : " <rootDir>/src/client/router/$1 " ,
"^@/helpers/(.*)" : " <rootDir>/src/client/helpers/$1 " ,
"^@/services/(.*)" : " <rootDir>/src/client/services/$1 " ,
"^@/reducers/(.*)" : " <rootDir>/src/client/reducers/$1 " ,
"^@/pages/(.*)" : " <rootDir>/src/client/views/_pages/$1 " ,
"^@/actions/(.*)" : " <rootDir>/src/client/actions/$1 " ,
"^@/server/(.*)" : " <rootDir>/src/server/$1 " ,
"^@/store/(.*)" : " <rootDir>/src/store/$1 "
},
"transform" : {
"^.+ \ .(js|jsx)$" : " babel-jest " ,
"^.+ \ .(ts|tsx)?$" : " ts-jest "
}
}
} استخدم المخرجات الموجودة في webpack.config.js لتكوين الإعدادات المتعلقة بالمكتبة مثل نوع الوحدة ومساحة الاسم.
...
const globs = {
port : 8080 ,
examples : 'public' ,
build : 'src/client' ,
dist : 'dist'
} ;
...
output : {
path : path . resolve ( __dirname , './' + globs . dist + '/js' ) ,
filename : '[name].js'
} ,
... يمكنك تحديث العناصر النائبة في القوالب عن طريق تعديل تكوين معلومات الموقع لـ package.json . مثله:
{
"author" : " UIUX Lab " ,
"name" : " poemkit " ,
"email" : " [email protected] " ,
"version" : " 1.0.0 " ,
"projectName" : " poemkit " ,
"createdInfo" : " UIUX Lab (https://uiux.cc) " ,
"projectURL" : " https://uiux.cc " ,
"description" : " React toolkit for building a full website that also is a Micro-Frontend Architecture " ,
...
} تكوين المسارات، وهو أيضًا التنقل الأساسي لموقع الويب (لا يشمل تكوين المسارات المتداخلة التي سيتم تكوينها على الصفحة في التنقل الأساسي). الوصول إلى ./src/client/router/RoutesConfig.js .
يمكن تعديل بعض البرامج النصية لجهاز التوجيه في الملف ./src/client/router/App.js .
يمكن تعديل بعض البرامج النصية الموجودة على جانب الخادم في الملف ./src/server/renderer.js .
لتشغيل كل من الخادم وتطبيق React في نفس الوقت، نحتاج إلى إضافة مفتاح proxy إلى package.json . لقد قمنا بالفعل بإعداد خادمنا ليعمل على المنفذ 3000، لذا قم بتوجيه الوكيل إلى localhost:3000 .
{
"proxy" : " http://localhost:3000 " ,
...
}PropTypes للتحقق من النوع: $ npm run devوبعد ذلك، يمكنك استخدام كود JavaScript التالي لتصحيحه. عرض رسائل الخطأ والتحذير في المحطة.
import PropTypes from "prop-types" ;
import React , { Component } from 'react' ;
export default class YourComponentName extends Component {
public static propTypes = { } ;
constructor ( props ) {
super ( props ) ;
}
render ( ) { ... }
}
if ( process . env . NODE_ENV === 'development' ) {
YourComponentName . propTypes = {
displayEnable : PropTypes . bool . isRequired ,
htmlString : PropTypes . oneOfType ( [ PropTypes . string , PropTypes . object ] )
}
} يقوم التطبيق بتحميل بعض مكتبات الطرف الثالث (الأيقونات، والرسوم المتحركة، والمحركات ثلاثية الأبعاد، وما إلى ذلك) بشكل افتراضي، ويمكنك تحميلها حسب الحاجة، أو تعديل ملف التكوين. الوصول إلى ./src/client/components/_plugins/
يتم استخدام المكونات الإضافية التابعة لجهات خارجية مع المكونات المخصصة بشكل افتراضي، ويمكنك أيضًا إزالتها.
قم بتغيير الدليل الجذر لموقع الويب بحيث يمكن استخدامه عند تحميل المشروع إلى دليل آخر. قم بتعديل rootDirectory الرئيسي لـ ./src/config/websiteConfig.js .
إذا كان الملف موجودًا في الدليل الجذر، فيمكنك تركه فارغًا. إذا كنت في دليل آخر، يمكنك الكتابة: "/ بلوق". (بدون شرطة مائلة زائدة)
{
"rootDirectory" : " "
} يُستخدم عنوان الموقع (URL) بشكل عام لتحسين محركات البحث. قم بتعديل siteUrl الرئيسي لـ ./src/config/websiteConfig.js . سيتم تسمية عنوان URL https://domain-name.com (بدون شرطة مائلة زائدة ودليل فرعي)
{
"siteUrl" : " "
} قم بتغيير عناوين URL لواجهة برمجة التطبيقات (API) لموقع الويب. قم بتعديل API الرئيسية لـ ./src/config/websiteConfig.js ، كما هو موضح أدناه:
{
"API" : {
"RECEIVE_DEMO_LIST" : " https://apiurl1.com " ,
"RECEIVE_DEMO_LISTDETAIL" : " https://apiurl2.com "
}
}العثور على الأخطاء أو إرسال طلبات السحب أو تحسين مستنداتنا - نرحب بأي مساهمة ونقدرها بشدة. للبدء، توجه إلى إرشادات المساهمة الخاصة بنا. شكرًا!
الإصدارات
| الكروم | فايرفوكس | حافة | أي | سفاري | الأوبرا | دائرة الرقابة الداخلية | أندرويد |
|---|---|---|---|---|---|---|---|
| >= 49 | >= 45 | >=14 | >=11 | >= 9 | >= 30 | >=10 | >=4.4 |
مرخص تحت معهد ماساتشوستس للتكنولوجيا.
