Angular Cli Webpack,如何添加或捆绑外部js文件？

Question

Angular Cli Webpack,如何添加或捆绑外部js文件？

Kri*_*eck 75 javascript angular-cli angular

在将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>

Run Code Online (Sandbox Code Playgroud)

选项B.

将这些js文件包含在webpack包中.这似乎应该是它应该做的方式.但是我不知道如何做到这一点,因为所有的webpack代码似乎都隐藏在angular-cli-webpack节点包之后.我想也许还有另一个我们可以访问的webpack配置.但我不确定,因为在创建一个新的angular-cli-webpack项目时我没有看到.

更多信息:

我想要包含的js文件需要包含在Angular项目之前.例如jQuery和第三方js lib,它实际上没有为模块加载或打字稿设置.

参考 https://github.com/angular/angular-cli/blob/master/WEBPACK_UPDATE.md https://github.com/angular/angular-cli/tree/webpack

Answer 1

Kri*_*eck 85

最后使用angular-cli 1.0.0和Angular 4.0.0进行测试

这可以使用scripts:[]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
  }
}

Run Code Online (Sandbox Code Playgroud)

注意:正如文档在全局库安装中建议的那样:如果更改styles(或scripts!)属性的值,则:

如果您正在运行它,请重新启动服务,

..通过该scripts.bundle.js文件查看在**globalcontext中执行的脚本.

注意:如下面的评论中所述.通过es6导入(如jQuery)支持UMD模块的JS库也可以使用es6导入语法导入到typescript文件中.例如:import $ from 'jquery';.

@BlairConnolly,虽然我同意,但我们希望摆脱jQuery.我们正在使用公司内部另一个团队的Jquery UI,他们目前没有时间重写整个UI.所以有时人们就没有选择权. (5认同)
将脚本添加到angular-cli.json后,如何在Typescript中引用jquery？ (3认同)
如果你在Angular项目中使用jQuery,那么你做错了.我喜欢jQuery,这让我的职业生涯走得很远,但如果你正确使用Angular,就不再需要jQuery了. (3认同)

Answer 2

Chr*_*ich 17

使用scripts:[]然后向<head>with 添加内容有一个微妙的区别<script>.来自scripts:[]get的脚本scripts.bundle.js总是被加载到body标签中,因此将在脚本之后加载<head>.因此,如果脚本加载顺序的问题(即你需要加载一个全球性的填充工具),那么你唯一的选择就是手动脚本复制到文件夹(例如用NPM脚本)并且该文件夹中添加作为资产来.angular-cli.json.

因此,如果你真的依赖于角度本身之前加载的东西(选项A),那么你需要手动将它复制到一个文件夹中,该文件夹将包含在角度构建中,然后你可以用<script>in 手动加载它<head>.

因此,为了实现选项a,您必须:

在中创建一个vendor文件夹src/
将此文件夹添加为资产.angular-cli.json: node_modules/some_package/somejs.js
将供应商脚本复制vendor到index.html
手动加载<head> <script src="vendor/some_package/somejs.js"> </head>: src/polyfills.ts

然而,大多数情况下,您只需要这种方法用于包,需要在其他所有方法(即某些polyfill)之前全局可用.Kris的答案适用于选项B,您可以获得webpack构建(Minification,Hashes,...)的好处.

但是,如果您的脚本不需要全局可用,并且它们是模块就绪的,您可以将它们导入,scripts:[]甚至只有在特定组件中需要它们时才能更好地导入它们.

scripts:[]通过手动加载或通过手动加载脚本使脚本全局可用会带来一系列问题,并且只有在绝对必要时才应该使用它们.

归档时间：	9 年，2 月前
查看次数：	78447 次
最近记录：	6 年，1 月前