瀏覽器端javascript依賴

幾種實(shí)現(xiàn)方案

1.import

es6規(guī)范,編譯施加載，能夠在編譯時(shí)進(jìn)行靜態(tài)分析

基于函數(shù)的模塊并不是一個(gè)能被穩(wěn)定識(shí)別的模式（編譯器無法識(shí)別），它們的API予以只有在運(yùn)行時(shí)才會(huì)被考慮進(jìn)來。因此可以再運(yùn)行時(shí)修改一個(gè)模塊的API。相比之下，ES6模塊API更加穩(wěn)定（API不會(huì)動(dòng)態(tài)改變）。由于編輯器知道這一點(diǎn)，因此可以再編譯器檢查導(dǎo)入模塊的API的成員是否真實(shí)存在，如果不存在，編譯期將拋出一個(gè)或多個(gè)“早期”錯(cuò)誤。

2.require

commonJS/AMD規(guī)范，在運(yùn)行時(shí)加載，只能在運(yùn)行時(shí)確定模塊的依賴關(guān)系，無法進(jìn)行靜態(tài)優(yōu)化

RequireJS

異步加載js文件的框架。每個(gè)js文件列出自身依賴的js文件，requireJS先加載該文件依賴，再加載真正的文件。
語法：

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

NOTE：異步的方式加載，瀏覽器在等待加載時(shí)開始渲染頁面。因此無法使用ng-app語法初始化應(yīng)用，當(dāng)angularJS嘗試加載 ng-app中指定的模塊時(shí)，該模塊可能尚未加載。因此需調(diào)用 angular.bootstrap()來初始化應(yīng)用。

Browserify

允許使用NodeJS的require()和module.exports。
例：兩個(gè)文件
文件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的關(guān)鍵區(qū)別在于browserify輸出單個(gè)文件，可在頁面的<script>標(biāo)記中包含它。browserify沒有加載外部javascript的客戶端機(jī)制，他完全是一個(gè)編譯時(shí)工具，用于將所有的javascript連結(jié)成一個(gè)瀏覽器友好的文件。而requireJS將在瀏覽器中進(jìn)行操作，使用HTTP加載所需的額外js文件。
browserify還有一個(gè)主要優(yōu)點(diǎn)是使用npm的能力。通過browserify，可以再瀏覽器端使用這些包。
NOTE:browserify只做靜態(tài)分析，無法解析傳入變量作為參數(shù)的require()函數(shù)