Angular Cli Webpack, 외부 js 파일을 추가하거나 번들링하는 방법은 무엇입니까?

Question 1

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

Question 2

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';.

Question 3

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:[]를 수동으로로드하거나이를 통해 전역 적으로 사용할 수 있도록 만드는 것은 자체적 인 문제를 가져 오며 반드시 필요한 경우에만 사용해야합니다.

Question 4

파일 .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":[]) 에서 여기에 파일 경로를 추가 할 수 있습니다 .

Question 5

https://github.com/angular/angular-cli#global-library-installation 페이지를 살펴 보시기 바랍니다.

.js 및 .css 파일을 포함하는 방법의 기본 사항을 보여줍니다.

일부 자바 스크립트 라이브러리는 전역 범위에 추가하고 스크립트 태그에있는 것처럼로드해야합니다. angular-cli.json의 apps [0] .scripts 및 apps [0] .styles 속성을 사용하여이를 수행 할 수 있습니다.

Question 6

전에 angular-cli를 사용하지 않았지만 현재 Angular / Webpack 빌드로 작업하고 있습니다. 내 애플리케이션에 jQuery 및 기타 공급 업체를 제공하기 위해 webpack의 플러그인 인 ProvidePlugin(). 이것은 일반적으로 귀하의 위치에 있습니다 webpack.config.js. 다음은 jquery, lodash 및 moment 라이브러리에 대한 예입니다. 다음은 문서에 대한 링크입니다 (기껏해야 모호함).

plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery',
    _: 'lodash',
    moment: 'moment',
  })
]

놀랍게도 다른 모든 웹팩 설정이 올바르게 완료되고 npm.