Angular Cli Webpack，如何添加或捆綁外部 js 文件？

Question

在將 Angular Cli 從 SystemJs 切換到 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 文件作為 webpack 包的一部分包含在內。 這似乎是應該完成的方式。 但是，我不確定如何執行此操作，因為所有 webpack 代碼似乎都隱藏在 angular-cli-webpack 節點包之后。 我在想也許我們可以訪問另一個 webpack 配置。 但我不確定，因為我在創建一個新的 angular-cli-webpack 項目時沒有看到。

更多信息：

我嘗試包含的 js 文件需要在 Angular 項目之前包含。 例如 jQuery 和第三方 js 庫，它們並不是真正為模塊加載或打字稿設置的。

參考資料https://github.com/angular/angular-cli/blob/master/WEBPACK_UPDATE.md https://github.com/angular/angular-cli/tree/webpack

Answer 1

最后使用 angular-cli 11.xx 和 Angular 11.xx 進行測試

這可以使用angular.json scripts:[]來完成。

{
  "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 ！）屬性的值，則：

如果您正在運行，請重新啟動 ng serve，

..通過scripts.bundle.js文件查看在 **globalcontext 中執行的腳本。

注意：如以下評論中所述。 通過es6 導入（例如 jQuery）支持 UMD 模塊的 JS 庫也可以使用 es6 導入語法導入到您的打字稿文件中。 例如： import $ from 'jquery'; .

Answer 2

使用scripts:[]和使用<script>添加一些東西到<head>有一個微妙的區別。 來自scripts:[]被添加到始終加載在 body 標簽中的scripts.bundle.js ，因此將在<head>腳本之后加載。 因此，如果腳本加載順序很重要（即您需要加載全局 polyfill），那么您唯一的選擇是手動將腳本復制到一個文件夾（例如使用 npm 腳本）並將該文件夾作為資產添加到.angular-cli.json .

因此，如果您真的依賴於在angular 本身之前加載的某些內容（選項 A ），那么您需要手動將其復制到將包含在 angular 構建中的文件夾中，然后您可以使用<script>在<head>手動加載它<head> .

因此，要實現選項 a，您必須：

在src/創建一個vendor文件夾
將此文件夾作為資產添加到.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>

然而，你只需要用這種方法來包裝大部分時間，需要進行全球上市，其他的一切（即某些polyfills）前。 Kris 的回答適用於選項 B，並且您可以從 webpack 構建（縮小、哈希等）中受益。

但是，如果您的腳本不需要全局可用並且它們是模塊就緒的，您可以在src/polyfills.ts導入它們，或者更好地僅在您的特定組件中需要它們時才導入它們。

通過scripts:[]或通過手動加載scripts:[]使腳本全局可用會帶來一系列問題，並且應該只在絕對必要時使用。

Answer 3

您需要打開文件.angular-cli.json文件並需要搜索"scripts:"或者如果您想添加外部 css，您需要在同一個文件中找到單詞"styles": .angular-cli.json

作為下面顯示的示例，您將看到 bootstrap Js( bootstrap.min.js ) 和 bootstrap 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":[] ）添加你的文件路徑。

Answer 4

你可能想看看這個頁面： https : //github.com/angular/angular-cli#global-library-installation

它展示了如何包含 .js 和 .css 文件的基礎知識

一些 javascript 庫需要添加到全局范圍，並像在腳本標記中一樣加載。 我們可以使用 angular-cli.json 的 apps[0].scripts 和 apps[0].styles 屬性來做到這一點。

Answer 5

我以前沒有使用過 angular-cli，但我目前正在使用 Angular/Webpack 構建。 為了向我的應用程序提供 jQuery 和其他供應商，我使用了 webpack 的插件 ProvidePlugin ProvidePlugin() 。 這通常位於您的webpack.config.js ：這是 jquery、lodash 和 moment 庫的示例。 這是文檔的鏈接（充其量是模糊的）

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

令人難以置信的是，它實際上允許您立即使用它，前提是所有其他 webpack 設置都已正確完成並已安裝npm 。

Angular Cli Webpack，如何添加或捆綁外部 js 文件？

問題描述

5 個解決方案

解決方案1
95 已采納 2016-09-23 13:13:54

解決方案2
23 2018-01-15 14:35:38

解決方案3
3 2017-12-26 09:20:09

解決方案4
2 2016-09-14 12:49:35

解決方案5
-2 2016-08-09 16:51:00

Angular Cli Webpack，如何添加或捆綁外部 js 文件？

問題描述

5 個解決方案

解決方案1 95 已采納 2016-09-23 13:13:54

解決方案2 23 2018-01-15 14:35:38

解決方案3 3 2017-12-26 09:20:09

解決方案4 2 2016-09-14 12:49:35

解決方案5 -2 2016-08-09 16:51:00

解決方案1
95 已采納 2016-09-23 13:13:54

解決方案2
23 2018-01-15 14:35:38

解決方案3
3 2017-12-26 09:20:09

解決方案4
2 2016-09-14 12:49:35

解決方案5
-2 2016-08-09 16:51:00