[javascript] Angular Cli Webpack, 외부 js 파일을 추가하거나 번들링하는 방법은 무엇입니까?
Angular Cli를 SystemJ에서 Webpack으로 전환 한 후 JS 파일 (공급 업체)을 포함하는 방법을 모르겠습니다.
예를 들면
옵션 A
npm을 통해 설치된 js 파일이 있습니다. 이와 같이 head 태그에 스크립트 태그를 추가하면 작동하지 않습니다. 그것은 최선의 방법처럼 보이지도 않습니다.
<head>
<script src="node_modules/some_package/somejs.js">
</head>
//With systemJs I could do this
<head>
<script src="vendor/some_package/somejs.js">
</head>
옵션 B
이러한 js 파일을 웹팩 번들의 일부로 포함하십시오. 이것은 아마도 수행되어야하는 방식처럼 보입니다. 그러나 모든 웹팩 코드가 angular-cli-webpack 노드 패키지 뒤에 숨겨져있는 것처럼 보이므로 어떻게해야할지 모르겠습니다. 우리가 액세스 할 수있는 다른 웹팩 구성이있을 수 있다고 생각했습니다. 그러나 새로운 angular-cli-webpack 프로젝트를 만들 때 보지 못했기 때문에 확실하지 않습니다.
더 많은 정보:
포함하려는 js 파일은 Angular 프로젝트 이전에 포함되어야합니다. 예를 들어 jQuery 및 모듈 로딩 또는 typescript를 위해 실제로 설정되지 않은 타사 js lib.
참조
https://github.com/angular/angular-cli/blob/master/WEBPACK_UPDATE.md
https://github.com/angular/angular-cli/tree/webpack
답변
Angular 7.xx와 함께 angular-cli 7.xx를 사용하여 마지막 테스트
이는 scripts:[]
in을 사용하여 수행 할 수 있습니다 .angular-cli.json
.
{
"project": {
"version": "1.0.0",
"name": "my-project"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": ["assets"],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"styles.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js"
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false
}
}
참고 : 문서 가 전역 라이브러리 설치에서 제안한 대로 : styles
(또는 scripts
!) 속성 값을 변경하면 다음을 수행합니다.
실행중인 경우 서브를 다시 시작하십시오.
.. scripts.bundle.js
파일을 통해 ** globalcontext에서 실행 된 스크립트를 확인 합니다.
참고 : 아래 설명에 설명되어 있습니다. jQuery와 같은 es6 가져 오기 를 통해 UMD 모듈을 지원하는 JS 라이브러리 는 es6 가져 오기 구문을 사용하여 typescript 파일로 가져올 수도 있습니다. 예 : import $ from 'jquery';
.
답변
with에 scripts:[]
무언가를 추가 하는 데 then을 사용하는 것과는 미묘한 차이 <head>
가 <script>
있습니다. 에서 스크립트 scripts:[]
받는 추가됩니다 scripts.bundle.js
항상 body 태그에로드되는 따라서로드됩니다 그 후에 에서 스크립트 <head>
. 따라서 스크립트로드 순서가 중요하다면 (예 : 전역 폴리 필을로드해야하는 경우) 유일한 옵션은 스크립트를 폴더에 수동으로 복사 (예 : npm 스크립트 사용)하고이 폴더를에 자산 으로 추가 하는 것 .angular-cli.json
입니다.
당신이 정말로 무엇인가에 따라 경우에 따라서로드 하기 전에 자체 (각 옵션 A는 ) 다음 각 빌드에 포함됩니다 폴더에 수동으로 복사해야하고 당신이 수동으로로드 할 수 있습니다 <script>
에 <head>
.
따라서 옵션 a 를 달성 하려면 다음을 수행해야합니다.
- 만들
vendor
폴더를src/
- 이 폴더를에 자산으로 추가
.angular-cli.json
:
"assets": [
"assets",
"favicon.ico",
"vendor"
]
-
공급 업체 스크립트
node_modules/some_package/somejs.js
를vendor
-
수동으로로드
index.html
:
<head>
<script src="vendor/some_package/somejs.js">
</head>
그러나 대부분의 경우이 접근 방식은 다른 모든 것 (예 : 특정 폴리 필)보다 먼저 전역 적으로 사용할 수 있어야하는 패키지에 대해서만 필요합니다 . Kris의 대답은 옵션 B 에 적용되며 웹팩 빌드 (최소화, 해시 등)의 이점을 얻습니다.
그러나 스크립트를 전역 적으로 사용할 필요가없고 모듈이 준비된src/polyfills.ts
경우 특정 구성 요소에서 필요할 때만 스크립트 를 가져 오거나 더 잘 가져올 수 있습니다.
스크립트 scripts:[]
를 수동으로로드하거나이를 통해 전역 적으로 사용할 수 있도록 만드는 것은 자체적 인 문제를 가져 오며 반드시 필요한 경우에만 사용해야합니다.
답변
파일 .angular-cli.json
파일 을 열어야 하고 검색해야
"scripts:"
하거나 외부 CSS를 추가 "styles":
하려면 동일한 파일에서 단어를 찾아야 합니다.
아래에 표시된 예제와 같이 부트 스트랩 Js ( bootstrap.min.js
) 및 부트 스트랩 CSS ( bootstrap.min.css
)가에 포함되는 방식을 볼 수 있습니다 .angular-cli.json
.
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
자신의 js 파일이 .angular-cli.json
있는 경우 동일한 위치 (in "scripts":[]
) 에서 여기에 파일 경로를 추가 할 수 있습니다 .
답변
https://github.com/angular/angular-cli#global-library-installation 페이지를 살펴 보시기
바랍니다.
.js 및 .css 파일을 포함하는 방법의 기본 사항을 보여줍니다.
일부 자바 스크립트 라이브러리는 전역 범위에 추가하고 스크립트 태그에있는 것처럼로드해야합니다. angular-cli.json의 apps [0] .scripts 및 apps [0] .styles 속성을 사용하여이를 수행 할 수 있습니다.
답변
전에 angular-cli를 사용하지 않았지만 현재 Angular / Webpack 빌드로 작업하고 있습니다. 내 애플리케이션에 jQuery 및 기타 공급 업체를 제공하기 위해 webpack의 플러그인 인 ProvidePlugin()
. 이것은 일반적으로 귀하의 위치에 있습니다 webpack.config.js
. 다음은 jquery, lodash 및 moment 라이브러리에 대한 예입니다. 다음은 문서에 대한 링크입니다 (기껏해야 모호함).
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
_: 'lodash',
moment: 'moment',
})
]
놀랍게도 다른 모든 웹팩 설정이 올바르게 완료되고 npm
.