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 lib，它不是真正设置模块加载或打字稿。
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 .md
https://github.com/angular/angular -cli / tree / webpack
推荐答案
最后使用angular-cli 1.0.0和Angular 4.0进行测试.0
这可以使用脚本完成：[$ in .angular-cli.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
}
}
注意： As 文档建议：如果更改样式的值（或脚本！）属性，然后：
Note: As the documentation suggests in the global library installation: if you change the value of your styles (or scripts!) property, then:
如果你正在运行它，重新启动ng服务，
Restart ng serve if you're running it,
..通过 scripts.bundle.js file。
..to see the scripts executed in a **globalcontext via the scripts.bundle.js file.
注意：正如以下评论中所述。通过 es6导入支持UMD模块的JS库例如，jQuery也可以使用es6导入语法导入到您的打字稿文件中。例如：从'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屋！
