zoukankan      html  css  js  c++  java
  • 学习SystemJS 笔记

    baseURL

    所有模块相对于这个URL加载除非模块名是个绝对或相对URL
    System.config({ baseURL: '/app' });
    System.import('es6module.js'); // GET /app/es6module.js
    System.import('./es6module.js'); // GET /es6module.js
    System.import('http://example.com/es6module.js'); // GET http://example.com/es6module.js

    defaultExtensions

    如果defaultJSExtensions为true
    如果defaultJSExtensions为true,.js 扩展名会自动的添加到所有文件的路径。如果一个模块名已经有了超过.js扩展名(比如ts),.js还是会被添加上去:
    System.config({ defaultJSExtensions: true });
    System.import('./es6module'); // GET /es6module.js
    System.import('./es6module.js'); // GET /es6module.js
    System.import('./es6module.ts'); // GET /es6module.ts.js

    ** 警告:defaultJSExtensions会向后兼容,将来会被废弃 **

    map

    map选项允许你为模块名创建一个别名,当你引入一个模块,模块名会被相应的值替换,除非原始模块名是任何路径(绝对或相对)。map参数应用在 baseURL 之前:

    System.config({ map: { 'es6module.js': 'esSixModule.js' } });
    System.import('es6module.js'); // GET /esSixModule.js
    System.import('./es6module.js'); // GET /es6Module.js
    这里是另外一个例子:
    System.config({
    baseURL: '/app',
    map: { 'es6module': 'esSixModule.js' }
    });
    System.import('es6module'); // GET /app/esSixModule.js

    packages

    packages提供了一个设置metadata映射配置(特指公共路径的便捷方式)的简便方式。例如,接下来的代码段引导SystemJS像这样:System.import('app')仅通过文件名和默认扩展名ts去加载位于main_router_sample.ts文件:
    System.config({
    packages: {
    app: {
    defaultExtension: "ts",
    main: "main_router_sample"
    }
    }
    });
    System.import('app');

    paths

    paths选项和map很相似,但是支持通配符,它应用在map之后但在baseURL之前,你可以用map和paths,但是请记住paths是Loader规范ES6模块Loader的一部分,但map只被SystemJS识别:
    System.config({ baseURL: '/app', map: { 'es6module': 'esSixModule.js' }, paths: { '*': 'lib/*' } }); System.import('es6module'); // GET /app/lib/esSixModule.js
    在这本书的很多例子中,你将会看到System.import('app'),这意味着打开了一个不同名字的文件(不是app),因为我们设置过了mappackage属性。当你看到像import{Component}from '@angular/core';,@angular会映射到真实路径,即Angular框架所在之处,.core是子目录,子目录的main文件在SystemJS配置中被特指,在这个例子中:
    packages: { '@angular/core' : {main: 'index.js'} }

    transpiler

    transpiler选项允许你指定转换模块器的名字,转换模块器被用来加载应用模块。如果一个文件不包含至少一个import或export声明,它不会被转换。transplier能以包含以下三个值: typescript,traceur和babel:
    System.config({ transpiler: 'traceur', map: { traceur: '//unpkg.com/traceur@0.0.108/bin/traceur.js' } });

  • 相关阅读:
    git 通过 fork 解决代码冲突
    vue-cli3.0 多页面和单页面的配置以及相互之间的切换
    关于切换环境变量的问题( 以vue-cli3.0 为例)
    vue-router 钩子
    Android eMMC 分区详解(转载)
    《PE总结 》– 重定位表(转载)
    Linux 文件系统
    爬虫登录,立FLAG
    ios tweak 开发
    ios app 砸壳
  • 原文地址:https://www.cnblogs.com/xhy-steve/p/6655603.html
Copyright © 2011-2022 走看看