npm을 통해 트위터 부트스트랩을 설치하는 목적은 무엇입니까?

npm을 통해 트위터 부트스트랩을 설치하는 목적은 무엇입니까?

질문 1:

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

질문 2:

만약 내가 부트스트랩을 npm으로 설치한다면, bootstrap.js 및 bootstrap.css 파일을 어떻게 가리킬까요?

이러한 모듈을 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 파일에 액세스할 수 있도록 server.js 파일이 있는 폴더(일반적으로 node_modules와 동일)에서 직접 페이지를 제공하지 않습니다.

물론 폴더를 다운로드하고 복사하여 붙여넣기만 하면 되지만 NPM을 사용하면 필요할 때 업데이트할 수 있습니다.더 쉬운 것 같아요.

1. CDN을 사용하는 이유는 첫째, 분산 네트워크이기 때문에 더 빠르다는 것입니다. 둘째, 정적 파일이 브라우저에 의해 캐시되고 있고 예를 들어 CDN이 캐시될 가능성이 높기 때문입니다.jquery사이트에서 사용하는 라이브러리가 사용자의 브라우저에 의해 이미 다운로드되었기 때문에 파일이 캐시되어 불필요한 다운로드가 수행되지 않습니다.그렇긴 하지만, 폴백을 제공하는 것은 여전히 좋은 생각입니다.

   이제 부트스트랩의 npm 패키지의 포인트는

   즉, 부트스트랩의 자바스크립트 파일을 모듈로 제공합니다.위에서 언급한 바와 같이, 이것은 다음을 가능하게 합니다.require가장 가능성이 높은 사용 사례인 브라우저파이를 사용하여 부트스트랩이 npm에 게시된 주요 이유로 알고 있습니다.

2. 사용방법

   다음과 같은 프로젝트 구조를 상상해 보십시오.

   프로젝트.node_module공공의|-- css|-- img|--js|--index.java꾸러미제이손
   

의 신의에서.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.jsBrowserify는 이 파일을 포함하도록 처리합니다.

이제 프런트 엔드 파일을 다음과 같이 사용할 수 있게 되었습니다.node_modules 종성속고, 리그고리node_modules 폴는일체로않습지니다크되인으로 .git많은 의견과 해결책이 있는 부분이 가장 논란이 되는 부분이라고 생각합니다.

---

업데이트 2017년 3월

제가 이 답변을 쓴 지 거의 2년이 지났고 업데이트가 진행 중입니다.

이제 일반적으로 허용되는 방법은 웹 팩과 같은 번들러(또는 다른 번들러를 선택하여)를 사용하여 빌드 단계에서 모든 자산을 번들링하는 것입니다.

첫째, bootstrap js 코드를 프로젝트에 포함시키기 위해 bootstrap js 코드를 browserify와 마찬가지로 commonjs 구문을 사용할 수 있습니다.

const bootstrap = require('bootstrap');

에 css파일, 웹팩은 소위 "로더"라고 불립니다.JS 코드에 다음과 같이 기록할 수 있습니다.

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

그러면 CSS 파일이 "마법적으로" 빌드에 포함될 것입니다.으로 다과같동추가니다됩로로 추가될 입니다.<style />실행할 때의 "" "" "" "" "" "" "" "" "" "" ""로 웹 할 수 .css파일. 자세한 내용은 웹 팩의 설명서에서 확인할 수 있습니다.

결론적으로.

1. 앱 코드를 번들러와 "묶음"해야 합니다.
2. 당신은 둘 다 범하면 안 됩니다.node_modules동적으로 빌드된 파일도 git에 저장할 수 없습니다.추가할 수 있습니다.build서버에 파일을 배포하는 데 사용해야 하는 npm 스크립트입니다.어쨌든 이 작업은 선호하는 빌드 프로세스에 따라 다양한 방법으로 수행할 수 있습니다.

답변 1:

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

• "npm"은 원래 Node Module을 얻기 위한 것이었지만 자바스크립트 언어(브라우저라이제이션의 등장)의 필수 요소로 인해 약간 성장했습니다.실제로 Angular를 다운로드할 수도 있습니다.JS on npm, 그것은 서버측 프레임워크가 아닙니다.Browserify를 통해 AMD/Require 사용 가능JS/공통노드 모듈을 클라이언트 측에서 사용할 수 있도록 클라이언트 측에서 JS.

답변 2:

만약 당신이 부트스트랩을 설치한다면(특정 grunt 또는 gulp 파일을 사용하여 dist 폴더로 이동하지 않는다면), 당신의 부트스트랩은 "/node_modules/bootstrap/bootstrap.min.css"에 위치할 것입니다.

1. 부트스트랩을 재컴파일/변경 횟수를 줄이려면 npm/bower를 사용하여 부트스트랩을 설치합니다.http://getbootstrap.com/getting-started/ #grunt에 표시된 것처럼 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