浏览器端javascript依赖

几种实现方案

1.import

es6规范,编译施加载，能够在编译时进行静态分析

基于函数的模块并不是一个能被稳定识别的模式（编译器无法识别），它们的API予以只有在运行时才会被考虑进来。因此可以再运行时修改一个模块的API。相比之下，ES6模块API更加稳定（API不会动态改变）。由于编辑器知道这一点，因此可以再编译器检查导入模块的API的成员是否真实存在，如果不存在，编译期将抛出一个或多个“早期”错误。

2.require

commonJS/AMD规范，在运行时加载，只能在运行时确定模块的依赖关系，无法进行静态优化

RequireJS

异步加载js文件的框架。每个js文件列出自身依赖的js文件，requireJS先加载该文件依赖，再加载真正的文件。
语法：

require(
   paths,
   function(){
      angular
         .module('foo',[])
         .config(function($rootScopeProvider){
          //配置逻辑
          });
      angular.bootstrap(document,['foo']);
});

NOTE：异步的方式加载，浏览器在等待加载时开始渲染页面。因此无法使用ng-app语法初始化应用，当angularJS尝试加载 ng-app中指定的模块时，该模块可能尚未加载。因此需调用 angular.bootstrap()来初始化应用。

Browserify

允许使用NodeJS的require()和module.exports。
例：两个文件
文件1：browserify_controller.js

module.exports=function($scope){
  $scope.answer=42;
}

文件2：browserify_module.js

if(typeof window!=='undefined' && window.angular){
  var myModule=angular.module('MyModule',[]);
  myModule.controller('BrowserifyController',
    require('./browserify_controller.js'));
}

然后使用browserify命令行工具，生成浏览器友好的output.js。
browserify与requireJS的关键区别在于browserify输出单个文件，可在页面的<script>标记中包含它。browserify没有加载外部javascript的客户端机制，他完全是一个编译时工具，用于将所有的javascript连结成一个浏览器友好的文件。而requireJS将在浏览器中进行操作，使用HTTP加载所需的额外js文件。
browserify还有一个主要优点是使用npm的能力。通过browserify，可以再浏览器端使用这些包。
NOTE:browserify只做静态分析，无法解析传入变量作为参数的require()函数

模块加载器