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

Posted

技术标签:

【中文标题】Angular Cli Webpack，如何添加或捆绑外部 js 文件？【英文标题】：Angular Cli Webpack, How to add or bundle external js files? 【发布时间】：2016-12-15 19:17:32 【问题描述】：

在将 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

【问题讨论】：

似乎他们切换到 typescript 2.0 看看blogs.msdn.microsoft.com/typescript/2016/06/15/… 感谢您的链接，但这不是我想要的。那是为了添加定义文件。我正在尝试找出将第三方 javascript 库包含到我的项目中的正确方法。 Webpack angular2 example 如何为供应商捆绑不同的一个用于多态性一个用于应用程序和一个用于 css 以保持干净的应用程序。 【参考方案1】：

上次使用 angular-cli 11.x.x 和 Angular 11.x.x 进行测试

这可以在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

注意：作为全局库安装中的the documentation suggests：如果您更改styles（或scripts！）属性的值，则：

如果您正在运行它，请重新启动 ng serve，

..通过scripts.bundle.js 文件查看在**全局上下文中执行的脚本。

注意：如下面的 cmets 所述。通过es6 imports 支持UMD 模块的JS 库（例如jQuery）也可以使用es6 导入语法导入到您的打字稿文件中。例如：import $ from 'jquery';。

【讨论】：

将脚本添加到 angular-cli.json 后，如何在 Typescript 中引用 jquery？ 顺便说一句，如果要添加的外部文件是一个 polyfill，那么在 src/polyfills.ts 中很好地描述了一个专用机制（截至 beta.31） 如果您在 Angular 项目中使用 jQuery，那么您做错了。我喜欢 jQuery，它让我的职业生涯走得很远，但如果你正确使用 Angular，就不再需要 jQuery。 @BlairConnolly，虽然我同意并且我们希望摆脱 jQuery。我们正在使用公司内另一个团队的 Jquery UI，他们目前没有时间重写整个 UI。所以有时人们别无选择。 有一些关于 here 的文章建议 > 一旦你通过脚本数组导入库，你不应该通过 TypeScript 代码中的导入语句导入它（例如 import * as $ from ' jquery';)【参考方案2】：

使用scripts:[] 与使用&lt;script&gt; 在&lt;head&gt; 中添加一些内容存在细微差别。来自scripts:[] 的脚本被添加到scripts.bundle.js 中，该scripts.bundle.js 总是加载到body 标记中，因此将在&lt;head&gt; 中加载AFTER 脚本。因此，如果脚本加载顺序很重要（即您需要加载全局 polyfill），那么您唯一的选择是将脚本手动复制到文件夹（例如使用 npm 脚本）并将此文件夹添加为 asset到.angular-cli.json。

因此，如果您确实依赖于 在 angular 本身加载的内容（选项 A），那么您需要手动将其复制到将包含在角度构建，然后您可以在&lt;head&gt; 中使用&lt;script&gt; 手动加载它。

因此，为了实现选项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>

但大多数情况下，您只需要这种方法用于需要全局可用的包，在其他所有内容（即某些 polyfill）之前。 Kris 的回答适用于 选项 B，并且您可以从 webpack 构建（缩小、哈希等）中受益。

但是，如果您的脚本不需要在全球范围内可用并且如果它们已准备好模块，您可以将它们导入src/polyfills.ts，或者更好地仅在需要时导入它们它们在您的特定组件中。

通过scripts:[] 或通过手动加载脚本使脚本全局可用，这会带来一系列问题，并且应该仅在绝对必要时使用。

【讨论】：

这很棒，因为我可以为每个环境创建一个 js 配置文件，将它们留在那里并在运行时加载它们，而不是使用 environment.ts 文件并且必须为每个环境构建 Angular（可怕......） 你有任何使用polyfills或加载特定组件的例子吗？ @SteveLam 请更具体或提出新问题。通常 polyfills 不会被加载到 特定 组件中，而是 全局地 除非你希望你的组件是 self-contained 但即便如此它也是首选定义您期望的运行时环境，并让组件的使用者决定何时以及如何加载 polyfill。 谢谢 Chris，你有关于这方面的文章吗？ 嗨，我使用 Angular 7，当我运行 mi 应用程序时，脚本会在索引页面中加载，但我需要在其他页面中使用脚本，当我单击其他页面时，脚本会被卸载，怎么能我将它加载到特定页面还是整个应用程序？【参考方案3】：

您需要打开文件.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":[]）添加你的文件路径。

【讨论】：

【参考方案4】：

您可能想看看这个页面： https://github.com/angular/angular-cli#global-library-installation

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

需要将一些 javascript 库添加到全局范围，并像在脚本标记中一样加载它们。我们可以使用 angular-cli.json 的 apps[0].scripts 和 apps[0].styles 属性来做到这一点。

【讨论】：

不鼓励仅链接的答案。请从参考链接中引用答案的基本部分，因为如果链接页面发生更改，答案可能会失效。【参考方案5】：

我以前没有使用过 angular-cli，但我目前正在使用 Angular/Webpack 构建。为了向我的应用程序提供 jQuery 和其他供应商，我使用 webpack 的插件 ProvidePlugin()。这通常位于您的webpack.config.js 中：这是 jquery、lodash 和 moment 库的示例。这是documentation 的链接（充其量是模糊的）

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

令人难以置信的是，它实际上允许您立即使用它，前提是所有其他 webpack 设置已正确完成并已使用 npm 安装。

【讨论】：

angular cli webpack 配置实际上是 angular cli node 包的一部分。所以不幸的是我无法修改它。例如，在 CLI 中有预设的构建命令。 ng build 这一切都由 cli 处理。但我在想可能有一种方法可以在构建过程中添加一些东西。但我还没有看到任何明确的例子。 抱歉。我过滤了 angular 2 个问题，但这个问题漏掉了。祝你好运。

以上是关于Angular Cli Webpack，如何添加或捆绑外部 js 文件？的主要内容，如果未能解决你的问题，请参考以下文章

angular-cli 如何添加 sass 和/或引导程序？

如何使用 Angular CLI 创建新的遥控器？ （Webpack 5 Module Federation 微前端）

当我使用最新的 angular-cli（beta 15 w/webpack）运行 ng test 时，如何提供资产？

将常规 npm 包加载到 webpack/angular cli [找不到模块]

与 angular-cli 相比，使用 webpack + angular 无法实现相同级别的包优化

带有primeng 404问题的angular-cli@webpack