Câu hỏi 1:

Chính xác mục đích của việc cài đặt Twitter Bootstrap qua npm là gì? Tôi nghĩ rằng npm có nghĩa là cho các mô-đun phía máy chủ. Có tự phục vụ các tệp bootstrap nhanh hơn so với sử dụng CDN không?

Câu hỏi 2:

Nếu tôi cài đặt Bootstrap, tôi sẽ trỏ đến các tệp bootstrap.js và bootstrap.css như thế nào?

1. Điểm quan trọng của việc sử dụng CDN là nhanh hơn , trước hết, vì đây là mạng phân tán , nhưng thứ hai, vì các tệp tĩnh đang được các trình duyệt lưu vào bộ nhớ cache và rất có thể, ví dụ, jquerythư viện của CDN là trang web của bạn việc sử dụng đã được trình duyệt của người dùng tải xuống và do đó, tệp đã được lưu trong bộ nhớ cache và do đó không có quá trình tải xuống không cần thiết nào diễn ra. Điều đó đang được nói, nó vẫn là một ý tưởng tốt để cung cấp một dự phòng .

   Bây giờ, điểm của gói npm của bootstrap

   là nó cung cấp tệp javascript của bootstrap dưới dạng một mô-đun . Như đã được đề cập ở trên, điều này làm cho nó có thể requiresử dụng browserify , đây là trường hợp sử dụng có khả năng nhất và theo tôi hiểu, đó là lý do chính khiến bootstrap được xuất bản vào npm.

2. Làm thế nào để sử dụng nó

   Hãy tưởng tượng cấu trúc dự án sau:

   dự án
   | - node_modules
   | - công cộng
   | | - css
   | | - img
   | | - js
   | | - index.html
   | - pack.json
   
   

Trong của index.htmlbạn, bạn có thể tham khảo cả cssvà jscác tập tin như thế này:

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

Đó là cách đơn giản nhất và chính xác cho các .csstập tin. Nhưng sẽ tốt hơn nhiều nếu bao gồm bootstrap.jstệp như thế này ở đâu đó trong public/js/*.jstệp của bạn :

var bootstrap = require('bootstrap');

Và bạn chỉ bao gồm mã này trong các javascripttệp mà bạn thực sự cần bootstrap.js. Browserify chăm sóc bao gồm tập tin này cho bạn.

Bây giờ, nhược điểm là bây giờ bạn có các tệp mặt trước của mình dưới dạng node_modulesphụ thuộc và node_modulesthư mục thường không được kiểm tra git. Tôi nghĩ rằng đây là phần gây tranh cãi nhất, với nhiều ý kiến và giải pháp .

CẬP NHẬT tháng 3 năm 2017

Gần hai năm đã trôi qua kể từ khi tôi viết câu trả lời này và một bản cập nhật được đưa ra.

Bây giờ cách thường được chấp nhận là sử dụng một gói như webpack (hoặc một gói lựa chọn khác) để gói tất cả tài sản của bạn trong một bước xây dựng.

Đầu tiên, nó cho phép bạn sử dụng cú pháp commonjs giống như browserify, vì vậy để bao gồm mã js bootstrap trong dự án của bạn, bạn cũng làm như vậy:

const bootstrap = require('bootstrap');

Đối với các csstập tin, webpack được gọi là " bộ tải ". Họ cho phép bạn viết điều này trong mã js của bạn:

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

và các tệp css sẽ được "đưa vào" một cách kỳ diệu trong bản dựng của bạn. Chúng sẽ được thêm động dưới dạng <style />thẻ khi ứng dụng của bạn chạy, nhưng bạn có thể định cấu hình gói web để xuất chúng dưới dạng csstệp riêng biệt . Bạn có thể đọc thêm về điều đó trong tài liệu của webpack.

Tóm lại là.

1. Bạn nên "bó" mã ứng dụng của mình với một gói
2. Bạn không nên cam kết node_modulescác tệp được tạo động cho git. Bạn có thể thêm một buildtập lệnh vào npm sẽ được sử dụng để triển khai các tệp trên máy chủ. Dù sao, điều này có thể được thực hiện theo những cách khác nhau tùy thuộc vào quá trình xây dựng ưa thích của bạn.

Nếu bạn NPM các mô-đun đó, bạn có thể phục vụ chúng bằng chuyển hướng tĩnh.

Đầu tiên cài đặt các gói:

npm install jquery
npm install bootstrap

Sau đó, trên 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

Sau đó, cuối cùng, tại .html:

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

Tôi sẽ không phục vụ các trang trực tiếp từ thư mục chứa tệp server.js của bạn (thường giống với node_modules) như đề xuất của timetowonder , theo cách đó mọi người có thể truy cập tệp server.js của bạn.

Tất nhiên bạn chỉ có thể tải xuống và sao chép và dán vào thư mục của mình, nhưng với NPM, bạn có thể chỉ cần cập nhật khi cần ... dễ dàng hơn, tôi nghĩ vậy.

Trả lời 1:

• Tải xuống bootstrap thông qua npm (hoặc bower) cho phép bạn đạt được một số thời gian trễ. Thay vì nhận tài nguyên từ xa, bạn lấy tài nguyên cục bộ, nhanh hơn, trừ khi bạn sử dụng cdn (kiểm tra câu trả lời bên dưới)

• "Npm" ban đầu để có được Mô-đun Node, nhưng với bản chính của ngôn ngữ Javascript (và sự ra đời của browserify), nó đã phát triển một chút. Trên thực tế, bạn thậm chí có thể tải xuống AngularJS vào npm, đó không phải là khung phía máy chủ. Browserify cho phép bạn sử dụng AMD / RequireJS / CommonJS ở phía máy khách để các mô-đun nút có thể được sử dụng ở phía máy khách.

Trả lời 2:

Nếu bạn cài đặt bootstrap (nếu bạn không sử dụng tệp grunt hoặc gulp cụ thể để di chuyển đến thư mục dist), bootstrap của bạn sẽ nằm trong "./node_modules/bootstrap/bootstrap.min.css" nếu tôi không sai.

1. Sử dụng npm / bower để cài đặt bootstrap nếu bạn muốn biên dịch lại / thay đổi ít tệp / kiểm tra. Với grunt sẽ dễ dàng hơn để làm điều này, như được hiển thị trên http://getbootstrap.com/getting-started/#grunt . Nếu bạn chỉ muốn thêm các thư viện được biên dịch sẵn, hãy tự đưa các tệp vào dự án.

2. Không, bạn phải tự làm điều này hoặc sử dụng công cụ grunt riêng. Ví dụ: 'grunt-contrib-concat' Cách ghép và thu nhỏ nhiều tệp CSS và JavaScript bằng Grunt.js (0.3.x)