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 및 타사 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에서 실행 된 스크립트를 확인 합니다.
Note: As discussed in the comments below. JS libs that support UMD modules via es6 imports such as jQuery can also be imported into your typescript files using the es6 import syntax. For example: import $ from 'jquery';.
There is a subtle difference to using scripts:[] then to adding something to the <head> with <script>. Scripts from scripts:[] get added to the scripts.bundle.js that gets always loaded in the body tag and will thus be loaded AFTER scripts in <head>. Thus if script loading order matters (i.e. you need to load a global polyfill), then your only option is to manually copy scripts to a folder (e.g. with a npm script) and add this folder as an asset to .angular-cli.json.
So if you really depend on something being loaded before angular itself (Option A), then you need to copy it manually to a folder that will be included in the angular build and then you can load it manually with a <script> in <head>.
Thus, for achieving option a you have to:
- create a
vendorfolder insrc/ - add this folder as an asset to
.angular-cli.json:
"assets": [
"assets",
"favicon.ico",
"vendor"
]
copy your vendor script
node_modules/some_package/somejs.jstovendorload it manually in
index.html:<head> <script src="vendor/some_package/somejs.js"> </head>
However most of the time you only need this approach for packages, that need to be available globally, before everything else (i.e. certain polyfills). Kris' answer holds true for Option B and you get the benefit of the webpack build (Minification, Hashes, ...).
However if your scripts need not be globally available and if they are module-ready you can import them in src/polyfills.ts or even better import them only when you need them in your specific components.
Making scripts globally available via scripts:[] or via manually loading them brings it own set of problems and should really only be used, when it is absolutely necessary.
You need to open file .angular-cli.json file and need to search for "scripts:" or if you want to add external css you need to find the word "styles": in the same file.
as an example shown below you will see how the bootstrap Js(bootstrap.min.js) and bootstrap CSS(bootstrap.min.css) includes in .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"
],
For sure if you have your own js file you can add your file path here in .angular-cli.json at the same place(in "scripts":[]).
You might want to have a look at this page: https://github.com/angular/angular-cli#global-library-installation
It show the basics of how to include .js and .css files
Some javascript libraries need to be added to the global scope, and loaded as if they were in a script tag. We can do this using the apps[0].scripts and apps[0].styles properties of angular-cli.json.
I havn't used angular-cli before but I'm currently working with an Angular/Webpack build. In order to provide my application with jQuery and other vendors I use webpack's plugin, ProvidePlugin(). This will typically sit in your webpack.config.js: Here's an example for jquery, lodash and moment libraries. Here's a link to the documentation (which is vague at best)
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
_: 'lodash',
moment: 'moment',
})
]
Incredibly, it actually allows you to use it right away, providing all other webpack setup has been done correctly and have been installed with npm.
'Nice programing' 카테고리의 다른 글
| Homebrew를 사용하여 OS X에서 OpenSSL 업데이트 (0) | 2020.10.19 |
|---|---|
| 재귀 적으로 Git LFS 트랙 폴더 (0) | 2020.10.19 |
| 인스턴스를 통해 정적 메소드를 호출하지 않는 이유는 Java 컴파일러에 대한 오류입니까? (0) | 2020.10.19 |
| Internet Explorer에서 window.resize 이벤트 발생 (0) | 2020.10.19 |
| makefile에서 쉘 환경 변수를 얻는 방법은 무엇입니까? (0) | 2020.10.19 |