រំលងទៅមាតិកាសំខាន់ រំលងទៅការរុករកឯកសារ
in English

បង្កើតឧបករណ៍

ស្វែងយល់ពីរបៀបប្រើប្រាស់ស្គ្រីប npm ដែលរួមបញ្ចូលរបស់ Bootstrap ដើម្បីបង្កើតឯកសាររបស់យើង ចងក្រងកូដប្រភព ដំណើរការសាកល្បង និងច្រើនទៀត។

ការដំឡើងឧបករណ៍

Bootstrap ប្រើ អក្សរ npm សម្រាប់ប្រព័ន្ធបង្កើតរបស់វា។ package.json របស់យើង រួមបញ្ចូលវិធីសាស្រ្តងាយស្រួលសម្រាប់ធ្វើការជាមួយក្របខ័ណ្ឌ រួមទាំងការចងក្រងកូដ ការធ្វើតេស្តដែលកំពុងដំណើរការ និងច្រើនទៀត។

ដើម្បីប្រើប្រព័ន្ធបង្កើតរបស់យើង និងដំណើរការឯកសាររបស់យើងក្នុងមូលដ្ឋាន អ្នកនឹងត្រូវការច្បាប់ចម្លងនៃឯកសារប្រភព និង Node របស់ Bootstrap ។ អនុវត្តតាមជំហានទាំងនេះ ហើយអ្នកគួរតែត្រៀមខ្លួនដើម្បីរញ្ជួយ៖

  1. ទាញយក និងដំឡើង Node.js ដែលយើងប្រើដើម្បីគ្រប់គ្រងភាពអាស្រ័យរបស់យើង។
  2. ទាំង ទាញយកប្រភពរបស់ Bootstrap ឬបំបែក ឃ្លាំងរបស់ Bootstrap
  3. រុករកទៅ /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 គំរូ និងច្រើនទៀត។ នេះជារបៀបចាប់ផ្តើម៖

  1. ដំណើរការតាមរយៈការ ដំឡើងឧបករណ៍ ខាងលើដើម្បីដំឡើងភាពអាស្រ័យទាំងអស់។
  2. ពី /bootstrapថត root រត់ npm run docs-serveក្នុងបន្ទាត់ពាក្យបញ្ជា។
  3. បើក http://localhost:9001/នៅក្នុងកម្មវិធីរុករករបស់អ្នក ហើយvoilà។

ស្វែងយល់បន្ថែមអំពីការប្រើប្រាស់ Hugo ដោយអាន ឯកសារ របស់វា ។

ការ​ដោះស្រាយ​បញ្ហា

ប្រសិនបើអ្នកជួបប្រទះបញ្ហាក្នុងការដំឡើងភាពអាស្រ័យ សូមលុបកំណែពឹងផ្អែកពីមុនទាំងអស់ (សកល និងក្នុងស្រុក)។ បន្ទាប់មក ដំណើរការឡើងវិញ npm install