노드 프로젝트에 부트 스트랩 포함 방법

기본 npm 명령을 사용하여 스캐 폴딩 된 평균 스택 프로젝트가 있습니다. 지금이 순간, 부트 스트랩은 CDN을 사용하여 포함되어노드 프로젝트에 부트 스트랩 포함 방법

link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css')

내 질문은 프로젝트가 CDN에 포함와 같이 동일하게 작동하므로 내가 NPM을 사용하여 부트 스트랩 추가 할 수있는 방법이다. 특히, 실행할 때

npm install bootstrap

boost_root 디렉토리가 node_modules 내에 작성됩니다. 그러나 해당 디렉토리의 bootstrap.css를 포함 시키려고하면 glyphicon 글꼴이 손상됩니다. 아무도 그것을 할 수있는 방법에 대해 조언을 줄 수 있습니까?

P. AngularJS 자체에 관해서도 같은 질문을 던집니다.

출처

2016-06-11 MadPhysicist

당신은 bower 즉 브라우저 패키지 관리자를 사용할 수 있습니다

API를 통해 패키지 종속성 모델을 노출하면서

바우어는 프런트 엔드 패키지 관리의 문제에 대한 일반적인, unopinionated 솔루션을 제공하는 수 더 독창적 인 빌드 스택에 의해 소비 될 수 있습니다. 시스템 전반에 걸친 의존성은 없으며, 서로 다른 애플리케이션간에 의존성이 공유되지 않으며 종속성 트리가 평탄합니다.

더 나은 정보를 원한다면 어느 것이 더 우수하고 신뢰할 수 있는지 알고 싶다면 link을 읽어보십시오.

Why Not npm

NPM와 정자의 주요 차이점은 패키지 종속성을 설치하기위한 접근 방법이다. npm은 각 패키지에 대한 의존성을 개별적으로 설치하므로 결과적으로 동일한 패키지의 여러 버전이있을 수있는 큰 패키지 종속성 트리 (node_modules/grunt/node_modules/glob/node_modules/...)이 생성됩니다. 클라이언트 측 JavaScript의 경우 이는 받아 들일 수 없습니다. jQuery 또는 다른 라이브러리에 대한 두 가지 다른 버전을 페이지에 추가 할 수 없습니다. Bower를 사용하면 각 패키지가 한 번 설치됩니다 (종속 패키지 수에 관계없이 jQuery는 항상 bower_components/jquery 폴더에 있음). 종속성 충돌이 발생하는 경우 Bower는 이미 설치된 패키지와 호환되지 않는 패키지를 설치하지 않습니다.

바우어 설치

당신 단순한 당신이 전체의 Doc를 참조 할 수 있습니다 패키지

에게 구문

npm install -g bower

설치 형성.예를 들어

디렉토리 구조

project Folder 
    + bower_components 
    + bootstrap 
     + dist 
     + css 
      + bootstrap.css 
    + jquery 
     + jquery.js 
    + public 
    + index.html 
    + app.js

이제 app.js에 정적 경로를 설정할 수 있습니다

app.use(express.static(path.join(__dirname, 'bower_components')));

이제 app.js 파일로 index.html 파일

<!DOCTYPE html> 
<html> 
<head> 
    <title>{{ title }}</title> 
    <link rel='stylesheet' href='/bootstrap/dist/css/bootstrap.css' /> 
</head> 
<body> 
{{{ yield }}} 
</body> 
<script src="/bootstrap/dist/jquery/jquery.js"></script> 
</html>

스크린 샷

디렉토리 구조에서 간단하게 사용할 수 있습니다

일반 HTML 파일

출처

2016-06-11 03:52:14

그래서, 정자를 설치할 때, 그때 내가 원하는 패키지를 표시하는 bower.json 파일을 작성해야합니까? 그게 뭐야? – MadPhysicist

부트 스트랩, 앵글 러 등과 같은 외부 라이브러리가있는 경우 bower를 설치할 수 있습니다. 원하는 경우 언제든지 라이브러리를 업데이트 할 수있는 bower.json을 만들 수 있습니다. 프런트 엔드 솔루션이며 사용하기가 훨씬 쉽습니다. bower.json에 패키지 이름을 추가하거나 단순히 패키지 이름으로 설치하십시오. –

나는 내 HTML 파일에 것들을 포함시키는 방법을 명확히하려고 노력 중이다. 특히 bower 관리가 npm과 어떻게 다른가요? 결국 npm은 디렉토리를 만들고 패키지를 다운로드합니다. – MadPhysicist

노드 프로젝트에 부트 스트랩 포함 방법

답변

관련 문제