2
저는 Angular 2 프로젝트를 가지고 있는데 bootstrap-slider라는 JavaScript 패키지를 추가하고 싶습니다. 프로젝트에서 패키지를 어떻게 통합했는지 이해하는 데 어려움이 있습니다.Angular 2 프로젝트에서 js 패키지를 가져 오는 방법은 무엇입니까?
package.json 파일의 종속성 아래에 "bootstrap-slider"를 추가하고 "npm install"을 실행하여 node_modules에 패키지를 추가하기 시작했습니다. 내 패키지의 항목은 다음과 같습니다
"bootstrap-slider": "^9.2.0",
나는 슬라이더에 대한 내용으로 새로운 폴더가 node_modules의 내부에 추가 된 것을 볼 수 있습니다. 몇 가지 가이드와 설명을 찾은 후에 JS 패키지를 제대로 가져오고 사용하기 위해 index.html에서 다음을 시도했습니다. 내 인덱스 HTML은 이제 다음과 같습니다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><%= webpackConfig.metadata.title %></title>
<meta name="description" content="<%= webpackConfig.metadata.description %>">
<% if (webpackConfig.htmlElements.headTags) { %>
<!-- Configured Head Tags -->
<%= webpackConfig.htmlElements.headTags %>
<% } %>
<!-- base url -->
<base href="<%= webpackConfig.metadata.baseUrl %>">
<script src="../node_modules/bootstrap-slider/src/js/bootstrap-slider.js"></script>
<script>
System.config({
paths: {
bootstrap-slider: ‘../node_modules/bootstrap-slider/src/js/bootstrap-slider.js’
}
});
</script>
</head>
<body>
<app>
</app>
<div id="preloader">
<div></div>
</div>
<% if (webpackConfig.metadata.isDevServer && webpackConfig.metadata.HMR !== true) { %>
<!-- Webpack Dev Server reload -->
<script src="/webpack-dev-server.js"></script>
<% } %>
<link
href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic'
rel='stylesheet' type='text/css'>
</body>
</html>
은 그때 끝이 내 웹 사이트의 페이지 중 하나에 자신의 GitHub의에 (jQuery를 wihtout) 예제 코드를 실행 노력했다.
<input
type="text"
name="somename"
data-provide="slider"
data-slider-ticks="[1, 2, 3]"
data-slider-ticks-labels='["short", "medium", "long"]'
data-slider-min="1"
data-slider-max="3"
data-slider-step="1"
data-slider-value="3"
data-slider-tooltip="hide"
>
나는이 JavaScript 패키지와 다른 패키지를 내 프로젝트에 추가하는 방법을 알고 싶습니다. 어떤 도움이라도 대단히 감사합니다!
이것은 일반적인 질문에 답하지는 않지만, 현재의 경우'../ node_modules' 디렉토리가 브라우저를 통해 외부에서 액세스 할 수 없기 때문일 수 있습니다. 그런데 노드는 개발 시간 의존성에 더 적합하고 배포 된 종속성에 대해서는 더 잘 사용합니다.주요 차이점은 bower가 공유 하위 종속성을 해결하려고 시도하는 반면 npm은 각 종속성에 대해 하위 종속성 세트를로드합니다 (다른 종속성과 독립적입니다). –
또 다른 유용한 팁 : 명령 줄에서 npm을 사용하여 패키지를 설치할 수 있습니다 :'npm install --save bootstrap-slider @^9.2.0'. 그러면 종속성이 설치되고 정의 된 종속성에 추가됩니다. –
의견을 보내 주셔서 감사합니다. – Vanquiza