Angular2 rc.5有什么方法可以摆脱npm依赖关系并使它们成为webjars - maven依赖项？
我能以同样的方式解决打字依赖关系吗？那个我附在最后的systemconfig.js映射怎么样。
以下是我的package.json
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/forms": "0.3.0",
"@angular/http": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"@angular/router": "3.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "2.0.0-rc.5",
"systemjs": "0.19.27",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.15",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings": "^1.0.4"
}
}
我有maven插件来执行安装
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<executions>
<execution>
<id>exec-npm-install</id>
<phase>generate-sources</phase>
<configuration>
<workingDirectory>${project.basedir}/src/main/resources/static</workingDirectory>
<executable>npm</executable>
<arguments>
<argument>install</argument>
</arguments>
</configuration>
<goals>
<goal>exec</goal>
</goals>
</execution>
<execution>
<id>exec-npm-run-tsc</id>
<phase>generate-sources</phase>
<configuration>
<workingDirectory>${project.basedir}/src/main/resources/static</workingDirectory>
<executable>npm</executable>
<arguments>
<argument>run</argument>
<argument>tsc</argument>
</arguments>
</configuration>
<goals>
<goal>exec</goal>
</goals>
</execution>
</executions>
</plugin>
和角度
的maven eqvivalent依赖关系<dependency>
<groupId>org.webjars.npm</groupId>
<artifactId>angular__common</artifactId>
<version>2.0.0-rc.5</version>
</dependency>
<dependency>
<groupId>org.webjars.npm</groupId>
<artifactId>angular__compiler</artifactId>
<version>2.0.0-rc.5</version>
</dependency>
<dependency>
<groupId>org.webjars.npm</groupId>
<artifactId>angular__core</artifactId>
<version>2.0.0-rc.5</version>
</dependency>
<dependency>
<groupId>org.webjars.npm</groupId>
<artifactId>angular__forms</artifactId>
<version>0.3.0</version>
</dependency>
<dependency>
<groupId>org.webjars.npm</groupId>
<artifactId>angular__http</artifactId>
<version>2.0.0-rc.5</version>
</dependency>
<dependency>
<groupId>org.webjars.npm</groupId>
<artifactId>angular__platform-browser-dynamic</artifactId>
<version>2.0.0-rc.5</version>
</dependency>
<dependency>
<groupId>org.webjars.npm</groupId>
<artifactId>angular__router</artifactId>
<version>3.0.0-rc.1</version>
</dependency>
<dependency>
<groupId>org.webjars.npm</groupId>
<artifactId>angular__router-deprecated</artifactId>
<version>2.0.0-rc.2</version>
</dependency>
<dependency>
<groupId>org.webjars.npm</groupId>
<artifactId>angular__upgrade</artifactId>
<version>2.0.0-rc.5</version>
</dependency>
<dependency>
<groupId>org.webjars.npm</groupId>
<artifactId>systemjs</artifactId>
<version>0.19.27</version>
</dependency>
<dependency>
<groupId>org.webjars.npm</groupId>
<artifactId>core-js</artifactId>
<version>2.4.0</version>
</dependency>
<dependency>
<groupId>org.webjars.npm</groupId>
<artifactId>reflect-metadata</artifactId>
<version>0.1.3</version>
</dependency>
<dependency>
<groupId>org.webjars.npm</groupId>
<artifactId>rxjs</artifactId>
<version>5.0.0-beta.6</version>
</dependency>
<dependency>
<groupId>org.webjars.npm</groupId>
<artifactId>zone.js</artifactId>
<version>0.6.12</version>
</dependency>
<dependency>
<groupId>org.webjars.npm</groupId>
<artifactId>angular2-in-memory-web-api</artifactId>
<version>0.0.15</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.3.6</version>
</dependency>
以下是我的systemconfig.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': 'app', // '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', 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 :(得分：0)
我正在使用弹簧靴我做了以下工作，它工作顺利。 INDEX.HTML
MongoDB我的systemjs.config.js
<!DOCTYPE HTML>
<html>
<head>
<!-- Set the base href -->
<link rel="icon" href="images/favicon.ico" type="image/x-icon"></link>
<base href="/"/>
<title>APP</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet"
href="webjars/bootstrap/css/bootstrap.css"></link>
<link rel="stylesheet"
href="webjars/bootstrap/css/bootstrap.min.css"></link>
<link rel="stylesheet" href="styles.css"></link>
<script src="webjars/core-js/client/shim.min.js"></script>
<script src="webjars/zone.js/dist/zone.js"></script>
<script src="webjars/reflect-metadata/0.1.3/Reflect.js"></script>
<script src="webjars/systemjs/dist/system.src.js"></script>
<script src="webjars/bootstrap/js/bootstrap.min.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<app>
<h1>Loading...</h1>
</app>
</body>
</html>
并在maven依赖项中添加以下内容
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'rxjs': 'webjars/rxjs/5.0.0-beta.6',
'angular2-in-memory-web-api': 'webjars/angular2-in-memory-web-api/0.0.15',
'@angular/common': 'webjars/angular__common/2.0.0-rc.5',
'@angular/compiler': 'webjars/angular__compiler/2.0.0-rc.5',
'@angular/forms': 'webjars/angular__forms/0.3.0',
'@angular/core': 'webjars/angular__core/2.0.0-rc.5',
'@angular/http': 'webjars/angular__http/2.0.0-rc.5',
'@angular/platform-browser': 'webjars/angular__platform-browser/2.0.0-rc.5',
'@angular/platform-browser-dynamic': 'webjars/angular__platform-browser-dynamic/2.0.0-rc.5',
'@angular/router': 'webjars/angular__router/3.0.0-rc.1',
'@angular/router-deprecated': 'webjars/router-deprecated/2.0.0-rc.2'
};
// 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': { defaultExtension: 'js' },
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/forms',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'@angular/router-deprecated',
];
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
}
System.config(config);
})(this);
多数，不需要庞大的node_modules。关于打字稿编译我还在努力