Angular应用中.js文件存放位置：angular.json或assets/dist？及用途疑问

嘿，这个问题问得很实际——两种方式都有各自的适用场景，不存在绝对的"正确"，关键看你的脚本用途：

一、用angular.json配置scripts数组 #

这种方式适合第三方依赖库或者需要全局可用的工具脚本，比如jQuery、Lodash、Chart.js这类：

• Angular CLI会自动把这些脚本打包到应用的vendor.js文件中，不用你手动在index.html里写<script>标签
• 你可以通过配置顺序来控制脚本的加载优先级，避免依赖顺序错误
• 配置示例：

  {
    "projects": {
      "your-app-name": {
        "architect": {
          "build": {
            "options": {
              "scripts": [
                "node_modules/jquery/dist/jquery.min.js",
                "src/assets/utils/global-helper.js"
              ]
            }
          }
        }
      }
    }
  }
  

• 优势：CLI帮你管理打包流程，全局变量自动可用，不用关心资源路径的问题

二、放入assets/dist并在index.html引用 #

这种方式适合自定义独立脚本、动态加载的脚本，或者不需要打包进主应用bundle的资源：

• assets目录是Angular默认的静态资源目录，这里的文件会被原封不动地复制到打包后的dist文件夹中
• 适合那些不需要和Angular代码深度整合的脚本，比如统计埋点脚本、独立的初始化工具、或者需要按需加载的脚本
• 引用示例：

  <!-- 在index.html中 -->
  <script src="assets/dist/custom-track-script.js"></script>
  

• 优势：脚本独立于主打包流程，修改后不需要重新打包整个应用，适合快速迭代的小脚本

额外建议 #

如果你的脚本需要和Angular组件交互，更推荐使用ES6模块导入的方式，比如：

// 在组件中导入
import * as _ from 'lodash';

这种方式更符合Angular的模块化规范，也方便Tree Shaking优化打包体积。

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