npm을 통해 Twitter Bootstrap을 설치하는 목적은 무엇입니까?

npm을 통해 Twitter Bootstrap을 설치하는 목적은 무엇입니까?

---

질문 1:

npm을 통해 Twitter Bootstrap을 설치하는 목적은 정확히 무엇입니까? npm은 서버 측 모듈을위한 것이라고 생각했습니다. CDN을 사용하는 것보다 부트 스트랩 파일을 직접 제공하는 것이 더 빠릅니까?

질문 2 :

npm 부트 스트랩을 설치하려면 bootstrap.js 및 bootstrap.css 파일을 어떻게 가리 킵니까?

---

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동적으로 작성된 파일을 커밋하지 않아야합니다. 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 파일에 액세스 할 수있는 방법 으로 timetowonder 에서 제안한 server.js 파일이있는 폴더 (일반적으로 node_modules와 동일)에서 직접 페이지를 제공하지 않습니다 .

물론 폴더에 간단하게 다운로드하여 복사하여 붙여 넣을 수 있지만 NPM을 사용하면 필요할 때 간단하게 업데이트 할 수 있습니다.

---

답변 1 :

• npm (또는 바우어)을 통해 부트 스트랩을 다운로드하면 약간의 대기 시간을 얻을 수 있습니다. 원격 리소스를 얻는 대신 로컬 리소스를 얻습니다 .cdn을 사용하는 경우를 제외하고는 더 빠릅니다 (아래 답변 확인).

• "npm"은 원래 Node Module을 얻기위한 것이었지만 Javascript 언어 (및 browserify의 출현)를 통해 약간 성장했습니다. 실제로 npm에서 AngularJS를 다운로드 할 수도 있습니다. 이는 서버 측 프레임 워크가 아닙니다. Browserify를 사용하면 클라이언트 측에서 노드 모듈을 사용할 수 있도록 클라이언트 측에서 AMD / RequireJS / CommonJS를 사용할 수 있습니다.

답변 2 :

부트 스트랩을 npm 설치하는 경우 (특정 grunt 또는 gulp 파일을 사용하여 dist 폴더로 이동하지 않는 경우) 부트 스트랩은 내가 잘못하지 않은 경우 "./node_modules/bootstrap/bootstrap.min.css"에 있습니다.

---

1. 재 컴파일하거나 파일 수를 줄이거 나 테스트하려는 경우 npm / bower를 사용하여 부트 스트랩을 설치하십시오. grunt를 사용하면 http://getbootstrap.com/getting-started/#grunt에 표시된 것처럼이 작업을 수행하는 것이 더 쉬울 것 입니다. 사전 컴파일 된 라이브러리 만 추가하려면 파일을 프로젝트에 수동으로 포함 시키십시오.

2. 아니요,이 작업을 직접 수행하거나 별도의 도구를 사용해야합니다. 예 : 'grunt-contrib- concat'Grunt.js (0.3.x)를 사용하여 여러 CSS 및 JavaScript 파일을 연결하고 최소화하는 방법

참고 URL : https://stackoverflow.com/questions/26773767/purpose-of-installing-twitter-bootstrap-through-npm