បង្កើតឧបករណ៍
ស្វែងយល់ពីរបៀបប្រើប្រាស់ស្គ្រីប npm ដែលរួមបញ្ចូលរបស់ Bootstrap ដើម្បីបង្កើតឯកសាររបស់យើង ចងក្រងកូដប្រភព ដំណើរការសាកល្បង និងច្រើនទៀត។
ការដំឡើងឧបករណ៍
Bootstrap ប្រើ អក្សរ npm សម្រាប់ប្រព័ន្ធបង្កើតរបស់វា។ package.json របស់យើង រួមបញ្ចូលវិធីសាស្រ្តងាយស្រួលសម្រាប់ធ្វើការជាមួយក្របខ័ណ្ឌ រួមទាំងការចងក្រងកូដ ការធ្វើតេស្តដែលកំពុងដំណើរការ និងច្រើនទៀត។
ដើម្បីប្រើប្រព័ន្ធបង្កើតរបស់យើង និងដំណើរការឯកសាររបស់យើងក្នុងមូលដ្ឋាន អ្នកនឹងត្រូវការច្បាប់ចម្លងនៃឯកសារប្រភព និង Node របស់ Bootstrap ។ អនុវត្តតាមជំហានទាំងនេះ ហើយអ្នកគួរតែត្រៀមខ្លួនដើម្បីរញ្ជួយ៖
- ទាញយក និងដំឡើង Node.js ដែលយើងប្រើដើម្បីគ្រប់គ្រងភាពអាស្រ័យរបស់យើង។
- ទាំង ទាញយកប្រភពរបស់ Bootstrap ឬបំបែក ឃ្លាំងរបស់ Bootstrap ។
- រុករកទៅ
/bootstrapថត root ហើយរត់npm installដើម្បីដំឡើងភាពអាស្រ័យក្នុងតំបន់របស់យើងដែលបានរាយក្នុង package.json ។
នៅពេលបញ្ចប់ អ្នកនឹងអាចដំណើរការពាក្យបញ្ជាផ្សេងៗដែលបានផ្តល់ពីបន្ទាត់ពាក្យបញ្ជា។
ដោយប្រើអក្សរ npm
package.json របស់យើង រួមបញ្ចូលកិច្ចការជាច្រើនសម្រាប់ការអភិវឌ្ឍន៍គម្រោង។ រត់ npm runដើម្បីមើលអក្សរ npm ទាំងអស់នៅក្នុងស្ថានីយរបស់អ្នក។ ភារកិច្ចចម្បងរួមមាន:
| កិច្ចការ | ការពិពណ៌នា |
|---|---|
npm start |
ចងក្រង CSS និង JavaScript បង្កើតឯកសារ និងចាប់ផ្តើមម៉ាស៊ីនមេមូលដ្ឋាន។ |
npm run dist |
បង្កើត dist/ថតឯកសារជាមួយឯកសារចងក្រង។ ទាមទារ Sass , Autoprefixer និង terser ។ |
npm test |
ដំណើរការការធ្វើតេស្តក្នុងមូលដ្ឋានបន្ទាប់ពីដំណើរការnpm run dist |
npm run docs-serve |
បង្កើត និងដំណើរការឯកសារក្នុងមូលដ្ឋាន។ |
សាស
Bootstrap ប្រើ Dart Sass សម្រាប់ការចងក្រងឯកសារប្រភព Sass របស់យើងចូលទៅក្នុងឯកសារ CSS (រួមបញ្ចូលនៅក្នុងដំណើរការបង្កើតរបស់យើង) ហើយយើងណែនាំអ្នកឱ្យធ្វើដូចគ្នាប្រសិនបើអ្នកកំពុងចងក្រង Sass ដោយប្រើបំពង់បង្ហូរទ្រព្យសកម្មរបស់អ្នក។ ពីមុនយើងធ្លាប់ប្រើ Node Sass សម្រាប់ Bootstrap v4 ប៉ុន្តែ LibSass និងកញ្ចប់ដែលបង្កើតនៅលើវា រួមទាំង Node Sass ឥឡូវនេះ ត្រូវបាន បដិសេធ ។
Dart Sass ប្រើភាពជាក់លាក់នៃការបង្គត់ចំនួន 10 ហើយសម្រាប់ហេតុផលប្រសិទ្ធភាពមិនអនុញ្ញាតឱ្យមានការកែតម្រូវតម្លៃនេះទេ។ យើងមិនបន្ថយភាពជាក់លាក់នេះក្នុងអំឡុងពេលដំណើរការបន្ថែមទៀតនៃ CSS ដែលបានបង្កើតរបស់យើង ដូចជាអំឡុងពេលការបង្រួមតូច ប៉ុន្តែប្រសិនបើអ្នកជ្រើសរើសធ្វើដូច្នេះ យើងសូមណែនាំឱ្យរក្សាភាពជាក់លាក់យ៉ាងហោចណាស់ 6 ដើម្បីការពារបញ្ហាជាមួយនឹងការបង្គត់កម្មវិធីរុករក។
បុព្វបទស្វ័យប្រវត្តិ
Bootstrap ប្រើ Autoprefixer (រួមបញ្ចូលនៅក្នុងដំណើរការបង្កើតរបស់យើង) ដើម្បីបន្ថែមបុព្វបទរបស់អ្នកលក់ដោយស្វ័យប្រវត្តិទៅលក្ខណៈសម្បត្តិ CSS មួយចំនួននៅពេលបង្កើត។ ការធ្វើដូច្នេះជួយយើងសន្សំសំចៃពេលវេលា និងកូដដោយអនុញ្ញាតឱ្យយើងសរសេរផ្នែកសំខាន់ៗនៃ CSS របស់យើងក្នុងពេលតែមួយ ខណៈពេលដែលលុបបំបាត់តម្រូវការសម្រាប់អ្នកលក់ mixins ដូចអ្វីដែលបានរកឃើញនៅក្នុង v3 ។
យើងរក្សាបញ្ជីកម្មវិធីរុករកដែលគាំទ្រតាមរយៈ Autoprefixer នៅក្នុងឯកសារដាច់ដោយឡែកមួយនៅក្នុងឃ្លាំង GitHub របស់យើង។ សូមមើល .browserslistrc សម្រាប់ព័ត៌មានលម្អិត។
RTLCSS
Bootstrap ប្រើ RTLCSS ដើម្បីដំណើរការ CSS ដែលបានចងក្រង ហើយបំប្លែងពួកវាទៅជា RTL – ជាមូលដ្ឋានជំនួសលក្ខណៈសម្បត្តិដឹងអំពីទិសដៅផ្ដេក (ឧ. padding-left) ដោយផ្ទុយពីពួកវា។ វាអនុញ្ញាតឱ្យយើងសរសេរ CSS របស់យើងតែម្តងគត់ ហើយធ្វើការកែប្រែបន្តិចបន្តួចដោយប្រើ ការគ្រប់គ្រង RTLCSS និង ការណែនាំ តម្លៃ ។
ឯកសារក្នុងស្រុក
ការដំណើរការឯកសាររបស់យើងក្នុងមូលដ្ឋានតម្រូវឱ្យប្រើប្រាស់ Hugo ដែលត្រូវបានដំឡើងតាមរយៈ កញ្ចប់ hugo -bin npm។ Hugo គឺជាម៉ាស៊ីនបង្កើតគេហទំព័រឋិតិវន្តដែលមានល្បឿនលឿន និងអាចពង្រីកបានដែលផ្តល់ឱ្យយើងនូវ៖ រួមមានជាមូលដ្ឋាន ឯកសារដែលមានមូលដ្ឋានលើ Markdown គំរូ និងច្រើនទៀត។ នេះជារបៀបចាប់ផ្តើម៖
- ដំណើរការតាមរយៈការ ដំឡើងឧបករណ៍ ខាងលើដើម្បីដំឡើងភាពអាស្រ័យទាំងអស់។
- ពី
/bootstrapថត root រត់npm run docs-serveក្នុងបន្ទាត់ពាក្យបញ្ជា។ - បើក
http://localhost:9001/នៅក្នុងកម្មវិធីរុករករបស់អ្នក ហើយvoilà។
ស្វែងយល់បន្ថែមអំពីការប្រើប្រាស់ Hugo ដោយអាន ឯកសារ របស់វា ។
ការដោះស្រាយបញ្ហា
ប្រសិនបើអ្នកជួបប្រទះបញ្ហាក្នុងការដំឡើងភាពអាស្រ័យ សូមលុបកំណែពឹងផ្អែកពីមុនទាំងអស់ (សកល និងក្នុងស្រុក)។ បន្ទាប់មក ដំណើរការឡើងវិញ npm install។