Question

我想以Angular2和SystemJS一起使用，这样我就可以轻松地在生产和开发之间切换。在开发中，我更喜欢使用每个文件的类，而不是在生产中我想使用单个最小化angular2包。

目前，我有以下index.html和config.js：

indexl.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="/node_modules/bootstrap/dist/css/bootstrap.css"/>
    <script type="text/javascript" src="/node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script type="text/javascript" src="/node_modules/systemjs/dist/system.js"></script>
    <script type="text/javascript" src="/js/config.js"></script>
    <script>
        System.import('ts/main.ts').catch(console.error.bind(console));
    </script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>

config.js：

System.config({
    transpiler: 'typescript',

    typescriptOptions: {
        emitDecoratorMetadata: true
    },

    map: {
        'angular2': '/node_modules/angular2',
        'rxjs': '/node_modules/rxjs'
    },

    paths: {
        'typescript': 'node_modules/typescript/lib/typescript.js',
        'http': 'node_modules/angular2/bundles/http.dev.js'
    },

    packages: {
        angular2: {
            defaultExtension: 'js'
        },
        rxjs: { defaultExtension: 'js' },
    }
});

问题：

上述代码适用于开发。请提供建议，如何更改System.config以便从单个angular2中使用/node_modules/angular2/bundles/angular2.min.js。将angular2.min.js添加到<script ...></script>不是一种选择，因为在这种情况下，我将无法动态切换dev和min个捆绑包（假设index.html是一个静态页面）

Answer 1

事实上，如果您想使用/node_modules/angular2/bundles/angular2.min.js，则无需在SystemJ中配置任何内容，因为使用System.register将模块显式注册到此文件中。

因此，您可以从SystemJS配置的angular2块中删除map。

Answer 2

在开发中，您可以使用他们的UMD捆绑包，这是官方指南中的systemjs配置文件

package be.ugent.lca.data.entities.deserializers;


import be.ugent.lca.data.entities.Dossier;
import com.fasterxml.jackson.core.JsonParser;
import com.fasterxml.jackson.core.ObjectCodec;
import com.fasterxml.jackson.databind.DeserializationContext;
import com.fasterxml.jackson.databind.JsonDeserializer;
import com.fasterxml.jackson.databind.JsonNode;
import java.io.IOException;

public class DossierDeserializer extends JsonDeserializer {
    @Override
    public Dossier deserialize(JsonParser jsonParser,
            DeserializationContext deserializationContext) throws IOException {
        ObjectCodec oc = jsonParser.getCodec();
        JsonNode root = oc.readTree(jsonParser);
        Dossier dossier = new Dossier();

        dossier.setExternDossierNr(root.get("externDossierNr").asText());
        dossier.setInternDossierNr(root.get("internDossierNr").asText());

        return dossier;
    }
}

在生产中，您可以使用相同的设置，但这次使用SystemJS Bundler或Webpack。此外，您不能再使用/** * 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': { defaultExtension: 'js' }, }; var ngPackageNames = [ 'common', 'compiler', 'core', 'http', 'platform-browser', 'platform-browser-dynamic', 'router', 'router-deprecated', 'upgrade', ]; // Add package entries for angular packages ngPackageNames.forEach(function(pkgName) { packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' }; }); var config = { map: map, packages: packages } System.config(config); })(this);，因为它不支持像rollup这样的树抖动优化

对于设置示例，refer此处

SystemJS，Angular2：在min / dev bundle之间切换

2 个答案: