Angular Cli Webpack，如何添加或捆绑外部 js 文件？
在将 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
最后使用 angular-cli 11.xx 和 Angular 11.xx 进行测试
这可以使用 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！）属性的值，则：
如果您正在运行它，请重新启动 ng serve，
..通过 scripts.bundle.js 文件查看在 **globalcontext 中执行的脚本。
注意：如下评论中所述。通过 es6 imports 支持 UMD 模块的 JS 库（例如 jQuery）也可以使用 es6 导入语法导入到您的打字稿文件中。例如：import $ from 'jquery';。
使用 scripts:[] 与使用 <script> 向 <head> 添加内容之间存在细微差别。来自 scripts:[] 的脚本被添加到始终加载到 body 标记中的 scripts.bundle.js，因此将在 <head> 中加载 AFTER 脚本。因此，如果脚本加载顺序很重要（即您需要加载全局 polyfill），那么您唯一的选择是将脚本手动复制到文件夹（例如使用 npm 脚本）并将此文件夹添加为 asset到 .angular-cli.json。
因此，如果您真的依赖于 before angular 本身（选项 A）加载的某些内容，那么您需要手动将其复制到将包含在 angular 构建中的文件夹中，然后然后您可以使用 <head> 中的 <script> 手动加载它。
因此，要实现选项 a，您必须：
在 src/ 中创建一个供应商文件夹
将此文件夹作为资产添加到 .angular-cli.json：
"assets": [
"assets",
"favicon.ico",
"vendor"
]
将您的供应商脚本 node_modules/some_package/somejs.js 复制到供应商
在 index.html 中手动加载它：
相似问题
- 如何使用 jQuery 异步上传文件？
- 如何在 JavaScript 中的数组开头添加新的数组元素？
- CSS 应该总是在 Javascript 之前吗？
- 如何使用 JavaScript 源映射（.map 文件）？
- Angular CLI 生成的“spec.ts”文件是干什么用的？
- 如何将引导程序添加到 angular-cli 项目
- 您必须在 angular-cli 项目中才能在重新安装 angular-cli 后使用 build 命令
- angular-cli webpack.config.js 文件在哪里 - 新的 angular6 不支持 ng 弹出
- 如何在 angular-cli 构建中包含自定义文件？
- Angular cli - 如何在 ng 服务时禁用自动重新加载
HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。
src/polyfills.ts中有一个专门的机制（从 beta.31 开始）