System.js詳解

標籤：模板   表單   nod   code   cto   ejs   載入   快速   詳解   

這幾天研究TypeScript和Angular 4期間遇到很多坑，代碼問題解決起來還比較快速，但是到靈活部署的時候才發現坑好多。以前學習的Typescript和angular都是看書加揣摩，沒有正在運用在實際上面，所以一段時間後就遺忘了，導致浪費了很多時間，又要重頭學起，所以以後要邊學邊用，不學不用。哈哈，廢話不多說，下面進入正題：

Angular Quick Start教程中主要包含了2個設定檔，一個是tsconfig.json，一個是system.js。 tsconfig.json為 TypeScript 編譯器指定如何將 TypeScript 代碼轉換為javascript檔案 ，Typescript是JavaScript的一個超集，詳情大家可以去官網查看。這篇文檔主要介紹的就是System.js的作用。

SystemJS

載入模組

Systemjs是一個可配置模組載入器，為瀏覽器和NodeJs啟用動態Es模板載入器。任何具有標準的URL都可被載入為一個模組：

<script src="system.js"></script><script>  // 載入相對於當前地址的url  SystemJS.import(‘./local-module.js‘);  // 載入絕對url的地址  SystemJS.import(‘https://code.jquery.com/jquery.js‘);</script>

可以載入任何類型的模組格式，並由SystemJS自動檢測。

檔案存取權限

在本地運行時，請確保從本機伺服器或啟用了本地XHR請求的瀏覽器運行。如果不是，將會收到一條錯誤訊息。

對於Mac上的Chrome，您可以運行它： /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files &> /dev/null &

在Firefox中，這需要導航到about:config，進入security.fileuri.strict_origin_policy過濾器框並將選項切換為false。

載入ES6

app/es6-file.js:

export class q {    constructor() {      this.es6 = ‘yay‘;    }  }

  <script>    SystemJS.import(‘./app/es6-file.js‘).then(function(m) {      console.log(new m.q().es6); // yay    });  </script>

　　ES6模組定義名為export，提供一個靜態建構函式訪問器。

裝載期的配置

一些標準配置選項及其用例如下所述。

baseURL

baseURL提供了一種根據一個相對位址裝載模組的機制。

這使得能夠從許多不同的請求URL訪問相同的模組

SystemJS.config({  baseURL: ‘/modules‘});// 載入 /modules/jquery.jsSystemJS.import(‘jquery.js‘);

　　

上述表單中的模組名稱相對清晰，並且始終是相對於baseURL來載入的，而不是依賴於parentURL，它們就像普通URL一樣。

當載入相對文法時，模組不是依賴於baseURL，但是和baseURI很有關係：

// 根據baseUri載入，而不是BaseUrLSystemJS.import(‘./x.js‘);

　　

 

System.js詳解