រួមចំណែក

ជួយបង្កើត 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 តាមរយៈ npm ជាមួយគម្រោងចាប់ផ្តើមរបស់យើង! ទៅកាន់កន្លែង ផ្ទុកពុម្ពគំរូ tws/bootstrap-npm-starter ដើម្បីមើលពីរបៀបបង្កើត និងកំណត់ Bootstrap តាមបំណងនៅក្នុងគម្រោង npm ផ្ទាល់ខ្លួនរបស់អ្នក។ រួមបញ្ចូល Sass compiler, Autoprefixer, Stylelint, PurgeCSS និង Bootstrap Icons ។

សាស

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។