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

IT技术 javascript angular angular-cli
2021-01-12 10:07:52

在将 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 库，它们并不是真正为module加载或typescript设置的。

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

5个回答

最后使用 angular-cli 11.xx 和 Angular 11.xx 进行测试

这可以使用scripts:[]in来完成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！）属性的值，则：

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

..通过scripts.bundle.js文件查看在 **globalcontext 中执行的脚本。

注意：正如下面的评论中所讨论的。通过es6 导入（例如 jQuery）支持 UMD module的 JS 库也可以使用 es6 导入语法导入到您的typescript文件中。例如：import $ from 'jquery';。

将脚本添加到 angular-cli.json 后，如何在 Typescript 中引用 jquery？
2021-03-21 10:07:52
如果您在 Angular 项目中使用 jQuery，那么您就做错了。我喜欢 jQuery，它在我的职业生涯中走得很远，但如果您正确使用 Angular，就不再需要 jQuery。
2021-03-24 10:07:52
@BlairConnolly，虽然我同意，但我们很想摆脱 jQuery。我们正在使用公司内另一个团队的 Jquery UI，该团队目前没有时间重写整个 UI。所以有时候人们就是别无选择。
2021-03-24 10:07:52
有写的东西在这里暗示>一旦你通过脚本阵列导入库，你不应该通过import语句在你的typescript代码导入（如进口*为$从“jQuery的”;）
2021-04-04 10:07:52
顺便说一句，如果添加的外部文件是一个 polyfill，那么有一个专门的机制可以很好地描述src/polyfills.ts（从 beta.31 开始）
2021-04-10 10:07:52

使用scripts:[]then 添加一些东西到<head>with有一个微妙的区别<script>。从脚本scripts:[]被添加到scripts.bundle.js该被永远载入body标签并因此将加载后的脚本<head>。因此，如果脚本加载顺序很重要（即您需要加载全局 polyfill），那么您唯一的选择是手动将脚本复制到一个文件夹（例如使用 npm 脚本）并将该文件夹作为资产添加到.angular-cli.json.

因此，如果您真的依赖于在angular 本身之前加载的内容（选项 A），那么您需要手动将其复制到将包含在 angular 构建中的文件夹中，然后您可以使用<script>in手动加载它<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>

然而，你只需要用这种方法来包装大部分时间，需要进行全球上市，之前的一切（即某些polyfills）。Kris 的回答适用于选项 B，并且您可以从 webpack 构建（缩小、哈希等）中受益。

但是，如果您的脚本不需要全局可用并且它们是module就绪的，您可以将它们导入，src/polyfills.ts或者更好地仅在您的特定组件中需要它们时才导入它们。

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

您是否有任何示例可以在特定组件中使用 polyfills 或加载？
2021-03-18 10:07:52
这很棒，因为我可以为每个环境创建一个 js 配置文件，将它们留在那里并在运行时加载它们，而不是使用 environment.ts 文件并且必须为每个环境构建 angular（可怕...）
2021-03-23 10:07:52
@SteveLam 请更具体或提出一个新问题。通常，polyfill 不会在特定组件中加载，而是全局加载，除非您希望组件是自包含的，但即便如此，最好定义您期望的运行时环境，并让组件的使用者决定何时以及如何加载一个polyfill。
2021-03-23 10:07:52
谢谢克里斯，你有关于这方面的文章吗？
2021-03-25 10:07:52
嗨，我使用 angular 7，当我运行 mi 应用程序时，脚本已加载到索引页面中，但我需要在其他页面中使用该脚本，当我单击其他页面时，脚本已卸载，我如何将其加载到特定页面或对于整个应用程序？
2021-03-26 10:07:52

您需要打开文件.angular-cli.json文件并需要搜索， "scripts:"或者如果您想添加外部css，您需要"styles":在同一文件中找到该词。

作为下面显示的示例，您将看到 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":[]）中添加你的文件路径 。

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

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

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

不鼓励仅链接答案。请从参考链接中引用答案的基本部分，因为如果链接页面发生变化，答案可能会失效。
2021-03-16 10:07:52

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

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

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

angular cli webpack 配置实际上是 angular cli 节点包的一部分。所以不幸的是我不能修改它。例如，在 CLI 中有要构建的预设命令。ng build这一切都由 cli 处理。但我在想可能有一种方法可以将内容添加为构建的一部分。但我还没有看到任何明显的例子。
2021-03-24 10:07:52
啊，我的歉意。我过滤了 angular 2 问题，但这个问题漏了。祝你好运。
2021-03-25 10:07:52
其它你可能感兴趣的问题
上一篇如何将字符串转换为字节数组 下一篇从二维数组中获取列