我创建了我的第一个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页面,您将看到该工具的描述:
Universal 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应用程序的生产。