angular全局脚本

作者: 王义杰 | 来源:发表于2018-06-11 12:00 被阅读39次

Global scripts

全局脚本

You can add Javascript files to the global scope via the scripts option inside your
project's build target options in angular.json.
These will be loaded exactly as if you had added them in a <script> tag inside index.html.
您可以通过angular.json中项目的构建目标选项中的 脚本 选项将JavaScript文件添加到全局范围。这些将被加载,就像您将它们添加到 index.html 中的 <script> 标记中一样。
This is especially useful for legacy libraries or analytic snippets.
这对旧版库或分析片段尤其有用。

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "scripts": [
        "src/global-script.js",
      ],

You can also rename the output and lazy load it by using the object format:
您也可以使用对象格式重命名输出并延迟加载它:

"scripts": [
  "src/global-script.js",
  { "input": "src/lazy-script.js", "lazy": true },
  { "input": "src/pre-rename-script.js", "bundleName": "renamed-script" },
],

Note: you will also need to add any scripts to the test builder if you need them for unit tests.
注意:如果需要它们进行单元测试,您还需要将任何脚本添加到测试生成器。

Using global libraries inside your app

在应用程序内使用全局库

Once you import a library via the scripts array, you should not import it via a import statement
in your TypeScript code (e.g. import * as $ from 'jquery';).
If you do that you'll end up with two different copies of the library: one imported as a
global library, and one imported as a module.
一旦通过脚本数组导入库,您不应该通过TypeScript代码中的import语句导入它(例如, import * as $ from 'jquery')

This is especially bad for libraries with plugins, like JQuery, because each copy will have
different plugins.
对于带有插件的库如JQuery来说,这是非常糟糕的,因为每个副本都会有不同的插件。

Instead, download typings for your library (npm install @types/jquery) and follow
the 3rd Party Library Installation steps,
this will give you access to the global variables exposed by that library.
相反,为你的库下载类型 (npm install @types/jquery) 和 根据 3rd Party Library Installation 步骤, 这将使您可以访问该库公开的全局变量,

If the global library you need to use does not have global typings, you can also declare them
manually in src/typings.d.ts as any:
如果您需要使用的全局库没有全局类型,您也可以在 src / typings.d.ts 中手动声明它们,如下所示:

declare var libraryName: any;

When working with scripts that extend other libraries, for instance with JQuery plugins
(e.g, $('.test').myPlugin();), since the installed @types/jquery may not include myPlugin,
you would need to add an interface like the one below in src/typings.d.ts.
处理扩展其他库的脚本时,例如使用JQuery插件(e.g, $('.test').myPlugin();), 自安装@types/jquery 可能不包含 myPlugin, 您需要在 src/typings.d.ts 中添加如下所示的端口。

interface JQuery {
  myPlugin(options?: any): any;
}

Otherwise you may see [TS][Error] Property 'myPlugin' does not exist on type 'JQuery'. in your IDE.
否则,你可能会看到 [TS][Error] Property 'myPlugin' does not exist on type 'JQuery'. 在你的IDE.

相关文章

网友评论

    本文标题:angular全局脚本

    本文链接:https://www.haomeiwen.com/subject/snoceftx.html