Angular Cli Webpack，如何添加或捆绑外部 js 文件? [英] Angular Cli Webpack, How to add or bundle external js files?
问题描述
在将 Angular Cli 从 SystemJs 切换到 Webpack 后，我不确定如何包含 JS 文件(供应商).
I am not sure how to include JS files (vendors) after switching Angular Cli from SystemJs to Webpack.
例如
选项 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 库，它们并未真正为模块加载或打字稿设置.
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.
参考资料https://github.com/angular/angular-cli/blob/master/WEBPACK_UPDATE.mdhttps://github.com/angular/angular-cli/tree/webpack
推荐答案
上次测试使用 angular-cli 11.x.x 和 Angular 11.x.x
这可以使用 angular.json 中的 scripts:[] 来完成.
This can be accomplished using scripts:[] in angular.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
}
}
注意:正如文档所建议的 在全局库安装中:如果您更改了 styles(或 scripts!)属性的值，则:
Note: As the documentation suggests in the global library installation: if you change the value of your styles (or scripts!) property, then:
如果正在运行，请重新启动 ng serve，
Restart ng serve if you're running it,
..通过 scripts.bundle.js 文件查看在 **globalcontext 中执行的脚本.
..to see the scripts executed in a **globalcontext via the scripts.bundle.js file.
注意:如以下评论中所述.通过 es6 导入支持 UMD 模块的 JS 库例如 jQuery 也可以使用 es6 导入语法导入到您的打字稿文件中.例如:import $ from 'jquery';.
Note: As discussed in the comments below. JS libs that support UMD modules via es6 imports such as jQuery can also be imported into your typescript files using the es6 import syntax. For example: import $ from 'jquery';.
这篇关于Angular Cli Webpack，如何添加或捆绑外部 js 文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
