Angular - 将脚本放在它自己的导入文件中

Question

想法是有一个非常薄的 index.html 文件，现在它是开发模式下的脚本标签文章

<html>
<body>
  <script></script>
  <script></script>
  <script></script>
  <script></script>
  <script></script>
  <script></script>
  <script></script> 
<!-- etc -->
</body>

我想我可以使用

<html>
   <body>
   <link rel="import" href="imports.html"
   </body>

imports.html看起来像

<script></script>
<script></script>
<script></script>
<script></script>
<script></script>

但是我遇到了各种喷油器错误。那么主要问题是这种方法是否可以进行一些调整？

Answer 1

是的，使用 gulp 和 browserify 让你像 nodejs 一样使用 require 标签，它会将你的依赖链构建到一个捆绑文件中，然后你可以对它进行 uglify 和 gzip，这将大大降低你的负载时间。 Gulp 有很多模块可以帮助解决这个问题。我也推荐浏览器同步。

我将负载分成两个文件，一个 depends.js 需要所有 angular 依赖项，另一个 app.js 包含我正在更改的更轻量级应用程序代码。我使用 watchify 来监控我的 browserify 链，当它触发时，它不必更新所有依赖项，它会缓存不变的文件，因此我的实时重新加载速度非常快。这也可以设置为从 css 之前的 head 标记异步加载依赖项，这可能会产生重大影响，因为它包含您的大部分有效负载。此外，当使用 browserify 时，您的源代码会更清晰，因为它会在构建时为您完成所有匿名函数包装。

我应该注意，我的 app.js 从来没有物理上需要 depends.js，因为那会捆绑到 1 个包，这会减慢实时重新加载构建的速度，并且不允许您进行巧妙的推送depends.js 保留在客户端缓存。它只是假设 angular 已经在 window 对象上定义，它保证是（如下所述）。

我在产品中使用相同的设置，因为它有利于我的加载时间，chrome 开发工具网络选项卡显示我所有的脚本异步加载。如果您加载异步，您可能需要将您的应用程序代码包装在一个函数中并在依赖代码的末尾执行它，否则您的应用程序将在加载之前尝试调用 angular，因为应用程序代码通常很多小于它的依赖项。

这是代码变得多么干净的示例 - angularjs browserify

Angular - 将脚本放在它自己的导入文件中

Angular - Place scripts in its own import file

angularjs

gruntjs

gulp

browserify