当前位置：theitroad>Javascript Angular Cli Webpack，如何添加或捆绑外部 js 文件？

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

声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow 原文地址: http://stackoverflow.com/questions/38855891/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-23 21:56:14 　来源:igfitidea点击:

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

javascriptangularangular-cli

提问by Kris Hollenbeck

I am not sure how to include JS files (vendors) after switching Angular Cli from SystemJs to Webpack.

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

For example

例如

Option A

选项 A

I have some js files that were installed via npm. Adding script tags to the head tag like this does not work. Nor does it seem like the best way.

我有一些通过 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>

Option B

选项 B

Include these js files as part of the webpack bundle. This seems like the way it probably should be done. However I am not sure how to do this as all of the webpack code seems to be hidden behind the angular-cli-webpack node package. I was thinking maybe there is another webpack config that we might have access to. But I am not sure as I didn't see one when creating a new angular-cli-webpack project.

将这些 js 文件作为 webpack 包的一部分包含在内。这似乎是应该完成的方式。但是，我不确定如何执行此操作，因为所有 webpack 代码似乎都隐藏在 angular-cli-webpack 节点包之后。我在想也许我们可以访问另一个 webpack 配置。但我不确定，因为我在创建一个新的 angular-cli-webpack 项目时没有看到。

More Info:

更多信息：

The js files I am trying to include need to be included before the Angular project. For example jQuery and a third party js lib that isn't really setup for module loading or typescript.

我尝试包含的 js 文件需要在 Angular 项目之前包含。例如 jQuery 和第三方 js 库，它们并不是真正为模块加载或打字稿设置的。

Referenceshttps://github.com/angular/angular-cli/blob/master/WEBPACK_UPDATE.mdhttps://github.com/angular/angular-cli/tree/webpack

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

回答by Kris Hollenbeck

Last tested using angular-cli 7.x.x with Angular 7.x.x

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

This can be accomplished using scripts:[]in .angular-cli.json.

这可以使用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
  }
}

Note:As the documentation suggestsin the global library installation: if you change the value of your styles(or scripts!) property, then:

注意：正如文档在全局库安装中所建议的：如果您更改styles（或scripts！）属性的值，则：

Restart ng serve if you're running it,

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

..to see the scripts executed in a **globalcontext via the scripts.bundle.jsfile.

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

Note:As discussed in the comments below. JS libs that support UMD modules via es6 importssuch as jQuery can also be imported into your typescript files using the es6 import syntax. For example: import $ from 'jquery';.

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

回答by Christian Ulbrich

There is a subtle difference to using scripts:[]then to adding something to the <head>with <script>. Scripts from scripts:[]get added to the scripts.bundle.jsthat gets always loaded in the body tag and will thus be loaded AFTERscripts in <head>. Thus if script loading order matters (i.e. you need to load a global polyfill), then your only option is to manually copy scripts to a folder (e.g. with a npm script) and add this folder as an assetto .angular-cli.json.

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

So if you really depend on something being loaded beforeangular itself (Option A), then you need to copy it manually to a folder that will be included in the angular build and then you can load it manually with a <script>in <head>.

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

Thus, for achieving option ayou have to:

因此，要实现选项 a，您必须：

  • create a vendorfolder in src/
  • add this folder as an asset to .angular-cli.json:
  • 在其中创建一个vendor文件夹src/
  • 将此文件夹作为资产添加到.angular-cli.json：
"assets": [
    "assets",
    "favicon.ico",
     "vendor"
  ]

  • copy your vendor script node_modules/some_package/somejs.jsto vendor

  • load it manually in index.html: <head> <script src="vendor/some_package/somejs.js"> </head>

  • 将您的供应商脚本复制node_modules/some_package/somejs.js到vendor

  • 手动加载它index.html： <head> <script src="vendor/some_package/somejs.js"> </head>

However most of the time you only need this approach for packages, that need to be available globally, beforeeverything else (i.e. certain polyfills). Kris' answer holds true for Option Band you get the benefit of the webpack build (Minification, Hashes, ...).

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

However if your scripts need notbe globally available and if they are module-readyyou can import them in src/polyfills.tsor even better import them only when you need them in your specific components.

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

Making scripts globally available via scripts:[]or via manually loading them brings it own set of problems and should really only be used, when it is absolutely necessary.

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

回答by Prashant Barve

You need to open file .angular-cli.jsonfile and need to search for "scripts:"or if you want to add external css you need to find the word "styles":in the same file.

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

as an example shown below you will see how the bootstrap Js(bootstrap.min.js) and bootstrap CSS(bootstrap.min.css) includes in .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"
  ],

For sure if you have your own js file you can add your file path here in .angular-cli.jsonat the same place(in "scripts":[]).

如果你有你自己的 js 文件，你可以.angular-cli.json在同一个地方（in "scripts":[]）添加你的文件路径 。

回答by Svenn

You might want to have a look at this page: https://github.com/angular/angular-cli#global-library-installation

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

It show the basics of how to include .js and .css files

它展示了如何包含 .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.

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

回答by zilj

I havn't used angular-cli before but I'm currently working with an Angular/Webpack build. In order to provide my application with jQuery and other vendors I use webpack's plugin, ProvidePlugin(). This will typically sit in your webpack.config.js: Here's an example for jquery, lodash and moment libraries. Here's a link to the documentation(which is vague at best)

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

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

Incredibly, it actually allows you to use it right away, providing all other webpack setup has been done correctly and have been installed with npm.

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

相关推荐

Javascript 如何使用 React (JSX) 编写 else if 结构 - 三元不够表达

Javascript 如何使用 React (JSX) 编写 else if 结构 - 三元不够表达

Javascript 通过单击外部关闭 jquery 下拉菜单

Javascript 通过单击外部关闭 jquery 下拉菜单

Javascript 检查一个数组是否是另一个数组的子集

Javascript 检查一个数组是否是另一个数组的子集

Javascript 什么是最有效的 node.js 进程间通信库/方法？

Javascript 什么是最有效的 node.js 进程间通信库/方法？

相关推荐
最近更新
标签