我是angular2，npm和systemjs的新手，我无法弄清楚如何加载和使用下载的node_modules。假设我想先加载jQuery然后再加载bootstrap。我修改了我的systemjs，但是有一些错误...
错误：
（index）：21错误：错误：Bootstrap的JavaScript需要 jQuery（...）（匿名函数）@（索引）：21ZoneDelegate.invoke @ zone.js：323Zone.run @ zone.js：216（匿名函数）@ zone.js：571ZoneDelegate.invokeTask @ zone.js：356Zone.runTask @ zone.js：256drainMicroTaskQueue @ zone.js：474ZoneTask.invoke @ zone.js：426（index）：20错误：ReferenceError：模块未定义（...）
的index.html
<!doctype html>
<html>
<head>
<base href="/"/>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
System.import('jQuery').catch(function(err){ console.error(err); });
System.import('bootstrap').catch(function(err){ console.error(err); });
</script>
<!--<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>-->
</head>
<!-- 3. Display the application -->
<body>
<app>Loading...</app>
</body>
</html>
systemjs.config.js
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'@angular': 'node_modules/@angular',
'rxjs': 'node_modules/rxjs',
'jQuery': 'node_modules/jQuery/lib/node-jquery.js',
'bootstrap': 'node_modules/bootstrap/dist/js/bootstrap.min.js'
};
// 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' }
};
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)
答案 0 :(得分：11)
以下是如何使用systemjs加载jquery和bootstrap ＃
npm install --save-dev bootstrap jquery
'bootstrap': 'node_modules/bootstrap/dist/js/bootstrap.min.js',
'jquery': 'node_modules/jquery/dist/jquery.js'
import "jquery";
import "bootstrap";