java - 是否可以将 AngularJs 包含到带有 Gradle 的项目中

Question

我知道可以将带有 Maven 的 AngularJs 包含到 Spring 项目中，但是如何将它包含在 Gradle 中？

查看 gradle 存储库，我发现没有 AngularJs 条目。也许可以使用 Gradle 从 Maven 存储库中获取它？但是如何做到这一点。

Answer 1

我有 AngularJS 2 + Spring Boot 应用程序和 Gradle。我使用 typescript(.ts 文件)和 npm(node js 包管理器)。所以我正在运行 npm install 来生成 node_modules 和 npm run tsc 来将 typescript 翻译成 javascript。不过，我仍然使用一些 webjar，基本上依赖项在构建时由 npm 任务收集并由 systemjs.config.js 文件连接

下面是我的文件夹结构

/src/main/java
/src/main/resources
                   /app           - .ts files and .js translated from .ts
                   /css
                   /js            - systemjs.config.js
                   /node_modules  - generated by npm install
                   /typings       - generated by npm install
                   package.json
                   tsconfig.json
                   typings.json
/src/main/webapp/WEB-INF/jsp      - .jsp files

这是我的 build.gradle 文件并添加两个自定义任务(npmInstall 和 npmRunTsc)来运行 npm 任务

build.gradle

buildscript {
    repositories {
        mavenCentral()
    }
    dependencies {
        classpath("org.springframework.boot:spring-boot-gradle-plugin:1.3.5.RELEASE")
        classpath("org.flywaydb:flyway-gradle-plugin:3.2.1")
    }
}

apply plugin: 'java'
apply plugin: 'eclipse'
apply plugin: 'idea'
apply plugin: 'spring-boot'
apply plugin: 'war'

war {
    baseName = 'my-angular-app'
    version =  '1.0'
    manifest {
        attributes 'Main-Class': 'com.my.Application'
    }
}

sourceCompatibility = 1.8
targetCompatibility = 1.8

repositories {
    mavenLocal()
    mavenCentral()
}

task npmInstall(type:Exec) {
    workingDir 'src/main/resources'
    commandLine 'npm', 'install'
    standardOutput = new ByteArrayOutputStream()
    ext.output = {
        return standardOutput.toString()
    }
}

task npmRunTsc(type:Exec) {
    workingDir 'src/main/resources'
    commandLine 'npm', 'run', 'tsc'
    standardOutput = new ByteArrayOutputStream()
    ext.output = {
        return standardOutput.toString()
    }
}

dependencies {
    // tag::jetty[]
    compile("org.springframework.boot:spring-boot-starter-web")
    compile("org.springframework.boot:spring-boot-starter-tomcat",
            "org.springframework.boot:spring-boot-starter-data-jpa",
            "org.springframework.boot:spring-boot-starter-actuator",
            "org.springframework.boot:spring-boot-starter-security",
            "org.springframework.boot:spring-boot-starter-batch",
            "org.springframework.cloud:spring-cloud-starter-config:1.0.3.RELEASE",
            "org.springframework.cloud:spring-cloud-config-client:1.0.3.RELEASE",
            "com.google.code.gson:gson",
            "commons-lang:commons-lang:2.6",
            "commons-collections:commons-collections",
            "commons-codec:commons-codec:1.10",
            "commons-io:commons-io:2.4",
            "com.h2database:h2",
            "org.hibernate:hibernate-core",
            "org.hibernate:hibernate-entitymanager",
            "org.webjars:datatables:1.10.5",
            "org.webjars:datatables-plugins:ca6ec50",
            "javax.servlet:jstl",
            "org.apache.tomcat.embed:tomcat-embed-jasper",
            "org.quartz-scheduler:quartz:2.2.1",
            "org.jolokia:jolokia-core",
            "org.aspectj:aspectjweaver",
            "org.perf4j:perf4j:0.9.16",
            "commons-jexl:commons-jexl:1.1",
            "cglib:cglib:3.2.1",
            "org.flywaydb:flyway-core",
            )
    providedRuntime("org.springframework.boot:spring-boot-starter-tomcat")
    testCompile("junit:junit",
                "org.springframework:spring-test",
                "org.springframework.boot:spring-boot-starter-test",
                "org.powermock:powermock-api-mockito:1.6.2",
                "org.powermock:powermock-module-junit4:1.6.2",
                )
}

task wrapper(type: Wrapper) {
    gradleVersion = '1.11'
}

当我运行 gradle 构建过程时，我运行如下

$ gradle clean npmInstall npmRunTsc test bootRepackage

我可以使用 AngularJS 教程中显示的相同 systemjs.config.js

systemjs.config.js

(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    'rxjs':                       'node_modules/rxjs',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    '@angular':                   'node_modules/@angular'
  };
  // 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/core',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/router-deprecated',
    '@angular/testing',
    '@angular/upgrade',
  ];
  // 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);

在 .jsp 文件中，我将 systemjs.config.js 包含在 head 部分中

<script type="text/javascript" src="node_modules/zone.js/dist/zone.js"></script>
<script type="text/javascript" src="node_modules/reflect-metadata/Reflect.js"></script>
<script type="text/javascript" src="node_modules/systemjs/dist/system.src.js"></script>
<script type="text/javascript" src="js/systemjs.config.js"></script>

最后，整理一下我在 Spring WebMvcConfigurerAdapter 上的上下文路径

@Configuration
@EnableWebMvc
@ComponentScan(basePackages = "com.my.controller")
public class WebConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        if (!registry.hasMappingForPattern("/webjars/**")) {
            registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
        }
        if (!registry.hasMappingForPattern("/images/**")) {
            registry.addResourceHandler("/images/**").addResourceLocations("classpath:/images/");
        }
        if (!registry.hasMappingForPattern("/css/**")) {
            registry.addResourceHandler("/css/**").addResourceLocations("classpath:/css/");
        }
        if (!registry.hasMappingForPattern("/js/**")) {
            registry.addResourceHandler("/js/**").addResourceLocations("classpath:/js/");
        }
        if (!registry.hasMappingForPattern("/app/**")) {
            registry.addResourceHandler("/app/**").addResourceLocations("classpath:/app/");
        }
        if (!registry.hasMappingForPattern("/node_modules/**")) {
            registry.addResourceHandler("/node_modules/**").addResourceLocations("classpath:/node_modules/");
        }
    }

    @Bean
    public InternalResourceViewResolver internalViewResolver() {
        InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();
        viewResolver.setPrefix("/WEB-INF/jsp/");
        viewResolver.setSuffix(".jsp");
        viewResolver.setOrder(1);
        return viewResolver;
    }
}