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

Question 1

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

Question 2

上次使用angular-cli 7.xx和Angular 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中执行的脚本。

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

Question 3

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

因此，如果您真的依赖于在angular本身之前加载的东西（选项A），那么您需要将其手动复制到角度构建中将包含的文件夹中，然后可以使用<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的构建中受益（缩小，哈希等等）。

但是，如果您的脚本不需要在全球范围内可用，并且它们已经准备好用于模块，则可以将其导入，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到同一位置"scripts":[]。

Question 5

您可能需要看看此页面：https : //github.com/angular/angular-cli#global-library-installation

它显示了如何包括.js和.css文件的基础

需要将一些javascript库添加到全局作用域，并像在script标记中一样加载它们。我们可以使用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',
  })
]

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