如何在Angular中引入经Webpack打包的JS文件

基础全局引入方案 #

• 第一步：放置静态资源
  将你打包生成的JS文件存放到Angular项目的src/assets/scripts/目录下，没有对应目录可以自行创建。
• 第二步：配置构建规则
  打开项目根目录的angular.json文件，找到对应项目的构建配置节点，在scripts数组中添加你的JS文件路径：

{
  "projects": {
    "你的项目名": {
      "architect": {
        "build": {
          "options": {
            "scripts": [
              "src/assets/scripts/你的打包文件名.js"
            ]
          }
        }
      }
    }
  }
}

配置完成后重新启动项目，脚本会被自动打包到全局环境中。

• 第三步：配置类型声明避免TS报错
  在src目录下新建typings.d.ts文件（如果已有就直接编辑），添加对应全局变量的类型声明，假设你的JS包暴露的全局变量名为CustomBundle，可以按如下方式配置：

// 不清楚变量类型时可以先用any，已知类型可以替换成具体的类型定义
declare var CustomBundle: any;

• 第四步：在业务代码中调用
  在组件、服务中直接调用全局变量下的方法即可：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html'
})
export class DemoComponent implements OnInit {
  ngOnInit(): void {
    // 直接调用打包文件里的方法
    const res = CustomBundle.getResult();
    console.log(res);
  }
}

按需懒加载方案（适合大体积脚本、减少首屏负载） #

如果不想首屏就加载这个大体积JS，可以选择动态插入脚本的方式按需加载：

loadBundleScript() {
  // 避免重复加载
  if (window.CustomBundle) {
    console.log('脚本已加载，直接使用');
    return;
  }
  const script = document.createElement('script');
  script.src = 'assets/scripts/你的打包文件名.js';
  script.onload = () => {
    console.log('脚本加载完成，可正常调用方法');
    const res = window.CustomBundle.getResult();
  };
  script.onerror = () => {
    console.error('脚本加载失败');
  };
  document.body.appendChild(script);
}

注意事项 #

如果你的Webpack打包的JS文件没有默认暴露全局变量，需要修改Webpack配置的output节点，确保接口暴露到全局环境：

// 你的Webpack配置文件
module.exports = {
  output: {
    // ...其他配置
    library: 'CustomBundle', // 自定义全局变量名
    libraryTarget: 'window' // 挂载到window对象上
  }
}

内容的提问来源于stack exchange，提问作者user3660375