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库并不是真正为模块加载或typescript而设置的。
References https://github.com/angular/angular-cli/blob/master/WEBPACK_UPDATE.md https://github.com/angular/angular-cli/tree/webpack
回答 5
Stack Overflow用户
发布于 2016-09-23 21:13:54
最后一次使用angular-cli 11.x.x和Angular 11.x.x测试
这可以在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，
..to通过scripts.bundle.js文件查看在**全局上下文中执行的脚本。
注释:下面的注释中讨论了。还可以使用es6导入语法将通过es6 imports支持UMD模块的JS库(如jQuery )导入到您的typescript文件中。例如：import $ from 'jquery';。
Stack Overflow用户
发布于 2018-01-15 22:35:39
使用scripts:[]和使用<script>在<head>中添加一些东西有细微的区别。来自scripts:[]的脚本被添加到scripts.bundle.js中，该脚本始终加载在body标记中，因此将在<head>中的脚本之后加载。因此，如果脚本加载顺序很重要(即，您需要加载全局polyfill)，那么您唯一的选择是手动将脚本复制到文件夹(例如，使用npm脚本)，并将此文件夹作为资产添加到.angular-cli.json。
因此，如果您确实依赖于在 angular本身之前加载的内容(选项A)，那么您需要手动将其复制到将包含在angular构建中的文件夹中，然后您可以在<head>中使用<script>手动加载它。
因此，要实现选项a，您必须：
- 在此文件夹中创建一个
vendor文件夹作为.angular-cli.json
的资产
"assets": [
"assets",
"favicon.ico",
"vendor"
]<head> <script src="vendor/some_package/somejs.js"> </head>：
- 将您的供应商脚本
node_modules/some_package/somejs.js复制到index.html中手动执行vendor - load
然而，大多数情况下，你只需要对需要全局可用的包使用这种方法，在之前所有其他东西(即某些polyfills)。Kris的答案对于选项B是正确的，并且您将获得webpack构建的好处(最小化、哈希等)。
但是，如果您的脚本不需要是全局可用的，并且如果它们是模块就绪的，那么您可以在src/polyfills.ts中导入它们，或者更好的是，只有在您的特定组件中需要它们时才导入它们。
通过scripts:[]或通过手动加载脚本使其全局可用会带来一系列问题，实际上应该只在绝对必要时才使用。
Stack Overflow用户
发布于 2017-12-26 17:20:10
您需要打开文件.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":[]中)。
https://stackoverflow.com/questions/38855891
复制相似问题
腾讯云开发者
