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

Question

我不确定在将 Angular Cli 从 SystemJs 切换到 Webpack 后如何包含 JS 文件（供应商）。

例如

选项 A

我有一些 js 文件是通过 npm 安装的。像这样在 head 标签中添加 script 标签是行不通的。这似乎也不是最好的方法。

<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，但我目前正在使用 Angular/Webpack 构建。为了向 jQuery 和其他供应商提供我的应用程序，我使用了 webpack 的插件 ProvidePlugin()。这通常位于您的 webpack.config.js 中：这是 jquery、lodash 和 moment 库的示例。这是 documentation 的 link（充其量是模糊的）

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

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

Answer 2

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

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

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.

Answer 3

上次使用 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！）的值属性，然后：

Restart ng serve if you're running it,

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

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

Answer 4

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

Answer 5

使用 scripts:[] 与使用 <script> 添加内容到 <head> 有细微差别。 scripts:[] 中的脚本被添加到 scripts.bundle.js 中，它始终加载到 body 标签中，因此将在 AFTER 脚本中加载到 <head> 中。因此，如果脚本加载顺序很重要（即您需要加载全局 polyfill），那么您唯一的选择是手动将脚本复制到一个文件夹（例如使用 npm 脚本）并将此文件夹添加为 asset 到 .angular-cli.json.

因此，如果您真的依赖于在 angular 本身之前加载的内容（选项 A），那么您需要将其手动复制到将包含在 angular 构建中的文件夹，然后您可以在 <head>.

中使用 <script> 手动加载它

因此，要实现 选项 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:[] 或通过手动加载它们使脚本全局可用会带来一系列问题，并且应该只在绝对必要时才使用。

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

Angular Cli Webpack, How to add or bundle external js files?

javascript

angular

angular-cli