javascript - 使用 Angular-CLI 正确配置脚本

Question

假设我有一个使用这些 JS 库的项目:

• main.js 必须在所有页面中加载
• joe.js 这是一个要在所有页面加载的 npm 包
• bob.js 这是一个旧式的第 3 方 JS 库，没有定义要在所有页面中加载的模块
• max.js 这是一个 CommonJS 库，可以在某些组件中按需加载

到目前为止，我成功了:

• 在 angular-cli.json 的 scripts 属性中包含 main.js
• 与上面使用相对路径的 joe.js 相同 (../node_modules/joe/dist/joe.js)

因此它们最终会出现在每个页面上加载的生成包中。

相反，我与另外两个人之间存在很多问题。到目前为止，我已经成功地将 bob.js 包含在包中，方法是将其包装在自执行函数中:

(function() {
    // old code of bob.js
 })();

但是为什么？ 我完全不知道如何包含/捆绑 max.js...

Answer 1

对于 main、joe 和 bob.js 你应该这样做:

要使脚本随处可用，您可以使用 angular-cli 文件夹结构中的 src/assets 文件夹。

然后将您的脚本包含在:

<script src="assets/my-script.js"></script>

作为一个选项，您可以使用 webpack 将这些依赖项从 node_modules 获取到 src/assets。

对于大多数情况，使用 CDN 是比这一切更好的选择。

<小时/>

至于max.js，我会创建一个服务来方便地注入(inject)它:

import { Injectable } from '@angular/core';

@Injectable()
export class MaxService {

 lib: any;
 constructor(){
  this.lib = require('max.js');
 }

}