คำถามที่ 1:

อะไรคือจุดประสงค์ของการติดตั้ง Twitter Bootstrap ถึง npm ฉันคิดว่า npm มีความหมายสำหรับโมดูลฝั่งเซิร์ฟเวอร์ มันเร็วกว่าที่จะให้บริการไฟล์ bootstrap ด้วยตัวคุณเองมากกว่าการใช้ CDN หรือไม่?

คำถามที่ 2:

ถ้าฉันจะติดตั้ง Bootstrap ฉันจะชี้ไปยังไฟล์ bootstrap.js และ bootstrap.css ได้อย่างไร

1. จุดประสงค์ของการใช้ CDN คือเร็วกว่าสิ่งแรกเพราะเป็นเครือข่ายแบบกระจายแต่อย่างที่สองเพราะเบราว์เซอร์แบบคงที่และแคชไฟล์คงที่สูงเช่นjqueryห้องสมุดCDN ที่เว็บไซต์ของคุณ เบราว์เซอร์ของผู้ใช้ถูกดาวน์โหลดไปใช้แล้วไฟล์จึงถูกแคชดังนั้นจึงไม่มีการดาวน์โหลดที่ไม่จำเป็นเกิดขึ้น ที่ถูกกล่าวว่าก็ยังคงเป็นความคิดที่ดีที่จะให้ทางเลือก

   ตอนนี้จุดของแพคเกจ npm bootstrap

   คือมันให้บูตของจาวาสคริปต์ไฟล์เป็นโมดูล ดังที่ได้กล่าวไว้ข้างต้นสิ่งนี้ทำให้มันเป็นไปrequireได้โดยใช้browserifyซึ่งเป็นกรณีการใช้งานที่น่าจะเป็นไปได้มากที่สุดและอย่างที่ฉันเข้าใจเหตุผลหลักสำหรับ bootstrap ที่ถูกเผยแพร่ใน npm

2. วิธีใช้งาน

   ลองนึกภาพโครงสร้างโครงการต่อไปนี้:

   โครงการ
   | - node_modules
   | - สาธารณะ
   | | - css
   | | - img
   | | - js
   | | - index.html
   | - package.json
   
   

ในของindex.htmlคุณคุณสามารถอ้างอิงทั้งสองcssและjsไฟล์เช่นนี้:

<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

ซึ่งเป็นวิธีที่ง่ายที่สุดและถูกต้องสำหรับ.cssไฟล์ แต่จะเป็นการดีกว่ามากหากคุณรวมbootstrap.jsไฟล์นี้ไว้ในpublic/js/*.jsไฟล์ของคุณ:

var bootstrap = require('bootstrap');

และคุณรวมถึงรหัสนี้เฉพาะในผู้ที่ไฟล์ที่คุณต้องการจริงjavascript Browserifyดูแลรวมไฟล์นี้ให้คุณด้วยbootstrap.js

ตอนนี้ข้อเสียเปรียบคือว่าตอนนี้คุณมีไฟล์ front-end ของคุณเป็นnode_modulesอ้างอิงและโฟลเดอร์มักจะไม่ได้ตรวจสอบด้วยnode_modules gitฉันคิดว่านี่เป็นส่วนที่ถกเถียงกันมากที่สุดด้วยความคิดเห็นและการแก้ไขมากมาย

อัพเดทมีนาคม 2560

เกือบสองปีผ่านไปแล้วตั้งแต่ฉันเขียนคำตอบนี้และมีการอัปเดต

ตอนนี้วิธีที่ยอมรับกันโดยทั่วไปคือการใช้Bundlerเช่นwebpack (หรือ Bundler ของทางเลือกอื่น) ที่จะกำสินทรัพย์ทั้งหมดของคุณในการสร้างขั้นตอน

ประการแรกมันช่วยให้คุณใช้ไวยากรณ์ commonjs เช่นเดียวกับ browserify ดังนั้นเพื่อรวมรหัส bootstrap js ในโครงการของคุณคุณทำเช่นเดียวกัน:

const bootstrap = require('bootstrap');

ในส่วนของcssไฟล์นั้น webpack เรียกว่า " loader " พวกเขาอนุญาตให้คุณเขียนสิ่งนี้ในรหัส js ของคุณ:

require('bootstrap/dist/css/bootstrap.css');

และไฟล์ css จะถูกรวมไว้ในบิลด์ของคุณ พวกเขาจะถูกเพิ่มแบบไดนามิกเป็น<style />แท็กเมื่อแอปของคุณทำงาน แต่คุณสามารถกำหนดค่า webpack เพื่อส่งออกเป็นcssไฟล์แยกต่างหาก คุณสามารถอ่านเพิ่มเติมเกี่ยวกับสิ่งนั้นได้ในเอกสารประกอบของ webpack

สรุปแล้ว.

1. คุณควร "มัด" รหัสแอปของคุณด้วยบันเดิล
2. คุณไม่ควรกระทำทั้งnode_modulesไฟล์ที่สร้างขึ้นแบบไดนามิกเพื่อคอมไพล์ คุณสามารถเพิ่มbuildสคริปต์ลงใน npm ซึ่งควรใช้เพื่อปรับใช้ไฟล์บนเซิร์ฟเวอร์ อย่างไรก็ตามสิ่งนี้สามารถทำได้หลายวิธีขึ้นอยู่กับกระบวนการสร้างที่คุณต้องการ

หากคุณ NPM โมดูลเหล่านั้นคุณสามารถให้บริการได้โดยใช้การเปลี่ยนเส้นทางแบบคงที่

ก่อนติดตั้งแพคเกจ:

npm install jquery
npm install bootstrap

จากนั้นบน server.js:

var express = require('express');
var app = express();

// prepare server
app.use('/api', api); // redirect API calls
app.use('/', express.static(__dirname + '/www')); // redirect root
app.use('/js', express.static(__dirname + '/node_modules/bootstrap/dist/js')); // redirect bootstrap JS
app.use('/js', express.static(__dirname + '/node_modules/jquery/dist')); // redirect JS jQuery
app.use('/css', express.static(__dirname + '/node_modules/bootstrap/dist/css')); // redirect CSS bootstrap

จากนั้นในที่สุดที่. html:

<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>

ฉันจะไม่ให้บริการหน้าโดยตรงจากโฟลเดอร์ที่ไฟล์ server.js ของคุณ (ซึ่งมักจะเหมือนกับ node_modules) ตามที่เสนอโดย schedowonderเพื่อให้ผู้ใช้สามารถเข้าถึงไฟล์ server.js ของคุณได้

แน่นอนคุณสามารถดาวน์โหลดและคัดลอกและวางในโฟลเดอร์ของคุณ แต่ด้วย NPM คุณสามารถอัปเดตเมื่อจำเป็น ... ง่ายกว่าฉันคิด

ตอบ 1:

• การดาวน์โหลด bootstrap ผ่าน npm (หรือ bower) อนุญาตให้คุณใช้เวลาแฝง แทนที่จะได้รับทรัพยากรระยะไกลคุณจะได้รับทรัพยากรในท้องถิ่นมันเร็วกว่ายกเว้นถ้าคุณใช้ cdn (ตรวจสอบคำตอบด้านล่าง)

• "npm" เดิมเพื่อรับ Node Module แต่ด้วยเรียงความของภาษา Javascript (และการกำเนิดของ browserify) มันมีการเติบโตขึ้นเล็กน้อย ในความเป็นจริงคุณสามารถดาวน์โหลด AngularJS ได้ที่ npm นั่นไม่ใช่กรอบงานด้านเซิร์ฟเวอร์ Browserify อนุญาตให้คุณใช้ AMD / RequireJS / CommonJS ในฝั่งไคลเอ็นต์เพื่อให้สามารถใช้โมดูลโหนดในฝั่งไคลเอ็นต์

ตอบ 2:

หากคุณ npm ติดตั้ง bootstrap (ถ้าคุณไม่ใช้ไฟล์ grunt หรือ gulp เฉพาะเพื่อย้ายไปยังโฟลเดอร์ dist) bootstrap ของคุณจะอยู่ใน "./node_modules/bootstrap/bootstrap.min.css" ถ้าฉันไม่ผิด

1. ใช้ npm / bower เพื่อติดตั้ง bootstrap หากคุณต้องการคอมไพล์ใหม่ / เปลี่ยนไฟล์ / ทดสอบน้อยลง ด้วยการทำเสียงฮึดฮัดมันจะง่ายต่อการทำเช่นนี้ตามที่แสดงบนhttp://getbootstrap.com/getting-started/#grunt หากคุณต้องการเพิ่มไลบรารีที่คอมไพล์แล้วเท่านั้นโปรดรวมไฟล์ไว้ในโปรเจ็กต์ด้วยตนเอง

2. ไม่ได้คุณต้องทำด้วยตัวเองหรือใช้เครื่องมือเสี้ยงฮึดฮัดแยกต่างหาก ตัวอย่างเช่น 'grunt-contrib-concat' วิธีเชื่อมต่อและย่อขนาดไฟล์ CSS และ JavaScript หลายไฟล์ด้วย Grunt.js (0.3.x)