poemkit
PoemKit Stable
บทกวีชุด " width="180" style="max-width: 100%;">
ชุดเว็บฟรีพร้อม React เพื่อการออกแบบและพัฒนาเว็บไซต์ที่รวดเร็วผ่าน SSR นอกจากนี้ยังเป็นสถาปัตยกรรม Micro-Frontend การใช้ react, redux, เราเตอร์, axios และ express โปรเจ็กต์นี้ถูกบูทด้วยไลบรารี nodejs Project รองรับการปรับใช้อัตโนมัติจากบริการโฮสต์พื้นที่เก็บข้อมูลจำนวนหนึ่งผ่าน pm2 poemkit มอบองค์ประกอบ UI ในตัวมากกว่า 50+ รายการ สำหรับการสร้างแอปพลิเคชันเว็บสมัยใหม่
poemkit สามารถทำงานและปรับใช้ผ่านคำสั่งได้ แต่ก็ยังต้องมีการเขียนโค้ดจริงไว้ข้างหลัง ชุดคิทเหล่านี้ทำหน้าที่เป็นส่วนประกอบ UI และโมดูลลอจิกบางตัวที่สามารถรวมเข้ากับเว็บไซต์จริงหรือต้นแบบแอปพลิเคชัน ซึ่งยังคงต้องใช้ฟังก์ชันการเขียนโปรแกรมเพื่อให้สามารถทำงานได้ในโลกแห่งความเป็นจริง poemkit ตรงตามข้อกำหนดของ webpack ที่ปรับแต่งได้อย่างเต็มที่
- คุณยังสามารถใช้ไลบรารีส่วนประกอบ 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หรือโคลน repo เพื่อรับไฟล์ต้นฉบับทั้งหมดรวมถึงสคริปต์บิลด์:
$ 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หากการติดตั้งยังคงล้มเหลว โปรดใช้วิธีนี้: ลบ devDependencies , dependencies และ peerDependencies ใน
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 (ไม่บังคับ) ปรับใช้เซิร์ฟเวอร์โหนดบนเซิร์ฟเวอร์โฮสต์
โปรดรันคำสั่ง build ก่อนที่จะปรับใช้ (หากไม่ได้ผลเนื่องจากสิทธิ์ของ Node ให้ใช้คำสั่งต่อไปนี้)
$ npm run deploy หยุดการปรับใช้ที่มีอยู่
$ npm run destroyขั้นตอนที่ 7 (ไม่บังคับ) การทดสอบหน่วย
$ npm run testบันทึก:
ก) ข้อผิดพลาด: การตรวจสอบการอัปเดต NPM ล้มเหลว
สารละลาย:
$ sudo chown -R $USER : $( id -gn $USER ) /Users/{username}/.configb) ข้อผิดพลาด: Node sass เวอร์ชัน 6.xx เข้ากันไม่ได้กับ ^ 4.xx
สารละลาย:
$ npm install [email protected]c) หากคุณอัพเกรดเวอร์ชันของ 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_modulesb）ข้อผิดพลาด: JavaScript ฮีปมีหน่วยความจำไม่เพียงพอ
มีขีดจำกัดมาตรฐานที่เข้มงวดสำหรับการใช้งานหน่วยความจำใน V8 ให้มีสูงสุด ~1GB (32 บิต) และ ~1.7GB (64 บิต) หากคุณไม่เพิ่มด้วยตนเอง
สารละลาย:
export NODE_OPTIONS=--max_old_space_size=4096c) ข้อผิดพลาด: 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 packaging โดยใช้คำสั่งสองคำสั่งต่อไปนี้:
$ sudo apt update
$ sudo apt install nginxหรือ
$ sudo yum install nginx -yเริ่ม Nginx:
$ 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 ในสคริปต์เราจะระบุคำสั่งสำเร็จรูปสำหรับแอสเซมบลี webpack ในเวอร์ชันที่ใช้งานจริง
"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 จากนั้นเราได้รับตัวแปรนี้ระหว่างการดำเนินการ webpack
ขั้นตอนที่ 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 ] )
}
} แอปพลิเคชันจะโหลดไลบรารีของบุคคลที่สาม (ไอคอน ภาพเคลื่อนไหว เอ็นจิ้น 3 มิติ ฯลฯ) ตามค่าเริ่มต้น คุณสามารถโหลดไลบรารีเหล่านั้นได้ตามต้องการ หรือแก้ไขไฟล์การกำหนดค่า เข้าถึง ./src/client/components/_plugins/
ปลั๊กอินของบริษัทอื่นจะใช้ร่วมกับส่วนประกอบแบบกำหนดเองตามค่าเริ่มต้น และคุณยังสามารถลบออกได้อีกด้วย
เปลี่ยนไดเร็กทอรีรากของเว็บไซต์เพื่อให้สามารถใช้งานได้เมื่อคุณอัปโหลดโปรเจ็กต์ไปยังไดเร็กทอรีอื่น แก้ไขคีย์ rootDirectory ของ ./src/config/websiteConfig.js
หากไฟล์อยู่ในไดเร็กทอรีราก คุณสามารถปล่อยว่างไว้ได้ หากอยู่ในไดเร็กทอรีอื่น คุณสามารถเขียน: "/blog" (ไม่มีเครื่องหมายสแลชต่อท้าย)
{
"rootDirectory" : " "
} โดยทั่วไปที่อยู่เว็บไซต์ (URL) จะใช้สำหรับการเพิ่มประสิทธิภาพ SEO แก้ไขคีย์ 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 |
ได้รับอนุญาตภายใต้ MIT
