1. CDN을 사용하는 요점은 무엇보다도 분산 네트워크 이기 때문에 더 빠르다 는 것이지만, 둘째는 정적 파일이 브라우저에 의해 캐시되고 있으며, 예를 들어 CDN의 라이브러리가 사이트 와 같은 가능성이 높기 때문입니다. 사용은 이미 사용자의 브라우저에 의해 다운로드되었으므로 파일이 캐시되었으므로 불필요한 다운로드가 발생하지 않습니다. 그럼에도 불구하고 여전히 폴백을 제공하는 것이 좋습니다 .jquery

   부트 스트랩의 npm 패키지의 요점

   부트 스트랩의 자바 스크립트 파일을 모듈 로 제공한다는 것 입니다. 위에서 언급했듯이 이것은 가장 유스 케이스 인 browserify를require 사용하여 가능합니다. 이를 이해하면 부트 스트랩이 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실제로 필요한 파일 에만이 코드를 포함 bootstrap.js시킵니다. Browserify 가이 파일을 포함시킵니다.

이제 단점은 이제 프런트 엔드 파일을 node_modules종속성으로 사용하고 node_modules폴더는 일반적으로로 체크인하지 않는다는 것입니다 git. 나는 이것이 많은 의견 과 해결책으로 가장 논란의 여지가있는 부분이라고 생각 한다 .

2017 년 3 월 업데이트

이 답변을 작성한 후 거의 2 년이 지났으며 업데이트가 이루어졌습니다.

지금 일반적으로 인정 된 방법은 사용하는 것입니다 들러 같은 웹팩 빌드 단계에서 모든 자산을 번들 (또는 선택한 다른 들러를).

먼저 browserify와 같은 commonjs 구문을 사용할 수 있으므로 프로젝트에 부트 스트랩 js 코드를 포함하려면 다음과 같이하십시오.

const bootstrap = require('bootstrap');

에 관해서는 css파일, 웹팩 때문에 “라고했다 로더 “. 그들은 당신이 당신의 js 코드에 이것을 쓸 수 있습니다 :

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

CSS 파일은 빌드에 “매직”포함됩니다. <style />앱이 실행될 때 태그 로 동적으로 추가 되지만 별도의 css파일 로 내보내도록 웹팩을 구성 할 수 있습니다 . 자세한 내용은 웹팩 설명서를 참조하십시오.

결론적으로.

1. 번 들러로 앱 코드를 “번들링”해야합니다
2. node_modules동적으로 빌드 된 파일을 git에 커밋 하거나 커밋해서는 안됩니다 . build서버에 파일을 배포하는 데 사용해야 하는 스크립트를 npm에 추가 할 수 있습니다 . 어쨌든, 이것은 선호하는 빌드 프로세스에 따라 다른 방식으로 수행 될 수 있습니다.

답변

npm install jquery
npm install bootstrap

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

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