javascript - Angular 应用程序中的自定义非 Angular JavaScript

Question

我有几个 JavaScript 文件需要包含在我的应用程序中，但它们不是 Angular 代码。这些脚本为自定义模态框、类似 Accordion 的元素等添加了功能。最初编写 JavaScript 时，我使用了 Webpack 和 babel-preset-env。

我将所有文件复制到 Angular 应用程序的 assets 文件夹中，并尝试将其添加到 .angular-cli.json 中的 scripts 数组中>:

...
"scripts": [
    ...
    "assets/scripts/javascript/main.js"
]
...

并直接在 index.html 中使用 script 标记。

然而，这些方法似乎都不起作用。脚本已加载，但存在错误。就像您尝试 import {something} from 'file'; 一样，会出现 Unexpected Token 错误。或者即使我尝试 const something = require('file');，也会出现 ReferenceError: require is not defined 错误。

我需要做什么才能在应用中包含这些脚本？

Answer 1

你收到“意外的 token ”和“未定义要求”的错误，因为你正在使用这两个错误

a) ES6 模块语法 ( import ... ) 或

b) CommonJS 模块语法 ( require() )

在你的脚本文件中，应该用纯 ES5 Javascript 编写，因为它们将按原样提供给浏览器。

您可以包括所有外部 .js通过将它们全部作为单独的文件包含到 scripts 中，您的项目需要的脚本阵列，只需确保它们以正确的顺序添加。这与将它们包括为 <script> 相同标记到您的 index.html .

查看此链接:https://github.com/angular/angular-cli/wiki/stories-global-scripts