我创建了我的第一个Angular 2应用程序，我会弄清楚模块加载程序的作用是什么。
为什么我们需要它们？我试图在谷歌搜索和搜索，我不明白为什么我们需要安装其中之一来运行我们的应用程序。
为什么我们需要它们？我试图在谷歌搜索和搜索，我不明白为什么我们需要安装其中之一来运行我们的应用程序。
不能够只是使用导入从节点模块加载东西？
我跟着this tutorial(使用SystemJS)，它让我使用systemjs.config.js文件：
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'transpiled',// 'dist','@angular': 'node_modules/@angular','angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api','rxjs': 'node_modules/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js',defaultExtension: 'js' },'rxjs': { defaultExtension: 'js' },'angular2-in-memory-web-api': { main: 'index.js',};
var ngPackageNames = [
'common','compiler','core','forms','http','platform-browser','platform-browser-dynamic','router','router-deprecated','upgrade',];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['@angular/'+pkgName] = { main: 'index.js',defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js',defaultExtension: 'js' };
}
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
map: map,packages: packages
};
System.config(config);
})(this);
为什么我们需要这个配置文件？为什么我们需要SystemJS(或WebPack或其他)？
最后，在你看来，什么更好？
如果您转到SystemJS Github页面，您将看到该工具的描述：
原文链接：https://www.f2er.com/angularjs/146660.htmlUniversal dynamic module loader – loads ES6 modules,AMD,CommonJS and global scripts in the browser and NodeJS.
因为您在TypeScript或ES6中使用模块，所以需要一个模块加载器。在SystemJS的情况下，systemjs.config.js允许我们配置模块名称与其相应文件匹配的方式。
如果明确使用此配置文件(和SystemJS)导入应用程序的主模块，则此配置文件是必需的：
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
当使用TypeScript并将编译器配置为commonjs模块时，编译器将创建不再基于SystemJS的代码。在本例中，typescript编译器配置文件将显示如下：
{
"compilerOptions": {
"target": "es5","module": "commonjs",// <------
"moduleResolution": "node","sourceMap": true,"emitDecoratorMetadata": true,"experimentalDecorators": true,"removeComments": false,"noImplicitAny": false
}
}
Webpack是一个灵活的模块bundler。这意味着它进一步，不仅处理模块，而且提供了一种方式来打包您的应用程序(concat文件，uglify文件，…)。它还提供一个开发服务器负载重新加载开发
SystemJS和Webpack是不同的，但使用SystemJS，你仍然有工作要做(例如Gulp或SystemJS builder)打包您的Angular2应用程序的生产。
