Angular Cli Webpack, 외부 js 파일 추가 또는 번들 방법?
Angular Cli를 SystemJs에서 Webpack으로 전환한 후 JS 파일(벤더)을 포함하는 방법을 잘 모르겠습니다.
예를들면
옵션A
저는 npm을 통해 설치된 js 파일이 몇 개 있습니다.이와 같이 헤드 태그에 스크립트 태그를 추가하는 것은 작동하지 않습니다.그것도 최선의 방법은 아닌 것 같습니다.
<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 파일을 웹팩 번들의 일부로 포함합니다.이것은 아마도 그렇게 되어야 할 것 같습니다.하지만 모든 웹팩 코드가 앵글-클리-웹팩 노드 패키지 뒤에 숨겨져 있는 것 같아서 어떻게 해야 할지 잘 모르겠습니다.우리가 접근할 수 있는 다른 웹팩 구성이 있을지도 모른다고 생각하고 있었습니다.하지만 새로운 각도클리 웹팩 프로젝트를 만들 때 보지 못해서 잘 모르겠어요.
추가 정보:
제가 포함하려는 js 파일은 Angular 프로젝트 전에 포함되어야 합니다.예를 들어 jQuery 및 모듈 로딩 또는 스크립트 유형에 대해 실제로 설정되지 않은 타사 jslib.
참고문헌 https://github.com/angular/angular-cli/blob/master/WEBPACK_UPDATE.md https://github.com/angular/angular-cli/tree/webpack
Angular 11.x.x와 함께 Angular-cli 11.x.x를 사용하여 마지막 테스트
이는 다음을 사용하여 달성할 수 있습니다.scripts:[]인에angular.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!) property(속성), 그러면:
서브를 실행하는 경우 다시 시작합니다.
.**글로벌 컨텍스트에서 실행되는 스크립트를 보기 위해scripts.bundle.js파일.
참고: 아래 의견에서 설명한 바와 같습니다.jQuery와 같은 es6 가져오기를 통해 UMD 모듈을 지원하는 Jslib도 es6 가져오기 구문을 사용하여 타이프스크립트 파일로 가져올 수 있습니다.예를 들어,import $ from 'jquery';.
사용하는 것과 미묘한 차이가 있습니다.scripts:[]그 다음에 뭔가를 추가합니다.<head>와 함께<script>. 스크립트:scripts:[]에 추가됩니다.scripts.bundle.js항상 본문 태그에 로드되며 따라서 스크립트 후에 로드됩니다.<head>. 따라서 스크립트 로드 순서가 중요한 경우(즉, 글로벌 폴리필을 로드해야 함), 유일한 옵션은 수동으로 스크립트를 폴더에 복사하고(예: npm 스크립트로) 이 폴더를 자산으로 추가하는 것입니다..angular-cli.json.
따라서 각도 자체보다 먼저 로드되는 것에 의존하는 경우(옵션 A), 각도 빌드에 포함될 폴더에 수동으로 복사한 다음 수동으로 로드할 수 있습니다.<script>인에<head>.
따라서 옵션 a를 달성하려면 다음을 수행해야 합니다.
- 창조하다, 창안
vendor인rsrc/ - 를 에
.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>
그러나 대부분의 경우 다른 모든 것(즉, 특정 폴리필)보다 먼저 전 세계적으로 사용할 수 있어야 하는 패키지에만 이 접근 방식이 필요합니다.옵션 B의 경우 크리스의 대답이 그대로 적용되며 웹팩 빌드(Minification, Hashes, ...)의 이점을 얻을 수 있습니다.
그러나 스크립트를 전역적으로 사용할 필요가 없고, 스크립트가 모듈 준비가 되어 있으면 다음으로 가져올 수 있습니다.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에서)"scripts":[]).
당신은 이 페이지를 보고 싶을지도 모릅니다: https://github.com/angular/angular-cli#global-library-installation . https://github.com/angular/angular-cli#global-library-installation
.js 및 .css 파일을 포함하는 방법에 대한 기본 사항을 보여줍니다.
일부 자바스크립트 라이브러리를 글로벌 스코프에 추가하여 스크립트 태그에 있는 것처럼 로드해야 합니다.apps[0].scripts 및 apps[0]styles 속성을 사용하여 이 작업을 수행할 수 있습니다.
Angular-cli를 사용한 적은 없지만 현재 Angular/Webpack 빌드로 작업하고 있습니다.는 jQuery와 과 함께 을 제공하기 jQuery합니다를 합니다.ProvidePlugin()의 . .에 .webpack.config.js: 여기 jquery, lodash 및 moment library의 예가 있습니다.다음은 설명서 링크입니다(잘 해봐야 모호합니다).
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
_: 'lodash',
moment: 'moment',
})
]
되고 도, 가 할 수 npm.
언급URL : https://stackoverflow.com/questions/38855891/angular-cli-webpack-how-to-add-or-bundle-external-js-files
'programing' 카테고리의 다른 글
| Primefaces 3.0 문제.M2 OneMenu 선택Ajax 동작 (0) | 2023.09.27 |
|---|---|
| JQuery/Javascript : var가 존재하는지 확인 (0) | 2023.09.27 |
| 자바스크립트에서 객체를 만드는 데 가장 좋은 방법은 무엇입니까?객체 속성 앞에 var가 필요합니까? (0) | 2023.09.27 |
| 데이터베이스에서 상위 테이블과 하위 테이블이란? (0) | 2023.09.27 |
| Mysql에서 이메일 주소 확인 (0) | 2023.09.27 |